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

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

浏览量:4239 时间: 来源:我是高手高手高高手

小程序发展这么久不得不说生态做的还是非常不错的,毕竟微信用户量在那放着。
大家都知道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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎