小程序 自定义组件

小程序中如果一个页面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('重新授权成功')
                           }
                       }
                   })
               }
           }
       })
   }

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