衆所周知，微信小程序的語法和uniapp的語法接近，一個是Vue的近親，一個完全兼容Vue，所以他們相互之間轉換應該也是不難的。
微信小程序的語法，其實是vue.js語法的裁剪定製版，在數據綁定、自定義組件等很多方面都有相似之處。
以下是一個小程序源碼轉換步驟指南：
客戶端代碼轉換
- 新建一個uni-app項目，把之前的app.js、app.wxss的代碼，挪到app.vue裏，分別放到script和style節點下面。
- 轉換app.json爲pages.json，把每個小程序page目錄下的index.json（或頁面名稱對應的json）裏的配置取出來，放到pages.json的style下。
- pages下每個頁面目錄放一個vue空文件模板。
- 把之前頁面的wxss內容複製到vue文件的style中，無需改動。
- 把之前頁面的js內容複製到vue文件的script中，然後執行如下改動
- 之前js裏面的data，放到新的data return下。
之前
Page({
data: {
show1: false
}
})
之後
<script>
export default {
data() {
return {
show1: false
}
}
}
</script>
- 之前js裏面的自定義方法，放到新的method下。
- 之前
Page({
toggleActionSheet1() {
this.setData({show1: true});
}
})
- 現在
<script>
export default {
methods: {
toggleActionSheet1() {
this.show1 = true
}
}
}
</script>
- 之前js裏面的生命週期函數onLoad、onShow等，直接放到export default下。
- 之前
Page({
onLoad() {
console.log("page load");
}
})
- 現在
<script>
export default {
onLoad() {
console.log("page load");
}
}
</script>
- setdata的處理方式
- 方式一：從
this.setData({loading: false,areaList: response.data.data})改爲this.loading = false;this.areaList = response.data.data。 - 方式二：重寫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];
})
});
}
- 把之前頁面的wxml內容複製到vue文件的template下的view下，然後執行如下改動
屬性綁定從 attr="{{ a }}"，改爲 :attr="a"
title="複選框{{ item }}" 改爲 :title="'複選框' + item"
事件綁定從 bind:click="toggleActionSheet1" 改爲 @click="toggleActionSheet1"
阻止事件冒泡 從 catch:tap="xx" 改爲 @tap.native.stop="xx"
wx:if 改爲 v-if
wx:for="{{ list }}" wx:key="{{ index }}" 改爲`v-for="(item,index) in list"
- 微信小程序自定義組件處理
之前引入的自定義組件，需要放到wxcomponents下，並在pages.json裏註冊。如果這裏有js，並且被其他代碼引入，要注意修改引用代碼的路徑指向。如下：
{
"pages": [ //pages數組中第一項表示應用啓動頁，參考：https://uniapp.dcloud.io/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"
}
}
}
輔助工具
str = str.replace(/bindtap/g, '@onclick');
str = str.replace(/wx:if/g, 'v-show');
str = str.replace(/src=\'\{\{/g, ":src='");
str = str.replace(/wx\:key=\"\*this\"/g, ' ');
str = str.replace(/wx\:key\=\"index\"/g, ' ');
str = str.replace(/wx:for="{{/g, v-for= "(item,index) in ');
str = str.replace(/bindinput/g, '@input');
wx.是否要替換爲uni.？
關於js api中的wx.，不要全局替換爲uni.。因爲有的wx的api是微信獨有的，替換爲uni後，反而在微信下沒法用了。
同時uni-app編譯器提供了把wx.編譯爲不同平臺的機制，所以直接使用wx.的api完全可以正常在各端運行。
所以對於老代碼，替不替換不重要，不影響運行，隻影響語法提示和轉到定義。
但是新寫的代碼，還是要用uni.的api，在代碼提示、轉到定義方面更強大。
服務相關代碼轉換
登陸、支付、推送、定位、地圖等服務都是聯網服務，它們不止是客戶端代碼轉換就可以直接運行的。涉及服務器接口和配置兩方面的工作。
uni-app在客戶端側提供了統一的代碼，比如uni.login、uni.requestPayment，在不同端均可以實現登陸、支付。
但服務器端的接口不一樣，比如微信的App支付和小程序支付的申請開通、服務器接口都不一樣，所以配置和服務器接口仍需單獨處理。
比如把小程序轉換uni-app後，需要打包發佈爲app，則需要向微信申請app支付的資質，拿到appkey等信息，填寫到uni-app工程的 manifest-app -> sdk配置 -> 微信支付 下面，然後打包才能成效（如果是離線打包，參考離線打包的文件）。同時服務器需要按照微信的App支付的接口再開發對接。
同樣微信小程序裏內置的定位、地圖，在app上，需要單獨向高德等三方服務商申請，否則無法在app裏使用這些服務。
這些sdk申請方式在 manifest -> app sdk配置 下有教程鏈接。
其他注意
文章來源： https://yq.aliyun.com/articles/703548