小程序中如果一个页面UI太过复杂，亦或者某个UI组件复用次数多，可以考虑抽取出自定组件。抽离组件可以
- 分而治之，使代码结构更清晰，也是重构的目的。
- 复用，使逻辑出现在唯一出
自定义组件
页面中的网络头像有加载过程，可以在加载过程中给图像一个占位图。而这复用率很高，可以考虑抽取组件
- 头像图片未加载成功之前显示占位图，利用bindload方法
<!--profile.wxml-->
<view class='v-h-center'>
<image class="{{isFinishLoad ?'':'before-load'}}" src='{{imgSrc}}' bindload='finishLoad' />
</view>
<!--profile.js-->
finishLoad: function(){
this.setData({
isFinishLoad: true
});
}
<!--profile.wxss-->
.before-load {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
border: 1rpx solid #a7a7a7;
background-color: #EEE;
}
- 点击头象，通知触发父组件事件
// 引用组件的页面.wxml
<profile bindXXX='xxx' imgSrc='{{xxx}}' data-xx="{{xxx}}" />
<!--profile.js-->
_event: function(e){
this.triggerEvent('XXX')
}
相册授权
小程序中将图片或者视频，下载后保存到用户本地相册需要用户授权。若用户首次拒绝授权，再次下载时，得再次弹出询问授权按钮，否则图片无法下载。
- 保存到相册，首次拒绝授权，第二次保存失败，再次询问 wx.openSetting
wx.saveVideoToPhotosAlbum({
filePath: res.tempFilePath,
success: res => {
this.showMsg('视频已保存到相册~~');
},
fail: res => {
this.getPhotoAuthorize();
}
});
getPhotoAuthorize: function () {
wx.showModal({
title: '提示',
confirmText: '去授权',
content: '授权后才能保存到相册噢',
success: res => {
if (res.confirm) {
console.log('用户点击授权')
wx.openSetting({
success: function (res) {
if (!res.authSetting["scope.writePhotosAlbum"]) {
console.log('重新授权成功')
}
}
})
}
}
})
}
欢迎大家给我留言，提建议，指出错误，一起讨论学习技术的感受！
