最近按照教程完成入门级别小程序的开发，作为这系列的最后一节，我主要对开发过程中使用的组件与布局进行进一步的整理，以组件为主。组件与页面布局（一）主要是介绍了开源LinUI组件库与小程序内置组件的使用；并引入flex布局。
开发过程中使用到的小程序功能
1、轻提示
- 首先在
.wxml文件中绑定tap事件和回调函数toast
轻提示
复制代码
- 然后在
.js中定义函数toast，引入轻提示框如下
toast(){
wx.showToast({
title: '收藏成功',
duration: 5000
})
},
复制代码
2、模态对话框
- 与轻提示类似,首先在
.wxml文件中绑定tap事件和回调函数modal
模态对话框
复制代码
- 然后在
.js中定义函数modal，引入模态对话框框如下，本例使用async-await处理对话框响应的事件，也可以使用success回调函数实现该功能。
async modal(){
const result = await wx.showModal({
title:'是否收藏文章',
cancelText:'取消',
confirmText:'确定',
})
console.log(result)
},
复制代码
3、菜单组件
- 首先在
.wxml文件中绑定tap事件和回调函数sheet
菜单组件
复制代码
wx.showActionSheet({
itemList: ['分享到QQ','分享到微信','分享到微博'],
success(res){
console.log(res)
}
})
复制代码
- 点击某一项触发
success回调事件结果如下。其中tapIndex对应定义itemList的数组序号
4、等待提示图标
- 与上述对话框类似，下面显示
.js中定义函数wait
wait(){
//显示等待提示图标
wx.showNavigationBarLoading()
//取消等待提示图标
//wx.hideNavigationBarLoading()
},
复制代码
5、选项卡组件
"tabBar": {
"selectedColor": "#333333",
"color": "#999999",
"position": "bottom",
"list": [
{
"text": "阅读",
"pagePath": "pages/posts/posts",
"iconPath": "/images/tab/post.png",
"selectedIconPath": "/images/tab/post@highlight.png"
},
{
"text": "测试",
"pagePath": "pages/test/test",
"iconPath": "/images/tab/movie.png",
"selectedIconPath": "/images/tab/movie@highlight.png"
}
]
}
复制代码
- 当其他页面跳转到
tabBar定义的页面时，不应使用wx.navigateTo，而需要使用wx.switchTab
onTap: function(params) {
//跳转页面
wx.switchTab({
url:"/pages/test/test",
})
},
复制代码
6、页面标题
"navigationBarTitleText":"测试组件"
复制代码
- 也可在
.js文件中进行动态设置，本例在onReady钩子中设置标题为变量title-test的值
onReady: function () {
wx.setNavigationBarTitle({
title: title-test,
})
},
复制代码
7、其他原生功能列举
小程序还有许多原生的功能，需要更加深入地学习与应用，以下仅对最近接触到的功能进行简单列举
- 下拉刷新：在
.json文件配置enablePullDownRefresh":true - 图片预览：先定义事件，并在
.js文件中的事件回调函数中添加语句
wx.previewImage({
urls: [this.data.movie.images.large],
})
复制代码
复制代码
- 音乐播放组件：
wx.getBackgroundAudioManager()
自定义组件入门
在开发过程中应该有组件的思想，小程序中万物都是组件，相同逻辑的元素建议抽离成组件进行使用
自定义组件的创建和引入
- 随后在
pages中的test页面的.json文件中引入
"usingComponents": {
"test-index":"/components/test-index/index"
},
复制代码
页面可通过自定义属性向组件传值
- 首先在自定义组件的
.js页面中的属性定义变量test
properties: {
test:String
},
复制代码
{{test}}
复制代码
复制代码
外部样式类-在页面设置自定义组件的样式
externalClasses:['f-class'],
复制代码
{{test}}
复制代码
复制代码
- 最后在页面的
.wxss中定义color-style
.color-style{
color: red !important;
}
复制代码
自定义事件-在页面设置自定义组件的事件回调函数
- 首先将组件中的某个元素绑定
tap事件，本例在组件.wxml的image元素绑定事件回调函数为changImg
- 随后在组件的
.js中定义事件回调，并抛出一个自定义事件imgtap
changeImg(){
this.triggerEvent('imgtap')
}
复制代码
- 接着在页面的
.wxml文件中引入自定义组件test-index，并绑定imgtap的事件回调函数tapImg
复制代码
tapImg(){
wx.showToast({
title: '点击成功',
duration: 5000
})
},
复制代码
