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

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

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

最終效果圖

在page.json里的配置項(xiàng)

{
            "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"

                            }
                        ]
                    }
                }
            }
        },

更換圖標(biāo)

1.在阿里巴巴矢量圖選擇自己喜歡的圖標(biāo)，然后點(diǎn)擊收藏

收藏圖標(biāo)

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

下載

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

unicode編碼

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

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

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