資訊專欄INFORMATION COLUMN
摘要：背景第一天練習支付寶小程序的時候寫好了一個簡單的頁面后續是新增重置按鈕連接后端接口然后加入圖標網上看了很多小程序加圖標例子說實話沒有多帶帶能成功的我也不記得結合了多少個才成功了還是自己寫了篇文章記錄下引入流程可能有點啰嗦但是比較詳細連接后端接
背景:第一天練習支付寶小程序的時候寫好了一個簡單的頁面.后續是新增重置按鈕,連接后端接口.然后加入icon圖標.網上看了很多小程序加icon圖標例子,說實話,沒有多帶帶能成功的,我也不記得結合了多少個才成功了.還是自己寫了篇文章,記錄下引入流程.可能有點啰嗦...但是比較詳細.
連接后端接口:第一步:設置服務器域名白名單
在開發區阿中的設置里面有個開發設置,在這里設置白名單的.我用的是公司賬號.公司給了https的地址的.
第二步:調用my.request()方法
沒寫過app不知道怎么調用這個方法.但是還是知道是寫在js文件里面的.然后把官網的例子丟進了js的page里面. 就開始報錯了.后面又丟到page外面就不報錯了.然后我就以為我放對位置了.結果改了url后.傳參數.一直報這個錯:
最后發現這個方法是可以直接調用的.像這樣,點擊提交的時候直接調用這個方法.我覺得那個成功調用方法后的彈框應該是可以有其他方法的, 我這樣寫有些野蠻了.不過這個項目只需要這一個頁面,也只用這一個接口.我就直接粗暴的在調用接口成功的地方根據不同的情況直接彈框了.當然loading還是要加一個的.
附上調用方法成功的代碼截圖:
介紹下小程序開發者工具一些小功能:
小程序上面有個模擬器,打開了右邊就會出現一個模擬的情況.就不用一直使用真機調試了.還可以切換手機型號,屏幕大小等等.
小程序開發者工具上方的調試器打開后就是這樣:
這個功能還是蠻好的,和Google里打開F12一樣.AXML里面是可以修改樣式的.記得常用rpx為后綴,因為可以做到自適應屏幕.
(吐槽下,AXML就是輸入樣式的地方不太友好,.你得慢慢輸入...不能急躁...自行體會..)
第一步:進去阿里icon官網,https://www.iconfont.cn/ 一定要登錄,沒有帳號就注冊一個github的帳號,很快的.然后建個項目出來.
點回主頁,搜索出自己需要的icon圖標.然后鼠標移到圖標上,點擊添加入庫.(這個庫里面圖標好看還都是免費的.用起來很順心~)
第二步:在右上角有個購物車會顯示一個1
第三步:點擊打開購物車,點擊添加至項目
第四步:來到這個頁面,點擊下載至本地
如果添加進項目后沒有自動跳轉至這個頁面的話,可以自己找到我的項目的位置:
第五步:打開下載后的文件,解壓到桌面
找到這個ttf后綴的文件備用,然后用瀏覽器進入 https://transfonter.org 網站.
根據我截圖的5個步驟來.在第一步的時候選中你桌面剛剛備用的ttf后綴的文件.然后依次執行2345步.
這是在生成文件的狀態(這里不需要操作,只是截圖出來看看):
然后點擊Download,下載生成后的文件.
同樣解壓至桌面:
兩個文件不要混淆了.最好改個名字.雖然我沒改...
最后找到這個文件,找到里面的iconfont.ttf和stylesheet.css文件備用.(溫馨提示:不要找錯了文件..是后下載的這個文件,剛剛要你們改名的這個文件)
第六步:打開小程序開發者工具,在pages下面新建個static文件,在static里面再建個ali-icon文件.
(雖然我沒搞明白為什么要建這么多層的意義..但還是這樣做了...)
然后把剛剛備用的iconfont.ttf和stylesheet.css文件丟進ali-icon的文件夾里.
stylesheet.css文件改名為stylesheet.acss.再新建個iconfont.acss文件.
(iconfont.acss里面要引入styleheet.acss文件的,文件地址你們根據自己的目錄結構來改.反正我的這樣寫是引入成功了的.)
iconfont.acss 文件內容:
@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，所以這里的路徑不能出錯了 */
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的官網.我的項目的地方.鼠標移到icon圖標上.點擊編輯圖標
我圈起來的這兩個地方.要在iconfont.acss里面用到的.
就是這里要更改的地方.
這個是iconfont.ttf在小程序開發者工具里打開的樣子.不用意外也不用管.本來就是這樣的.
(只是截圖給介紹一下,這里不需要做事情)
這個是stylesheet.acss打開的樣子.里面就是剛剛在 https://transfonter.org 網站里得到的文件.
(只是截圖給介紹一下,這里也不需要做事情)
第七步:在app.acss里面導入iconfont.acss文件.
最后在需要用icon的地方使用它.
這里class=" " 里面的名字一定要跟你下載的icon圖標名字一樣.如果你在icon項目里面改了名字.那這里就用你改的名字.我沒有改.
附上我的小程序頁面圖.
引入阿里icon圖標需要注意的地方:
1:出現這樣的報錯信息:
不要慌,我遇到過很多次了.就是導入文件的層級關系出現了問題.小程序開始運行加載的就是app.acss.所以在這里檢查你導入iconfont.acss的路徑就可以了.@import "./pages/static/ali-icon/iconfont.acss"; 我這樣寫是可以找到iconfont.acss文件的.如果報了這個錯誤.你們根據自己實際路徑情況去改吧.多試試就調好了的.
2:如果icon圖標顯示不全,就去檢查iconfont.acss里面的content是不是寫錯了.
就是這里:icon-saomiaoshibie380:before{content:"e686";}
3:如果按照我的步驟第一次沒有成功.那么就把文章拉倒最上面跟著步驟再試一次~依次類推~你肯定能成功導入的icon圖標的~加油~~!
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116371.html
摘要：文件名字支付寶頁面標題導航欄背景色是否允許下拉刷新默認頁面是否支持縱向拽拉超出實際內容。請求數據請求支付寶的請求是如果需要設置支付寶為微信是參數不同如果是請求，需要給的值加上最終為 ①支付寶創建個人身份 【假如想要變成公司項目的 小程序管理員，千萬千萬不要變成==自研開發者==】 會設置不了的 ②支付寶的緩存機制 setStorageSync 【設置本地存儲】 my.setStor...
摘要：繼微信正式推出微信小程序后，各個大廠陸續發布了各自的小程序平臺支付寶小程序百度小程序頭條小程序，跨小程序平臺開發也成為了眾多小程序開發者要面臨的問題。 繼微信正式推出微信小程序后，各個大廠陸續發布了各自的小程序平臺 —— 支付寶小程序、百度小程序、頭條小程序，跨小程序平臺開發也成為了眾多小程序開發者要面臨的問題。 Antmove - 小程序跨平臺解決方案 小程序開發血淚史 小程序發展初...
摘要：月日，在阿里云峰會北京站上，阿里巴巴旗下的阿里云支付寶淘寶釘釘高德等聯合發布阿里巴巴小程序繁星計劃提供億元補貼，扶持萬小程序開發者萬商家。會上，阿里云正式發布了小程序云?？吹椒毙怯媱澮焉蠠崴选Ｍㄟ^小程序云服務可以極大的降低交付部署成本。3月21日，在2019阿里云峰會·北京站上，阿里巴巴旗下的阿里云、支付寶、淘寶、釘釘、高德等聯合發布阿里巴巴小程序繁星計劃：提供20億元補貼，扶持200萬+小...
閱讀 3491·2021-11-18 10:02
閱讀 1620·2021-10-12 10:12
閱讀 3001·2021-10-09 09:53
閱讀 4892·2021-09-09 09:34
閱讀 874·2021-09-06 15:02
閱讀 2785·2021-08-05 10:02
閱讀 3146·2019-08-30 15:44
閱讀 3128·2019-08-28 18:04
