杨大宝
杨大宝
  • 发布:2018-09-13 10:31
  • 更新:2019-06-26 23:10
  • 阅读:11201

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

11 关注 分享
Trust Neil_HL 钟文 周华飞 DCloud_heavensoft Geeker 3022790047@qq.com wt2014lj@163.com Onlyshy 秋天无风 306816224@qq.com

要回复文章请先登录注册

907648506@qq.com

907648506@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
Onlyshy

Onlyshy

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

86300845@qq.com

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

594049467@qq.com

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

颓废市民小高

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

颓废市民小高

回复 道法O自然:
同,解决了吗
2019-01-29 15:17
颓废市民小高

颓废市民小高

wx.getLocation 怎么解决
2019-01-29 13:52
颓废市民小高

颓废市民小高

uni.openSetting is not a function 不支持5+APP有啥方案解决吗,官方文档没看到
2019-01-29 11:42
颓废市民小高

颓废市民小高

回复 DCloud_heavensoft:
plus.runtime. 是啥呀 还要小程序可以在一个view上写2个wx:if 这个好像只支持一个v-if this.setData咋解决是添加在main.js 里面 Vue.prototype.setData = setData(); 为什么提示keys null
2019-01-28 15:57
DCloud_heavensoft

DCloud_heavensoft

回复 颓废市民小高:
http://ask.dcloud.net.cn/article/34972
2019-01-28 13:03
颓废市民小高

颓废市民小高

回复 DCloud_heavensoft:
那uni-app控制app版本要不要更新咋写
2019-01-28 09:42
DCloud_heavensoft

DCloud_heavensoft

回复 颓废市民小高:
这个是微信专用方法,不跨端,所以uni里没有,这种仍然是wx.getUpdateManager
2019-01-26 17:55
颓废市民小高

颓废市民小高

errorHandler TypeError: uni.getUpdateManager is not a function
提示没有uni.getUpdateManager 这个方法咋解决
2019-01-26 17:22
道法O自然

道法O自然

that.$set 找不到此函数。
2019-01-15 12:38
bos

bos

小程序的app(),getApp()怎么转到uni?
2018-12-26 18:10
jaweio@qq.com

jaweio@qq.com

回复 redonion42@163.com:
同期待,+1 ; )
2018-12-17 18:12
redonion42@163.com

redonion42@163.com

回复 DCloud_heavensoft:
什么时候官方有将小程序转uni-app的功能?
2018-12-14 15:18
DCloud_heavensoft

DCloud_heavensoft

补充:
1. mpvue可直接转换,参考https://ask.dcloud.net.cn/article/34945
2. wx的api,在app侧使用时,不换成uni也可以使用,因为我们的app引擎其实就是一个强化版的小程序引擎。但wx的api,再跨端到h5、百度支付宝等时就不能用了。
2018-12-12 15:49
DCloud_heavensoft

DCloud_heavensoft

5、搜索 wx. 替换为 uni.。这个注意:uni是wx和app的交集,有些wx的api在uni里没有。为了减少转换问题,这里可以不替换,我们在app侧其实也兼容了wx的api
2018-09-14 14:59
周华飞

周华飞

先收藏再说。准备用uni-app写小程序试试水。
2018-09-13 14:06