背景：
产品经理跟细心地测试会发现：当我们把小程序的某一子页面，分享给其他人的时候。其他人只能通过点击小程序右上角的三个点胶囊，然后再点击“返回首页”，才能回到首页。
我们除了让想让用户能够看到我们分享的界面外，肯定还想让他去首页逛一逛。当然还有其他tab页面的话，也能让用户看一看其他的页面。说不定就成我们的付费用户了呢！
基于上面的诉求，我们就在想能不能把返回首页做到页面上，让用户一眼就能看到？
预测方案：
- 悬浮按钮
- 自定义NavigationBar
方案分析：
方案一能达到目的，但是很显然不优雅。因为会遮挡部分页面信息，用户体验不好。
方案二利用顶部的空白资源，加上返回首页按钮，既简洁，对称又优雅，简直妙不可言。
需要解决的问题都有哪些：
- 查一下能自定义导航栏的微信版本跟调试库版本
- 撸一个自定义NavigationBar
实践的方式如下：
第一个问题：
- 调试基础库>=1.9.0
- 微信客户端>=6.6.0
- 调试基础库>=2.4.3
- 微信客户端版本>=7.0.0
第二个问题：
撸代码我觉得大家都没问题，下面说几个主要的点~
- 自定义导航栏文本，是否显示返回，是否显示返回首页,导航栏高度
// components/navigationBar/navigationBar.js
Component({
properties: {
text: {
type: String,
value: 'Wechat'
},
back: {
type: Boolean,
value: false
},
home: {
type: Boolean,
value: false
}
},
data: {
statusBarHeight: app.globalData.statusBarHeight + 'px',
navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
},
})
- statusBarHeight，这个需要在onLaunch获取
//app.js
App({
globalData: {
userInfo: null,
statusBarHeight: '',
},
onLaunch: function () {
wx.getSystemInfo({
success: (res) => {
this.globalData.statusBarHeight = res.statusBarHeight
console.log('statusBarHeight' + JSON.stringify(res))
}
})
}
})
- 组件的wxss
这里不管是页面布局还是字体都建议使用px，因为小程序页面右上角的胶囊也是用的px不是rpx
- 全局组件配置如下
{
"usingComponents": {
"navigationBar": "/components/navigationBar/navigationBar"
},
"window": {
"navigationStyle": "custom"
}
}
- 单页面组件配置如下
// app.json
{
"window": {
"navigationStyle": "default"
}
}
//end.json
{
"navigationStyle": "custom",
"usingComponents": {
"navigationBar": "/components/navigationBar/navigationBar"
}
}
至此所有问题，基本都已解决
Demo代码附上，欢迎参考
