微信小程式轉換uni-app詳細指南

小程式轉換uni-app的步驟

微信小程式的文法，其實是vue.js文法的裁剪定制版，在資料綁定、自定義元件等很多方面都有相似之處。

以下是一個小程式源碼轉換步驟指南：

用戶端代碼轉換

1. 建立一個uni-app項目，把之前的app.js、app.wxss的代碼，挪到app.vue裡，分别放到script和style節點下面
2. 轉換app.json為pages.json，把每個小程式page目錄下的index.json（或頁面名稱對應的json）裡的配置取出來，放到pages.json的style下
3. pages下每個頁面目錄放一個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() {
        this.setData({show1: true});
    }
})           

<script>
    export default {
        methods: {
            toggleActionSheet1() {
                this.show1 = 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的處理方式
* 方式一：從 `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];  
         })  
    });  
}             

以上代碼出處：

https://ask.dcloud.net.cn/article/35020

1. 把之前頁面的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"

2. 微信小程式自定義元件處理

   之前引入的自定義元件，需要放到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配置 下有教程連結。

其他注意

參考：這裡有一個轉換示例，把vant weapp的小程式示範demo，轉換為uni-app工程，裡面的pages下同時保留了wxml和vue，可用于對比參考。

http://ext.dcloud.net.cn/plugin?id=302

HBuilderX 1.8.8版本對小程式自定義元件的相容性更高，請在社群首頁右側下載下傳HBuilderX alpha版的最新版。

最後，其實寫的這麼細，已經是一個小程式轉uni-app轉換器的實作步驟了。歡迎有興趣的同學開發轉換器:)