1. 自定义组件
在微信小程序的开发中,经常需要在不同的地方使用一些相同的组件,这些组件的样式,数据,以及点击事件都是相同的,所以,可以微信提供了自定义组件的方式,可以将我们经常使用的组件封装起来,可以使得开发效率更高,让我们对于小程序的开发更加的深刻.
自定义组件官方文档
新建一个组件对应以下几个步骤:
- 新建一个专门用于存放组件的文件夹,可以命名为cmps(命名可以随意)
-
在cmps文件夹下,新建文件夹及组件Component(注意不是新建Page);�
image.png
- 和新建page一样,组件也有4个对应的文件,分别是js,json,wxml,wxss.
注意:微信官方的命名一般使用的中横线隔开,例如movie-item,所以命名的时候规则尽量与官方的一致.
2. 自定义组件的封装和使用
以我此次学习封装的movie-item为例,将整个的item的wxml,wxss,js等代码移动到对应的movie-item文件中,此处不再赘述,其中需要注意的是一些布局的代码,有些布局,例如item的宽度,这些在内部就可以写好,在外部的代码就可以直接删除:
image.png
2.1 组件的使用
在封装以后可以预先编译一下看看封装是否能达到效果,组件的使用如下:
- 在需要使用组件的page的.json文件中,加入以下代码:
{
"usingComponents": {
/* key:value key是组件的命名,一般和原有名称相同,value是组件的路径*/
"movie-item":"/cmps/movie-item/movie-item"
}
}
- 在wxml中直接使用movie-item标签:
<movie-item
class="item"
wx:key="unique"
wx:for="{{ row.movies }}"
wx:for-item="movie"
movie="{{movie}}">
</movie-item>
在封装以后可以编译一下看到效果:
image.png所以到这里封装成功了一小半,接下来需要将数据传给每个对应的item就行;
2.1 数据的处理:属性
当我们在封装好一个component后,这个组件需展示外部赋值的数据,在component.js文件中,有一个对应的properties可以用来传递参数赋值:
属性的定义如下:
命名:{ type:类型(String,Number,Object等),value:默认值(选填)}
Component({
properties: {
// 这里定义了innerText属性,属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
},
movie:{
type:Object,
value:null
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})
传递过来的movie的赋值给图片等东西以后,自定义组件的逻辑就实现了一半了,接下来就是实现点击事件等的添加;
2.2 点击事件的添加
例如我封装的每个movie-item,在不同的页面响应的事件应该是相同的,跳转的都是电影详情;
事件绑定
- wxml文件中先绑定事件:
<view class="item" bindtap="enterDetail"></view>
在自定义的组件中,以我自定义的movie-item为例,在.js文件中,有一个methods方法:
/**
* 组件的方法列表
*/
methods: {
enterDetail:function(){
wx.navigateTo({
url: `/pages/detail/detail?title=${this.data.movie.title}`,
});
}
}
3. 页面间的数据传递
在由movie-item跳转到电影详情detail的时候,需要将电影信息传递到detail页面,数据的传递有以下几种方式:
3.1 存储和读取
使用setStorage和getStorage方法,在进入页面之前通过电影名将电影信息存储起来,进入到电影页面通过电影名读取电影信息;
3.2 通过页面跳转url后拼接参数传递
页面跳转的url后面可以拼接参数:
注意:
-
url后面的参数拼接只能是字符串,例如:
url:
/pages/detail/detail?title=${this.data.movie.title}
, -
不能直接将movie对象直接拼接到url后面;
另一种做法是将movie对象转化为json字符串,然后,在detail页面中将字符串转成对象:
JSON和对象互转用法:JSON.stringify和JSON.parse
methods: {
enterDetail:function(){
// 序列化:将JSON对象转换为JSONString
// 反序列化:将JSONString转换为JSON对象
wx.navigateTo({
url: `/pages/detail/detail?movie=${JSON.stringify(this.data.movie)}`,
});
}
}
在detail页面的js文件onload方法中将参数转化为movie对象:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
let movie = JSON.parse(options.movie);
console.log(movie);
wx.setNavigationBarTitle({
title: movie.title,
});
},
打印url,options和movie对象如下:
image.png
3.3 使用eventChannel双向传递数据
在微信官方文档中链接,传递数据和监听打开页面事件响应使用了eventChannel,这是一个双向的channel, 使用起来也比较方便,所以相比较前两种方法,这种更适合页面间较大数据,对象等的传递,简单的值传递使用url拼接参数就可以实现. 以下是实现代码示例:
movie-item.js中的代码:
methods: {
enterDetail:function(){
wx.navigateTo({
url: '/pages/detail/detail',
success: (result) => {
//通过eventChannel向被打开的页面传递数据
result.eventChannel.emit('sendDataToDetail',{data:this.data.movie});
},
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
},
fail: () => {},
complete: () => {}
});
}
}
跳转页面detail.js中的代码:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const eventChannel = this.getOpenerEventChannel();
// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('sendDataToDetail',function(data){
console.log(data);
});
//向上一级页面返回数据
eventChannel.emit('acceptDataFromOpenedPage',{data:'sentBackTest'});
eventChannel.emit('someEvent', {data: 'test'});
},
打印如下:
image.png
还有很多传递数据的方式,比如可以在app.json中,给某个全局的对象如wx.db定义一个movie对象,每次在页面跳转前给这个对象赋值等.
实际上只要能实现传递数据的效果的方法都可以,但是,如果后期要增加多个数据或者对象,使用url拼接的方式就会显得很复杂,使用eventchannel的方式后期增加参数没有压力,所以视开发需求情况而定;
4. 自定义导航栏
导航栏设置:在开发中有时候需要设置导航栏颜色,title,动画,字体颜色等,如果使用的是系统的导航栏,这些官方都提供了api可以直接设置.
但是在实际开发过程中,有时候系统的导航栏很大可能不能满足我们开发的需求;
image.png
比如:在页面多次跳转以后,需要在导航栏上加上一个可以返回首页的按钮,这种情况下系统导航栏没有给我们提供api,也没有对应的组件,这时候就需要我们自定义导航栏来实现;
4.1 自定义导航栏需要实现的功能
- 可以展示系统导航栏没有的子控件,并且可以控制在不同页面展示和隐藏;
- 适配不同机型问题:
- 在有刘海的设备上:例如iPhone X,华为等,状态栏高度不一样,需要动态设定;
- android设备navBar的高度是48,iOS设备navBar的高度是44,也需要动态设定;
- 提供api给外界设置title,color,font等样式.
自定义导航栏方式:
-
在app.json中设置navigationBarStyle为custom,这样每个界面的导航栏就消失了,然后需要在每个界面自己添加自定义的导航栏
系统导航栏
全局配置: 未配置默认样式是default, 配置样式custom(自定义)以后,如图所示,搜索框的起始位置是从0开始的,在未配置以前是从导航栏的底部开始的.
"window": {
"navigationStyle":"custom"
},
系统导航栏隐藏后
4.2 获取状态栏高度
可以在app.js中,通过wx.getSystemInfoSync()方法获取设备的信息
image.png
const info = wx.getSystemInfoSync();
wx.db.statusBarHeight = info.statusBarHeight;
if(info.system =='android'){
wx.db.navBarHeight = 48;
}else{
wx.db.navBarHeight = 44;
}
4.3 导航栏的封装和实现
和movie-item一样,创建一个nav-bar组件,然后对应子控件,属性等,以下是具体代码.
wxml中的代码如下:
- 通过设置style来动态设置statusBar和navBar的高度;
- 通过wx:if判断属性值控制back和home是否展示
<view class="container">
<view class="status-bar" style="{{statusBarStyle}}">
</view>
<view class="nav-bar" style="{{navBarStyle}}">
{{title}}
<view class="icons">
<image bindtap="backClick" wx:if="{{ back == 'true' }}" class="back" src="/assets/imgs/nav_back.png"></image>
<image bindtap="homeClick" wx:if="{{ home == 'true' }}" class="home" src="/assets/imgs/nav_home.png"></image>
</view>
</view>
</view>
wxss中的代码如下:
- back和home居左,使用了相对和绝对布局;
- statusBar和navBar的高度通过wxml中的style设定;
.nav-bar{
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.icons{
position:absolute;
left: 25rpx;
display: flex;
align-items: center;
}
.home{
height: 36rpx;
width: 36rpx;
}
.back{
height: 36rpx;
width: 36rpx;
margin-right: 20rpx;
}
js中的代码如下:
- 在属性列表中的属性也可以通过this.data.xxx来获取;
- 返回上一级页面和home,可以设置wx.navgateBack()中的delta值来判断,(微信页面的层级最多10层,所以返回home,可以设置一个很大的数字);
- 在具体的页面想要监听返回和返回首页,可以使用this.triggerEvent来实现;
- 动态设置状态栏和导航栏的高度,在组件的声明周期lifetimes中,在组件即将被加载时设置,然后使用this.setData()方法刷新;
Component({
/**
* 组件的属性列表
*/
properties: {
title:{
type:String,
value:"豆瓣评分"
},
back:{
type:String,
value:"true"
},
home:{
type:String,
value:"false"
},
statusBarColor:{
type:String,
value:'#fff'
},
navBarColor:{
type:String,
value:'#fff'
}
},
/**
* 组件的初始数据
*/
data: {
statusBarStyle:'',
navBarStyle:''
},
/**
* 组件的方法列表
*/
methods: {
backClick:function(){
this.triggerEvent('backTap');
wx.navigateBack({
delta: 1
});
},
homeClick:function(){
this.triggerEvent('homeTap');
wx.navigateBack({
delta: 999
});
}
},
lifetimes: {
attached: function() {
const statusBarStyle=`height:${wx.db.statusBarHeight}px;background-color:${this.data.statusBarColor}`;
const navBarStyle=`height:${wx.db.navBarHeight}px;background-color:${this.data.navBarColor}`;
this.setData({statusBarStyle,navBarStyle});
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
})
不同页面样式的导航栏如下:
首页-没有back没有home list-没有home detail-back和home都有前端的开发都是相通的,这一点从自定义组件可以看出来,对与系统提供的组件不能满足需求时,通过自己的封装,不仅能够实现需求,更能在开发的工程中收获满满.
网友评论