uniapp在app中自定义类小程序导航栏

409 阅读2分钟

uniapp在app中自定义类小程序导航栏

引言

leader:现在小程序那么火,用户也习惯小程序的操作模式了,能不能把app中的那些功能服务也做成小程序的样子?

我:虽然uniapp开发的app也支持开发小程序的wgt包集成到app中,但是app那么多功能,要是一个个独立开发成一个个wgt小程序包,然后在一个个集成到app中?先给我一年时间吧。

leader:不一定非要做成小程序,要的就是小程序的效果,右上角要有类似小程序的按钮操作,一个可以分享当前页面,一个可以关闭页面,要是页面层级太多,总不能让用户用左上角返回按钮一直返回吧,想想办法?

我:哦,那就不用做小程序了,做两个类似的按钮放上去就行了,简单,给我一天时间。


先来一张要做的效果图

image.png

一、在阿里巴巴的iconfont下载所需的字体图标

image.png

二、将字体文件iconfont.ttf放到uniapp项目下的static文件夹下

image.png image.png

三、在uniapp需要自定义导航栏的页面添加相关代码

1.在pages.json中添加自定义按钮图标
image.png image.png

注意:text的内容就是从iconfont中下载的iconfont.css的内容,\e649就是表示那个三个点的“更多”图标,\e704就是表示那个圆圈的关闭图标,注意放到uniapp中使用时需要在前面加u(这个是uniapp语法规定)。

2.在具体的页面添加这两个按钮的点击处理逻辑
image.png index为1表示点击了“更多”图标,其中实现分享的逻辑,index为0表示点击了“关闭”图标,其中实现关闭当前窗口逻辑

四、效果演示

image.png