摘要：背景第一天練習(xí)支付寶小程序的時(shí)候?qū)懞昧艘粋€(gè)簡單的頁面后續(xù)是新增重置按鈕連接后端接口然后加入圖標(biāo)網(wǎng)上看了很多小程序加圖標(biāo)例子說實(shí)話沒有多帶帶能成功的我也不記得結(jié)合了多少個(gè)才成功了還是自己寫了篇文章記錄下引入流程可能有點(diǎn)啰嗦但是比較詳細(xì)連接后端接

背景:第一天練習(xí)支付寶小程序的時(shí)候?qū)懞昧艘粋€(gè)簡單的頁面.后續(xù)是新增重置按鈕,連接后端接口.然后加入icon圖標(biāo).網(wǎng)上看了很多小程序加icon圖標(biāo)例子,說實(shí)話,沒有多帶帶能成功的,我也不記得結(jié)合了多少個(gè)才成功了.還是自己寫了篇文章,記錄下引入流程.可能有點(diǎn)啰嗦...但是比較詳細(xì).

第一步:設(shè)置服務(wù)器域名白名單

在開發(fā)區(qū)阿中的設(shè)置里面有個(gè)開發(fā)設(shè)置,在這里設(shè)置白名單的.我用的是公司賬號(hào).公司給了https的地址的.

第二步:調(diào)用my.request()方法

       沒寫過app不知道怎么調(diào)用這個(gè)方法.但是還是知道是寫在js文件里面的.然后把官網(wǎng)的例子丟進(jìn)了js的page里面.
   就開始報(bào)錯(cuò)了.后面又丟到page外面就不報(bào)錯(cuò)了.然后我就以為我放對(duì)位置了.結(jié)果改了url后.傳參數(shù).一直報(bào)這個(gè)錯(cuò):

    最后發(fā)現(xiàn)這個(gè)方法是可以直接調(diào)用的.像這樣,點(diǎn)擊提交的時(shí)候直接調(diào)用這個(gè)方法.我覺得那個(gè)成功調(diào)用方法后的彈框應(yīng)該是可以有其他方法的,
我這樣寫有些野蠻了.不過這個(gè)項(xiàng)目只需要這一個(gè)頁面,也只用這一個(gè)接口.我就直接粗暴的在調(diào)用接口成功的地方根據(jù)不同的情況直接彈框了.當(dāng)然loading還是要加一個(gè)的.

附上調(diào)用方法成功的代碼截圖:

介紹下小程序開發(fā)者工具一些小功能:

小程序上面有個(gè)模擬器,打開了右邊就會(huì)出現(xiàn)一個(gè)模擬的情況.就不用一直使用真機(jī)調(diào)試了.還可以切換手機(jī)型號(hào),屏幕大小等等.

小程序開發(fā)者工具上方的調(diào)試器打開后就是這樣:

這個(gè)功能還是蠻好的,和Google里打開F12一樣.AXML里面是可以修改樣式的.記得常用rpx為后綴,因?yàn)榭梢宰龅阶赃m應(yīng)屏幕.
(吐槽下,AXML就是輸入樣式的地方不太友好,.你得慢慢輸入...不能急躁...自行體會(huì)..)

第一步:進(jìn)去阿里icon官網(wǎng),https://www.iconfont.cn/ 一定要登錄,沒有帳號(hào)就注冊(cè)一個(gè)github的帳號(hào),很快的.然后建個(gè)項(xiàng)目出來.
點(diǎn)回主頁,搜索出自己需要的icon圖標(biāo).然后鼠標(biāo)移到圖標(biāo)上,點(diǎn)擊添加入庫.(這個(gè)庫里面圖標(biāo)好看還都是免費(fèi)的.用起來很順心~)

第二步:在右上角有個(gè)購物車會(huì)顯示一個(gè)1

第三步:點(diǎn)擊打開購物車,點(diǎn)擊添加至項(xiàng)目

第四步:來到這個(gè)頁面,點(diǎn)擊下載至本地

如果添加進(jìn)項(xiàng)目后沒有自動(dòng)跳轉(zhuǎn)至這個(gè)頁面的話,可以自己找到我的項(xiàng)目的位置:

第五步:打開下載后的文件,解壓到桌面

找到這個(gè)ttf后綴的文件備用,然后用瀏覽器進(jìn)入 https://transfonter.org 網(wǎng)站.

根據(jù)我截圖的5個(gè)步驟來.在第一步的時(shí)候選中你桌面剛剛備用的ttf后綴的文件.然后依次執(zhí)行2345步.

這是在生成文件的狀態(tài)(這里不需要操作,只是截圖出來看看):

然后點(diǎn)擊Download,下載生成后的文件.

同樣解壓至桌面:

兩個(gè)文件不要混淆了.最好改個(gè)名字.雖然我沒改...

最后找到這個(gè)文件,找到里面的iconfont.ttf和stylesheet.css文件備用.(溫馨提示:不要找錯(cuò)了文件..是后下載的這個(gè)文件,剛剛要你們改名的這個(gè)文件)

第六步:打開小程序開發(fā)者工具,在pages下面新建個(gè)static文件,在static里面再建個(gè)ali-icon文件.
(雖然我沒搞明白為什么要建這么多層的意義..但還是這樣做了...)
然后把剛剛備用的iconfont.ttf和stylesheet.css文件丟進(jìn)ali-icon的文件夾里.
stylesheet.css文件改名為stylesheet.acss.再新建個(gè)iconfont.acss文件.
(iconfont.acss里面要引入styleheet.acss文件的,文件地址你們根據(jù)自己的目錄結(jié)構(gòu)來改.反正我的這樣寫是引入成功了的.)

iconfont.acss 文件內(nèi)容:

@import "./stylesheet.acss";

@font-face {
  font-family: "iconfont";
  src: url("iconfont.eot");
  src: url("iconfont.eot?#iefix") format("embedded-opentype"),
  url("iconfont.woff") format("woff"),
  url("/static/ali-icon/iconfont.ttf") format("truetype"),  /* 使用的ttf，所以這里的路徑不能出錯(cuò)了 */
  url("iconfont.svg#iconfont") format("svg"); 
}

 
.iconfont{
  margin-left: 10px;
  margin-top: 50px;
  padding-top: 10px;
  font-family: "iconfont" !important;
  font-size: 17px;
  font-style: normal;
}

 
.icon-saoma:before{content:"e686";}
.icon-home1:before{content:"e7a3";}
.icon-gouwuche:before{content:"e60c";}

回到阿里icon的官網(wǎng).我的項(xiàng)目的地方.鼠標(biāo)移到icon圖標(biāo)上.點(diǎn)擊編輯圖標(biāo)

我圈起來的這兩個(gè)地方.要在iconfont.acss里面用到的.

就是這里要更改的地方.

這個(gè)是iconfont.ttf在小程序開發(fā)者工具里打開的樣子.不用意外也不用管.本來就是這樣的.
(只是截圖給介紹一下,這里不需要做事情)

這個(gè)是stylesheet.acss打開的樣子.里面就是剛剛在 https://transfonter.org 網(wǎng)站里得到的文件.
(只是截圖給介紹一下,這里也不需要做事情)

第七步:在app.acss里面導(dǎo)入iconfont.acss文件.

最后在需要用icon的地方使用它.
這里class=" " 里面的名字一定要跟你下載的icon圖標(biāo)名字一樣.如果你在icon項(xiàng)目里面改了名字.那這里就用你改的名字.我沒有改.

附上我的小程序頁面圖.

引入阿里icon圖標(biāo)需要注意的地方:
1:出現(xiàn)這樣的報(bào)錯(cuò)信息:

   不要慌,我遇到過很多次了.就是導(dǎo)入文件的層級(jí)關(guān)系出現(xiàn)了問題.小程序開始運(yùn)行加載的就是app.acss.所以在這里檢查你導(dǎo)入iconfont.acss的路徑就可以了.@import "./pages/static/ali-icon/iconfont.acss"; 我這樣寫是可以找到iconfont.acss文件的.如果報(bào)了這個(gè)錯(cuò)誤.你們根據(jù)自己實(shí)際路徑情況去改吧.多試試就調(diào)好了的.

2:如果icon圖標(biāo)顯示不全,就去檢查iconfont.acss里面的content是不是寫錯(cuò)了.
就是這里:icon-saomiaoshibie380:before{content:"e686";}
3:如果按照我的步驟第一次沒有成功.那么就把文章拉倒最上面跟著步驟再試一次~依次類推~你肯定能成功導(dǎo)入的icon圖標(biāo)的~加油~~!