uniapp在app中自定义类小程序导航栏
引言
leader:现在小程序那么火,用户也习惯小程序的操作模式了,能不能把app中的那些功能服务也做成小程序的样子?
我:虽然uniapp开发的app也支持开发小程序的wgt包集成到app中,但是app那么多功能,要是一个个独立开发成一个个wgt小程序包,然后在一个个集成到app中?先给我一年时间吧。
leader:不一定非要做成小程序,要的就是小程序的效果,右上角要有类似小程序的按钮操作,一个可以分享当前页面,一个可以关闭页面,要是页面层级太多,总不能让用户用左上角返回按钮一直返回吧,想想办法?
我:哦,那就不用做小程序了,做两个类似的按钮放上去就行了,简单,给我一天时间。
先来一张要做的效果图
一、在阿里巴巴的iconfont下载所需的字体图标
二、将字体文件iconfont.ttf放到uniapp项目下的static文件夹下
三、在uniapp需要自定义导航栏的页面添加相关代码
1.在pages.json中添加自定义按钮图标
注意:text的内容就是从iconfont中下载的iconfont.css的内容,\e649就是表示那个三个点的“更多”图标,\e704就是表示那个圆圈的关闭图标,注意放到uniapp中使用时需要在前面加u(这个是uniapp语法规定)。