本文首先分享轉(zhuǎn)換步驟和原理，文末會分享三方開發(fā)者制作的 小程序轉(zhuǎn)uni-app的轉(zhuǎn)換器 和 wepy轉(zhuǎn)uni-app轉(zhuǎn)換器 。

小程序轉(zhuǎn)換uni-app的步驟

微信小程序的語法，其實是vue.js語法的裁剪定制版，在數(shù)據(jù)綁定、自定義組件等很多方面都有相似之處。
以下是一個小程序源碼轉(zhuǎn)換步驟指南：

1. 新建一個uni-app項目，把之前的app.js、app.wxss的代碼，挪到app.vue里，分別放到script和style節(jié)點下面
   如果其中有g(shù)lobalData等全局變量或方法，也直接放到app.vue的script下

Page({  
data: {  
show1: false  
}  
})

現(xiàn)在

Page({  
toggleActionSheet1() {  
this.setData({show1: true});  
}  
})

現(xiàn)在

Page({  
onLoad() {  
console.log("page load");  
}  
})

現(xiàn)在

1. {  
   "pages": [ //pages數(shù)組中第一項表示應用啟動頁，參考：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"  
       }  
   }  
   }

   微信自定義組件雖然可以這樣轉(zhuǎn)換。但轉(zhuǎn)換后只能用于微信和App。如果想用于支付寶百度頭條，則需要新建swancomponents等目錄，將微信自定義組件復制到這些目錄，改造測試。雖然各小程序平臺均支持自定義組件，但細節(jié)有差異，仍需自己測試。無論如何，H5端不支持這些自定義組件。
   比較妥善的跨端做法，是在uni-app插件市場尋找類似功能的vue組件，廢棄之前的小程序自定義組件。比如把wx-charts換成ucharts、把wx-parser換成uparser。

輔助工具

貢獻幾個替換用的正則

str = str.replace(/bindtap/g, '@onclick');  
str = str.replace(/wx:if/g, 'v-show');  
str = str.replace(/src=http://www.wxapp-union.com/'\{\{/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'); 

關(guān)于js api中的wx.，不要全局替換為uni.。因為有的wx的api是微信獨有的，替換為uni后，反而在微信下沒法用了。

同時uni-app編譯器提供了把wx.編譯為不同平臺的機制，所以直接使用wx.的api完全可以正常在各端運行。

所以對于老代碼，替不替換不重要，不影響運行，只影響語法提示和轉(zhuǎn)到定義。

但是新寫的代碼，還是要用uni.的api，在代碼提示、轉(zhuǎn)到定義方面更強大。

如果把微信小程序轉(zhuǎn)換為uni-app，仍然用于發(fā)布微信小程序，那服務器端代碼不變。

但如果要發(fā)布到App、其他小程序等平臺，服務器也需要調(diào)整部分代碼。比如登陸、支付、推送、定位、地圖等聯(lián)網(wǎng)服務。

uni-app在客戶端側(cè)提供了統(tǒng)一的代碼，比如uni.login、uni.requestPayment，在不同端均可以實現(xiàn)登陸、支付。

但服務器端的接口不一樣，比如微信的App支付和小程序支付的申請開通、服務器接口都不一樣，所以配置和服務器接口仍需單獨處理。

比如把小程序轉(zhuǎn)換uni-app后，需要打包發(fā)布為app，則需要向微信申請app支付的資質(zhì)，拿到appkey等信息，填寫到uni-app工程的 manifest-app -> sdk配置 -> 微信支付 下面，然后打包才能成效（如果是離線打包，參考離線打包的文件）。同時服務器需要按照微信的App支付的接口再開發(fā)對接。

同樣微信小程序里內(nèi)置的定位、地圖，在app上，需要單獨向高德等三方服務商申請，否則無法在app里使用這些服務。

這些sdk申請方式在 manifest -> app sdk配置 下有教程鏈接。

其他注意

參考：這里有一個轉(zhuǎn)換示例，把vant weapp的小程序演示demo，轉(zhuǎn)換為uni-app工程，里面的pages下同時保留了wxml和vue，可用于對比參考。http://ext.dcloud.net.cn/plugin?id=302

如果是mpvue的小程序，轉(zhuǎn)換uni-app很方面

export default {    
    globalData: {    
        text: 'text'    
    },    
    onLaunch: function() {    
        console.log('App Launch')    
    }  
}  

<script>  
export default {  
data() {  
    return {  
        show1: false  
    }  
}  
}  
script>

<script>  
export default {  
methods: {  
    toggleActionSheet1() {  
        this.show1 = true  
    }  
}  
}  
script>

<script>  
export default {  
onLoad() {  
    console.log("page load");  
}  
}  
script>