微信小程序的语法，其实是语法的裁剪定制版，在数据绑定、自定义组件等很多方面都有相似之处。
微信小程序怎么转uniapp？
方法一：miniprogram-to-uniapp 插件
推荐使用HBuilderX插件miniprogram-to-uniapp v2 - DCloud 插件市场，直接转换小程序到uni-app
需要注意的是：这个插件依赖于uniapp的编辑工具Hbuilder，也就是使用这个插件需要先安装Hbuilder
1.启动Hbuilder，点击插件右侧 “使用HBuilderX 导入插件”，等待Hbuilder安装成功的提示
2.在Hbuilder导入微信小程序
3.在对应的小程序项目上点击右键，选择菜单：miniprogram to uniapp v2，会自动出现转换进度，完成了提示转换后的uniapp目录保存在了一个新目录下，重新按新项目导入即可。
但是转换后的小程序总是莫名出现一些bug，以下就是整理的遇到的常见错误：（通常在文件内搜索关键词进行定位即可）
1.wxParse插件更改导致
const undefined;
2.键值中增加了空格，会导致页面页面元素值显示不出来
data[" name"].values
数组转换不完全
部分 无法正常转换为 this. 格式，建议手动查询一遍
转换不完全
'/images/ -> '/static/images/
"/images/ -> "/static/images/
5.表单默认内容显示true
placeholder=" "
方法二：客户端代码手动转换
1.新建一个uni-app项目，把之前的、的代码，挪到里，分别放到script和style节点下面
如果其中有globalData等全局变量或方法，也直接放到的script下：
-
export default {
-
globalData: {
-
text: 'text'
-
},
-
onLaunch: function() {
-
console.log('App Launch')
-
}
-
}
读取globalData或赋值的方法是getApp(). = 'test'
2.转换为，把每个小程序page目录下的（或页面名称对应的json）里的配置取出来，放到的style下
下每个页面目录放一个vue空文件模板
4.把之前页面的wxss内容复制到vue文件的style中，无需改动
5.把之前页面的js内容复制到vue文件的script中，然后执行如下改动
5.1 之前js里面的data，放到新的data return下
-
//之前
-
Page({
-
data: {
-
show1: false
-
}
-
})
-
-
//现在
-
<script>
-
export default {
-
data() {
-
return {
-
show1: false
-
}
-
}
-
}
-
</script>
5.2 之前js里面的自定义方法，放到新的method下
-
之前
-
Page({
-
toggleActionSheet1() {
-
({show1: true});
-
}
-
})
-
-
现在
-
<script>
-
export default {
-
methods: {
-
toggleActionSheet1() {
-
1 = true
-
}
-
}
-
}
-
</script>
5.3 之前js里面的生命周期函数onLoad、onShow等，直接放到export default下
之前
-
Page({
-
onLoad() {
-
console.log("page load");
-
}
-
})
现在
-
<script>
-
export default {
-
onLoad() {
-
console.log("page load");
-
}
-
}
-
</script>
5.4 setdata的处理方式
方式一：从 ({loading: false,areaList: }) 改为 = false; = 。
方式二：重写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;
-
(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.把之前页面的wxml内容复制到vue文件的template下的view下，然后执行如下改动
- 属性绑定从
attr="{{ a }}"，改为 :attr="a"
title="复选框{{ item }}" 改为 :title="'复选框' + item" - 事件绑定从 bind:click="toggleActionSheet1" 改为 @click="toggleActionSheet1"
- 阻止事件冒泡 从 catch:tap="xx" 改为 @="xx"
-
wx:if改为v-if - wx:for="{{ list }}" wx:key="{{ index }}" 改为`v-for="(item,index) in list"
7.微信小程序自定义组件处理
之前引入的自定义组件，需要放到wxcomponents下，并在里注册。如果这里有js，并且被其他代码引入，要注意修改引用代码的路径指向。如下：
-
{
-
"pages": [ //pages数组中第一项表示应用启动页，参考：https:///collocation/pages
-
{"path": "pages/dashboard/dashboard"},
-
{
-
"path": "pages/action-sheet/action-sheet",
-
"style":{
-
"navigationBarTitleText":"ActionSheet 上拉菜单",
-
"usingComponents":{ //这里单页面引入action-sheet组件
-
"van-action-sheet": "/wxcomponents/vant/action-sheet/index"
-
}
-
}
-
}
-
],
-
"globalStyle": {
-
"navigationBarTitleText": "Vant For Uni-app",
-
"usingComponents": { //这里给所有页面全局引入了如下组件
-
"demo-block": "/wxcomponents/vant/demo-block/index",
-
"van-button": "/wxcomponents/vant/button/index",
-
"van-cell": "/wxcomponents/vant/cell/index",
-
"van-cell-group": "/wxcomponents/vant/cell-group/index",
-
"van-icon": "/wxcomponents/vant/icon/index",
-
"van-loading": "/wxcomponents/vant/loading/index",
-
"van-toast": "/wxcomponents/vant/toast/index"
-
}
-
}
-
}
微信自定义组件虽然可以这样转换。但转换后只能用于微信和App。如果想用于支付宝百度头条，则需要新建swancomponents等目录，将微信自定义组件复制到这些目录，改造测试。虽然各小程序平台均支持自定义组件，但细节有差异，仍需自己测试。无论如何，H5端不支持这些自定义组件。
比较妥善的跨端做法，是在uni-app插件市场寻找类似功能的vue组件，废弃之前的小程序自定义组件。