小程序发展这么久不得不说生态做的还是非常不错的,毕竟微信用户量在那放着。
大家都知道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种图表漂亮丰富
25 个评论
该文章目前已经被锁定, 无法添加新评论
四宝花生酱
zhangdaren
9***@qq.com
逐鹿实验室
DCloud_heavensoft
DCloud_heavensoft
wuguangyong
8***@qq.com
5***@qq.com
颓废市民小高