----uni-app之原生頭部上使用iconfont字體圖標----

UNI-APP添加頂部導航欄並且更換圖標

uni-app 是一個使用 Vue.js 開發跨平台應用的前端框架。

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

記錄一下更換頂部導航欄的流程

 

最終效果圖

在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.右上角下載全部已經收藏了的圖標

 

下載

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

 

unicode編碼

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

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

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