杨大宝
杨大宝
  • 发布:2018-09-13 10:31
  • 更新:2019-09-02 22:02
  • 阅读:28581

小程序转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种图表漂亮丰富

16 关注 分享
Trust Neil_HL 钟文 周华飞 DCloud_heavensoft Geeker 3***@qq.com w***@163.com wuguangyong 秋天无风 3***@qq.com 2***@qq.com sonicsunsky c***@163.com 睡不醒哎 世博

该文章目前已经被锁定, 无法添加新评论

四宝花生酱

四宝花生酱

[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option. __ERROR 请问这个报错有影响吗 setData 方法引起的
2019-09-02 22:02
zhangdaren

zhangdaren

回复 逐鹿实验室 :
http://ask.dcloud.net.cn/article/36037 试试这个工具吧。
2019-08-23 16:29
9***@qq.com

9***@qq.com

1412434\
2019-06-26 23:10
逐鹿实验室

逐鹿实验室

回复 DCloud_heavensoft :
咱们官方就出一个小程序转uni-app的转换器呗,何必天天让大家跳坑啊
2019-05-01 21:43
DCloud_heavensoft

DCloud_heavensoft

更新:更全面的微信小程序转uni-app指南,参考[https://ask.dcloud.net.cn/article/35786](https://ask.dcloud.net.cn/article/35786)
2019-04-11 03:20
DCloud_heavensoft

DCloud_heavensoft

贡献几个替换用的正则
str = str.replace(/bindtap/g, '@onclick');
str = str.replace(/block/g, 'template');
str = str.replace(/wx:if/g, 'v-show');
str = str.replace(/src=\'\{\{/g, ":src='");
str = str.replace(/wx\:key=\"\*this\"/g, ' ');
str = str.replace(/wx\:key\=\"index\"/g, ' ');
str = str.replace(/wx:for="{{/g, 'v-for= "(item,index) in ');
str = str.replace(/bindinput/g, '@input');
2019-04-05 23:04
wuguangyong

wuguangyong

setData在uni-app 的用法。
2019-03-08 11:56
8***@qq.com

8***@qq.com

马克
2019-02-21 21:27
5***@qq.com

5***@qq.com

回复 颓废市民小高 :
可以分享一下你的转换过程吗,谢谢
2019-02-02 15:02
颓废市民小高

颓废市民小高

。。。正在做这个一周了上线的小程序代码准备转换成5+App,现在卡住了,最主要的就是登录方面 我连数据都获取不到啦- -
2019-02-01 17:41