小程序分類：uni-app
qq小程序 支付寶小程序 百度小程序 釘釘小程序 微信小程序 小程序轉(zhuǎn)成uni_app 小程序轉(zhuǎn)為uni_app 小程序轉(zhuǎn)uni_app 小程序轉(zhuǎn)換
工具現(xiàn)在支持npm全局庫(kù)、HBuilderX插件兩種方式使用，任君選擇，HBuilderX插件地址：https://ext.dcloud.net.cn/plugin?id=2656

一、它是誰(shuí)？

【miniprogram-to-uniapp】轉(zhuǎn)換微信小程序”項(xiàng)目為uni-app項(xiàng)目（新版本工具已經(jīng)支持各種小程序轉(zhuǎn)換）。

二、它的原理是什么？

最初是學(xué)了半節(jié)課堆和棧，覺得詞法分析挺有意思的，再加上轉(zhuǎn)換小程序插件時(shí)，發(fā)現(xiàn)這些繁瑣的操作完全可以使用程序來(lái)完成。
核心是使用Babel獲取AST（詞法分析)，然后或使用Babel自帶函數(shù)增刪，或正則分析替換等等操作。
可能有的朋友覺得，這種為啥不是純正則分析？ 純正則可以解決一部分問題，對(duì)于標(biāo)簽與標(biāo)簽內(nèi)容，其實(shí)正則是很難進(jìn)行區(qū)分的哈。

三、它能做哪些事情？

支持微信、QQ、頭條/抖音、支付寶/釘釘和百度等小程序轉(zhuǎn)換到 uni-app 項(xiàng)目
支持有/無(wú)云開發(fā)的小程序項(xiàng)目轉(zhuǎn)換為 uni-app 項(xiàng)目(cloudfunctions 目錄將被忽略，uni-app 結(jié)合小程序云開發(fā)見：使用 uni-app 進(jìn)行微信小程序云開發(fā)經(jīng)驗(yàn)分享)
支持解析 TypeScript 小程序項(xiàng)目
支持解析使用 npm 模塊的小程序項(xiàng)目
支持解析 include 標(biāo)簽
支持解析 template 標(biāo)簽
支持解析 Behavior 文件為 mixins 文件
支持.js’, .wxml 和*.wxss 文件進(jìn)行相應(yīng)轉(zhuǎn)換，并做了大量的優(yōu)化
支持識(shí)別 App、Page、Component、VantComponent、Behavior 和純 Javascript 文件的轉(zhuǎn)換
修復(fù)變量名與函數(shù)重名的情況
合并使用 require 導(dǎo)入的 wxs 文件
setData() polyfill
搜索未在 data 聲明，而直接在 setData()里使用的變量，并修復(fù)
使用jyf-parser替換 wxParse(感謝網(wǎng)友 “愛瑞巴勒康忙北鼻” 的建議)
因 uni-app 會(huì)將所有非 static 目錄的資源文件刪除，因此將所有資源文件移入 static 目錄，并修復(fù)所有能修復(fù)到的路徑(目前 uni 編譯時(shí)會(huì)將非 static 目錄的文件復(fù)制一份到 static 目錄，但并不完全，因此本功能仍保留)

四、它還有哪些不支持轉(zhuǎn)換？

不支持轉(zhuǎn)換反編譯后的小程序項(xiàng)目
不支持轉(zhuǎn)換使用 uni-app 編譯的小程序項(xiàng)目
不支持轉(zhuǎn)換使用 redux 開發(fā)的小程序(代表為：網(wǎng)易云信小程序 DEMO)
不支持轉(zhuǎn)換使用 wxpage 開發(fā)的小程序(https://github.com/tvfe/wxpage)
不支持轉(zhuǎn)換使用騰訊 omi 開發(fā)的小程序(https://github.com/Tencent/omi)
不支持轉(zhuǎn)換小程序抽象節(jié)點(diǎn) componentGenerics
不支持 component 里的 pageLifetimes 生命周期，請(qǐng)手動(dòng)繞過
不支持使用 js 系統(tǒng)關(guān)鍵字作為函數(shù)或變量名(如 default、import、return、switch 等)
不支持以$開頭的變量名稱，如 Page({data:{$data:{name:“hello”}}}) ，剛好$data 是 vue 內(nèi)置變量，so 不支持，需手動(dòng)修復(fù)
不支持以動(dòng)態(tài)綁定的函數(shù)<input @input=“test{{index+1}}”>，需手動(dòng)修復(fù)
更多，請(qǐng)參照miniprogram to uniapp 工具答疑

五、怎么使用？

第一步

在命令行里，運(yùn)行【 npm install miniprogram-to-uniapp -g 】進(jìn)行安裝，因?yàn)檫@個(gè)包是工具，要求全局都能使用，所以需要-g進(jìn)行全局安裝。

 npm install miniprogram-to-uniapp -g 

如果運(yùn)行npm報(bào)錯(cuò)，請(qǐng)先安裝Node.js，下載地址：https://nodejs.org/zh-cn/

第二步

繼續(xù)在命令行里，運(yùn)行【 wtu -V 】，執(zhí)行結(jié)果如下：

 wtu -V

顯示版本號(hào)，說(shuō)明已經(jīng)安裝成功了。（wtu -> 取自wx to uni之意，后面都用這個(gè)全局命令）

第三步

在命令行里，輸入【wtu -i “你的小程序項(xiàng)目路徑”】
注意 -i 前面和后面都有空格！！！
注意 -i 前面和后面都有空格！！！
注意 -i 前面和后面都有空格！！！
如：【wtu -i “E:\zpWork\Project_self\miniprogram-to-uniapp\test\test-wx-to-uni”】 ，回車后即可以在源項(xiàng)目同及目錄得到一個(gè)后綴為_uni的目錄，即轉(zhuǎn)換成功。

wtu -i "E:\zpWork\Project_self\miniprogram-to-uniapp\test\test-wx-to-uni"

轉(zhuǎn)換前：

轉(zhuǎn)換后：

轉(zhuǎn)換后的項(xiàng)目文件對(duì)比（左邊是小程序項(xiàng)目，右邊是Uni-app項(xiàng)目目錄）：

第四步

將轉(zhuǎn)換后的xxx_uni項(xiàng)目導(dǎo)入到hbuilder X，
點(diǎn)擊菜單 運(yùn)行–> 運(yùn)行到小程序模擬器–>微信開發(fā)者工具！（如果是使用了vant的項(xiàng)目，請(qǐng)運(yùn)行到H5，vant項(xiàng)目轉(zhuǎn)換后僅支持H5和app）
點(diǎn)擊菜單 運(yùn)行–> 運(yùn)行到小程序模擬器–>微信開發(fā)者工具！（如果是使用了vant的項(xiàng)目，請(qǐng)運(yùn)行到H5，vant項(xiàng)目轉(zhuǎn)換后僅支持H5和app）
點(diǎn)擊菜單 運(yùn)行–> 運(yùn)行到小程序模擬器–>微信開發(fā)者工具！（如果是使用了vant的項(xiàng)目，請(qǐng)運(yùn)行到H5，vant項(xiàng)目轉(zhuǎn)換后僅支持H5和app）
重要的話說(shuō)三遍！
然后查看轉(zhuǎn)換后的項(xiàng)目運(yùn)行到小程序，是否可以正常運(yùn)行無(wú)報(bào)錯(cuò)！
(因?yàn)檫@種轉(zhuǎn)換非100%，所以至少需要保證 小程序–>uniapp–>小程序仍然能正常運(yùn)行，再考慮運(yùn)行到其他小程序或app)，
如有報(bào)錯(cuò)，請(qǐng)根據(jù)miniprogram to uniapp 工具答疑 進(jìn)行修改，保證無(wú)報(bào)錯(cuò)，然后再運(yùn)行到其他平臺(tái)。

轉(zhuǎn)換工具下載地址：
https://download.csdn.net/download/weixin_43025151/87642314