小程序自定义组件

小程序中如果一个页面UI太过复杂，亦或者某个UI组件复用次数多，可以考虑抽取出自定组件。抽离组件可以

1. 分而治之，使代码结构更清晰，也是重构的目的。
2. 复用，使逻辑出现在唯一出

自定义组件

页面中的网络头像有加载过程，可以在加载过程中给图像一个占位图。而这复用率很高，可以考虑抽取组件

1. 头像图片未加载成功之前显示占位图，利用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;
}

2. 点击头象，通知触发父组件事件

// 引用组件的页面.wxml
<profile bindXXX='xxx'  imgSrc='{{xxx}}' data-xx="{{xxx}}" />

<!--profile.js-->
_event: function(e){
    this.triggerEvent('XXX') 
}

相册授权

小程序中将图片或者视频，下载后保存到用户本地相册需要用户授权。若用户首次拒绝授权，再次下载时，得再次弹出询问授权按钮，否则图片无法下载。

1. 保存到相册，首次拒绝授权，第二次保存失败，再次询问 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('重新授权成功')
                        }
                    }
                })
            }
        }
    })
}

欢迎大家给我留言，提建议，指出错误，一起讨论学习技术的感受！