uniapp更改圖標的方法：首先把圖標文件里的“iconfont.ttf”放到static文件夾里；然后打開“iconfont.css”，并查看unicode編碼；最后把對應(yīng)圖標的編碼填寫到“page.json”的配置項里text即可。

本教程操作環(huán)境：Windows7系統(tǒng)、uni-app2.5.1版本，該方法適用于所有品牌電腦。

推薦（免費）：uni-app開發(fā)教程

UNI-APP添加頂部導(dǎo)航欄并且更換圖標

uni-app 是一個使用 Vue.js 開發(fā)跨平臺應(yīng)用的前端框架。

開發(fā)者通過編寫 Vue.js 代碼，uni-app 將其編譯到iOS、Android、微信小程序等多個平臺，保證其正確運行并達到優(yōu)秀體驗。

記錄一下更換頂部導(dǎo)航欄的流程

最終效果圖

在page.json里的配置項

{             "path": "pages/my/index",             "style": {                 "app-plus": {                     "titleNView": {                         "buttons": [{                                 "text": "ue605",                                 "fontSrc": "/static/iconfont.ttf",                                 "fontSize": "22px",                                 "float": "left"                             },                             {                                 "text": "ue606",                                 "fontSrc": "/static/iconfont.ttf",                                 "fontSize": "22px"                             }                         ]                     }                 }             }         },

更換圖標

1.在阿里巴巴矢量圖選擇自己喜歡的圖標，然后點擊收藏

收藏圖標

2.右上角下載全部已經(jīng)收藏了的圖標

下載

3.在編輯器打開已經(jīng)下載的文件,把文件里的iconfont.ttf丟到static文件夾里，然后再打開iconfont.css里查看unicode編碼

unicode編碼

4.最后把對應(yīng)圖標的編碼填寫到page.json的配置項里text，需要寫成一個"u***"，然后重啟就實現(xiàn)了

5.最后在對應(yīng)的頁面生命周期方法里填寫，通過e.index，來配置不同的方法

      onNavigationBarButtonTap:function(e){             console.log(JSON.stringify(e))         },