久不写文,手有些生,见谅。
最近App项目要将其中一个模块抽出来做成小程序, 功能包含 :底部的Tab栏,顶部的标题栏
这里选择自定义的原因有两点:
- narBar 微信原生不支持设置返回图标,且在 Android 上标题是居左显示,在 iOS 上是居中显示。
- 底部的 tabBar 不支持点击跳页面,图标布局不支持超过 tabBar 的高度。
下面两张图是简单实现的效果。
实现分析 源码地址
实现分析
以上效果我也是参考的网上例子来实现,可看该效果原作的分析。或者看看下面我的理解。
微信小程序自定义组件
官方文档地址 developers.weixin.qq.com/miniprogram…
文档中说明了自定义组件
- 可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用。
- 也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。
创建自定义组件
在最新的开发工具中已经支持直接创建组件了,创建一个 components
目录,然后在创建一个组件对于的目录,例如这里创建的是tabbar
目录,然后在该目录点击鼠标右键选择新建Component
,输入组件名称即可,例如这里输入的是tabbar
。
组件模板和样式
官方文档 developers.weixin.qq.com/miniprogram…
类似于页面,自定义组件拥有自己的wxml
模板和 wxss
样式
在组件模板中可以提供一个
节点,用于承载组件引用时提供的子节点。这个
节点相当于组件占位符。
默认情况wxml
中只支持一个
节点,可以设置支持多个
节点:
布局编写好之后就开始设置样式了,在页面中可以通过wxss
来定义,也可以通过设置组件的class
名称,然后再调用该组件的 wxss
中定义样式。
组件的wxss
默认是不支持app.wxss
样式的,但是可以像设置多
一样,进行设置:
模板数据绑定
通过调用 Component构造器时可以指定组件的属性、数据、方法等。developers.weixin.qq.com/miniprogram…
Component({
// 详细使用看文档
behaviors: [],
properties: {
myProperty: { // 属性名
type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个
observer(newVal, oldVal, changedPath) {
// 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
// 通常 newVal 就是新设置的数据, oldVal 是旧数据
}
},
myProperty2: String // 简化的定义方式
},
data: {}, // 私有数据,可用于模板渲染
lifetimes: {
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached() { },
moved() { },
detached() { },
},
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached() { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready() { },
pageLifetimes: {
// 组件所在页面的生命周期函数
show() { },
hide() { },
resize() { },
},
methods: {
onMyButtonTap() {
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
// 内部方法建议以下划线开头
_myPrivateMethod() {
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange(newVal, oldVal) {
}
}
})
复制代码
在上面的代码中我们可以通过properties
和setData
结合实现动态设置数据,在methods
中可以定义方法,用于给外部调用,也就是组件间的通信。
组件间通信
可以通过
triggerEvent
或者直接获取组件this.selectComponent
示例来调用方法和属性。
- triggerEvent
- 父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。
开始使用组件
在页面的json
文件中配置组件的路径,如下:
{
"usingComponents": {
"navbar": "/components/navbar/index",
"tabbar": "/components/tabbar/tabbar"
}
}
复制代码
在页面的wxml
布局中添加,如下:
// 引入组件
'{{nvabarData}}'>
// 内容
"home-page">
'margin-top: {{height}}px;margin-bottom:10px;'>
// 引入组件
"{{tabbar}}">
复制代码
自定义 tabBar 组件分析
看文章顶部原作者的分析。下面介绍一些坑。
-
虽然在组件的
js
文件中已经设置了tabbar
但是在app.json
中还是需要配置tabbar
,详细配置可看文章顶部github
链接。 -
在页面的
onload
中还需要再设置一次
wx.hideTabBar({
})
复制代码
因为从分享页面点击左上角的首页图标回到首页会出现两个tabbar
,所以在首页还需要再隐藏一次tabbar.
- 注意路径问题,新版的开发工具
components
文件应该在miniprogram
下,和pages
为同级,否则在引入组件的路径中可能会出错。
自定义 navBar 组件分析
小程序中分享出去的页面是没有返回按钮的,为了用户能够再次回到我们的小程序中,我们在 navbar 上自定义了一个返回按钮和返回首页的按钮。
这里通过小程序的场景值和使用一个全局的变量share
来判断是否是从分享页面进来。在 app.js
中做了处理:
// 判断是否由分享进入小程序
if (options.scene == 1007 || options.scene == 1008) {
this.globalData.share = true
} else {
this.globalData.share = false
};
复制代码
为了适配顶部的高度,在wxml
布局中还动态设置了一个margin-top
的高度,这个高度通过获取系统的状态栏高度得到。
getSystemInfo: function () {
let t = this;
wx.getSystemInfo({
success: function (res) {
// 获取高度
t.globalData.height = res.statusBarHeight;
}
});
},
复制代码
然后在页面的data
中设置组件的数据和状态栏的高度:
data: {
// 组件所需的参数
nvabarData: {
showCapsule: 0, //是否显示左上角图标 1表示显示 0表示不显示
title: '让故事发生', //导航栏 中间的标题
},
// 此页面 页面内容距最顶部的距离
height: app.globalData.height * 2 + 20,
// tabbar
tabbar: {},
},
复制代码
原作者在实现图标的显示和隐藏部分逻辑和我的预期不一致,我想实现的是从分享页面进入才显示左上角的返回首页图标,正常也就只显示返回按钮。修改点后的wxml
如下:
'_navback' wx:if='{{!share}}'>
'/images/back.png' mode='aspectFill' class='back-pre'>
// 这里把 share 取反去掉
'navbar-v-line' wx:if='{{share}}'>
// 这里把 share 取反去掉
'_backhome' wx:if='{{share}}'>
'/images/icon/icon_home.png' mode='aspectFill' class='back-home'>
复制代码
本文完~,喜欢就点个赞呗。