wepy项目转uniapp项目注意事项

这是本人在转项目的过程中遇到的一些问题，记录一下，方便自己以后查看，也方便大家一起学习，有问题可以评论，大家一起讨论。可能有些不足或者不对之处，欢迎大家指正，一起学习，共同进步！

转换工具：https://github.com/zhangdaren/wepy-to-uniapp

this.$invoke

调用子组件方法

wepy 写法
this.$invoke('popup', 'popupShow');

uni 写法
this.$refs.popupRef.popupShow();

@

在使用例如@tap等等事件时，转换过程中可能出现 :@tap=“xxx” 的情况，需要手动修改为 @tap=“xxx”。
在使用例如@tap等等事件时，转换过程中可能出现 @tap=“‘handleClick(’ + item + ‘)’” 的情况，需要手动去掉多余符号。
有时候变量会变成$1，例如 handleClick(‘+ $1 +’) 需要对比原来wepy文件的变量进行修改替换。

data嵌套

在转vue2的过程中，data可能会出现嵌套的情况，需要手动去掉最里面的data，如:

data(){
    return {
        data: {
            a: "",
            b: "",
        }
    }
}

this.setData

在转vue2的过程中，小程序设置数据的写法this.setData可能没有去除干净，需要筛选过滤一下，uni不支持这种写法，需要改成 this.xxx = xxx

this.$parent

在转vue2的时候，建议使用vuex全局状态管理库，来代替 this.parent的方法如果是父子组件调用，用this.parent的方法如果是父子组件调用，用this.emit 来代替，一般这些方法都是全局的放在app.wpy里面
用vuex全局状态管理库，来代替是比较规范。
wepy 写法

this.$parent.getToken();

uni 写法

this.$store.dispatch('getToken');

v-for

在转的过程中，如果原来wepy书写变量名如果不规范的时候，会出现v-for=“(item, item) in list"的情况，需要手动修改为 v-for=”(item, index) in list"

import

直接从js文件import引入的函数，需要在methods重新定义一遍，不然无法直接使用，会报错（或者换自己舒服的引用方式来）

<view @tap="getToken">
    点击获取token
</view>
import { getToken } from '@/utils/auth';
methods: {
    getToken(...arg) {
        getToken(...arg);
    }
}

小程序组件

自定义小程序组件，需要放在src/wxcomponents中，主包生效，暂不支持分包，非必要用 npm install 方式使用插件

this.data

在转换过程中，会不干净，导致某些变量的取值和赋值变成 this.data.xxx ，需要手动修改为 this.xxx = xxx

onXXX

如果函数方法名用了onShow这种生命周期函数的命名，会导致在转换过程中，被误认为是生命周期函数，需要人工阅读代码是否要移动到methods里面，并且更改命名，
这是不规范的函数方法命名造成的，大家养成良好的开发习惯。

pages.json

在转换过程中，wepy的页面config的在页面里面配置，而uni在pages.json里面配置
wepy 写法

export default class Page extends wepy.page {
  config = {
    navigationBarTitleText: "页面标题",
    enablePullDownRefresh: false,
    navigationStyle: "custom",
  };
}

uni 写法

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh": true,
				"navigationStyle": "custom"
			}
		},
    ]
}

getOpenerEventChannel

wepy 写法

this.$wxpage.getOpenerEventChannel();

uni 写法

this.getOpenerEventChannel();

navigateTo redirectTo

wepy 写法

this.$navigateTo('/pages/index/index',{ a: 1 });

uni 写法

uni.navigateTo({
    url: `/pages/index/index?a=1`
});

events

wepy的events接收的是子组件的方法，转成uni需要用父子组件交互的方式传递和接收

子组件 this.$emit('xxx', { a: 1 })

父组件 <Child @xxx="emitXXX"> methods 里面声明 emitXXX() {}