小程序发展这么久不得不说生态做的还是非常不错的,毕竟微信用户量在那放着。
大家都知道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种图表漂亮丰富
引用:http://ask.dcloud.net.cn/article/35020