小程序转uni-app、小程序移植uniapp经验分享~

分类：uni-app

小程序发展这么久不得不说生态做的还是非常不错的，毕竟微信用户量在那放着。
大家都知道uniapp是采用小程序标准的，包括组件和api。不同的地方就是uniAPP采用了我们更加喜欢的vue。
所以，大部分小程序的插件uniapp都是可以使用的，只不过需要进行简单的处理。
好了少啰嗦，接下来分享下我移植小程序插件的经验及步骤。

1、.wxml 拷贝内容放在 .vue文件的 template标签下
2、修改基础语法，搜索 wx: 替换为 v-，搜索 bind 替换为 @，style、class、属性绑定方面有差别...具体就不细讲了，可以看看文档，很简单
3、.wxss 拷贝内容放在 .vue文件的 style 标签下，无需修改
4、.js onLoad、onShow等生命周期函数完全兼容，小程序的自定义函数要放在methods对象下
5、搜索 wx. 替换为 uni.，搜索 this.data 替换为 this 或者数据对象按照以下写法：

data:{  
    data:{  
       key:val   
   }  
}

如果数据对象按照以上写法，以下请自行做出相应改动。
在逻辑层出来的时候个人认为比较费劲的就是小程序的setData了，以下是我的解决方案，完全兼容小程序，支持附点子元素赋值操作：

setData:function(obj){  
    let that = this;  
    let keys = [];  
    let val,data;  
    Object.keys(obj).forEach(function(key){  
         keys = key.split('.');  
         val = obj[key];  
         data = that.$data;  
         keys.forEach(function(key2,index){  
             if(index+1 == keys.length){  
                 that.$set(data,key2,val);  
             }else{  
                 if(!data[key2]){  
                    that.$set(data,key2,{});  
                 }  
             }  
             data = data[key2];  
         })  
    });  
}

6、api基本一致，具体请参考文档
至此基本上就OK了，总结的不够全面请大家多多指教。
以此文简单分享一下希望可以有用，也希望大家可以一起完善uniapp生态。
以下是我的一些功能，插件链接，望大家多多支持。
1、uniapp图片裁剪插件
 2、swiper + scroll-view 实现下拉刷新
 3、单击back隐藏到后台
 4、【插件、图表】7种图表漂亮丰富