uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。
要实现的最终效果图：
uni-app 在page.json里的配置项
{ "path": "pages/chat/list", "style": { "navigationBarTitleText": "45things", "app-plus": { "titleNView": { "buttons": [{ "text": "\ue409", "fontSrc": "/static/uni.ttf", "fontSize": "20px" }, { "text": "\ue409", "fontSrc": "/static/uni.ttf", "fontSize": "20px" }] } } } },导航栏上引入的字体图标：
用 uni-app 自己的 uni.ttf 对照 icon官方链接 来引入字体图标外部引入 例如 阿里巴巴矢量图标库 1、在 阿里矢量图标 选择自己喜欢的图标，然后点击收藏 2.右上角下载全部已经收藏了的图标 3.在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到static文件夹里，然后再打开iconfont.css里查看unicode编码 4.最后把对应图标的编码填写到page.json的配置项里text，需要写成一个"\u***"，然后重启就实现了最后在对应的页面生命周期方法里 通过e.index，来配置不同的导航栏方法
onNavigationBarButtonTap:function(e){ console.log(JSON.stringify(e)) },