這是一篇使用開源小工具miniprogram-to-uniapp 的使用心得記錄诵闭，因?yàn)楣ぷ餍枰跖约簢L試過手動搬頁面誉券，但覺得重復(fù)性搬運(yùn)實(shí)在繁瑣朦蕴，而且耗費(fèi)時(shí)間篮条，所以在網(wǎng)上找了找有沒有現(xiàn)成的工具，終于看見這么個(gè)小工具吩抓，感謝開源的作者涉茧。
轉(zhuǎn)換工具文檔：miniprogram-to-uniapp使用指南
源碼粗略分析
主要命令： 【wtu -i "你的小程序項(xiàng)目路徑" -o "輸出目錄，可不填"】
wtu這個(gè)命令是作者通過node的commander來實(shí)現(xiàn)了自己的全局命令怀读，輸入命令后執(zhí)行了transform這個(gè)函數(shù)泥技。
核心代碼如下：
async function transform(sourceFolder, targetFolder) {
fileData = {};
routerData = {};
imagesFolderArr = [];
let miniprogramRoot = sourceFolder;
if (!targetFolder) targetFolder = sourceFolder + "_uni";
//讀取小程序項(xiàng)目配置
const configData = wxProjectParse(miniprogramRoot, sourceFolder);
//小程序項(xiàng)目目錄混弥，不一定就等于輸入目錄，有無云開發(fā)的目錄結(jié)構(gòu)是不相同的钳垮。
miniprogramRoot = configData.miniprogramRoot;
//定義全局變量，之前傳來傳去的额港，過于麻煩
global.miniprogramRoot = miniprogramRoot;
global.sourceFolder = sourceFolder;
global.targetFolder = targetFolder;
global.globalUsingComponents = {}; //后面添加的全局組件
global.props = {}; //存儲wxml組件頁面里面饺窿，需要對外開放的參數(shù)(本想不做全局的，然而傳參出現(xiàn)問題移斩，還是全局一把梭)
global.wxsInfo = {}; //存儲頁面里的wxs信息肚医，數(shù)據(jù)格式如上所示
if (fs.existsSync(targetFolder)) {
//清空output目錄
fs.emptyDirSync(targetFolder);
} else {
//不存在就創(chuàng)建
fs.mkdirSync(targetFolder);
}
traverseFolder(miniprogramRoot, miniprogramRoot, targetFolder, () => {
//處理文件組
filesHandle(fileData, miniprogramRoot).then(() => {
//處理配置文件
configHandle(configData, routerData, miniprogramRoot, targetFolder);
//輸出提示
setTimeout(()=>{
log('注意：當(dāng)看到"image漏網(wǎng)之魚"绢馍，意味著您需要手動調(diào)整對應(yīng)代碼，表示image標(biāo)簽的src屬性是含變量或表達(dá)式肠套，工具還無法做到100%轉(zhuǎn)換舰涌，需要手動修改為相對/static目錄的路徑\r\n'+
'另外，代碼<template is="abc" data=""/>里data參數(shù)僅支持鍵值對{key:value}的形式你稚，望知悉瓷耙！')
}, 700);
});
});
}
這個(gè)函數(shù)主要的作用如下：
- 讀取需要轉(zhuǎn)換的文件路徑，如果沒有指定輸出目錄刁赖，就在同級目錄下新建一個(gè)以_uni為后綴的文件夾
- 讀取小程序項(xiàng)目配置哺徊，也就是project.config.json，package.json
- 遍歷目錄:（遇到文件夾則繼續(xù)向下遍歷）
- images或者image文件夾復(fù)制到static目錄里乾闰，(workers目錄也復(fù)制到static目錄中落追，不過不是很清楚workers目錄是用來干什么的)
- 處理js，wxml涯肩，wxss轿钠，json這四種文件，并暫存到fileData對象中病苗，這個(gè)對象包括js疗垛，wxml，wxss,folder硫朦，json贷腕，fileName，isAppFile作為key值咬展，
- 如果是.wxs文件泽裳，需要先使用js解析器JavascriptParser轉(zhuǎn)換一下，
- 如果是屬于圖片類的文件破婆，判斷當(dāng)前文件的上層目錄涮总，如果存在同級文件屬于js，wxml祷舀，wxss中的一種瀑梗，就直接復(fù)制到static目錄里；否則連同上一級目錄復(fù)制到static目錄里（這種情況處理的是比如取名為img文件夾裳扯，會被整個(gè)copy到static目錄下資源整合）
- 其他情況下直接copy整個(gè)文件抛丽，例如README文件，會直接復(fù)制到根目錄下
- 處理文件組饰豺，即上面traverseFolder函數(shù)返回的fileData對象亿鲜，（js、wxml哟忍、wxss）狡门，使用該對象中的fileName組裝vue文件名
- isAppFile判斷是否是app.js陷寝，單獨(dú)命名為App.vue,
- 解析json,判斷有沒有引用自定義組件
- 配置routerData對象，存儲這個(gè)page的路由樣式等信息其馏，（注意凤跑，小程序每個(gè)page文件里的配置在uni-app里面都配置到了pages.json里，這樣跳轉(zhuǎn)小程序還是會報(bào)錯叛复，我之前使用uni-app時(shí)把"navigateToMiniProgramAppIdList"配置寫在app.json里同樣不生效,開發(fā)過程中需要在manifest.json文件對應(yīng)的mp-weixin下配置）
- wxml文件處理仔引，以及wxml里面的wxs信息需要提取并轉(zhuǎn)換，涉及到詞法分析（這個(gè)還沒有進(jìn)一步學(xué)習(xí)過褐奥，具體以后有時(shí)間可以研究研究）
- js文件處理咖耘，
- wxss文件處理，圖片路徑區(qū)分（本地資源撬码、網(wǎng)絡(luò)資源）
- 寫入文件儿倒，上面步驟返回的最后都是字符串
- 處理配置文件，app.json（還需要檢測里面有沒有全局組件）
- 將pages節(jié)點(diǎn)里的數(shù)據(jù)呜笑，提取routerData對應(yīng)的標(biāo)題夫否，寫入到pages節(jié)點(diǎn)里
- 加上tabBar節(jié)點(diǎn)
- 寫入pages.json
- 寫入template/manifest.json，（這是uni-app特有的配置）叫胁，通過之前存儲的configData寫入manifest.json模版中（工具中先定義好模版）
- 全局引入自定義組件
- 寫入main.js
到這個(gè)地方凰慈，這個(gè)開源小工具也就完成了它的功能，但轉(zhuǎn)換后還有不少bug是需要自己手動調(diào)試發(fā)現(xiàn)的驼鹅。
需要手動調(diào)試部分（自己測驗(yàn)到的問題）
配置eslint文件并修復(fù)報(bào)錯信息微谓，使用HBuilderX運(yùn)行，根據(jù)報(bào)錯信息修正
- wx:for轉(zhuǎn)v-for遺留的問題输钩，wx:for="{{ list }}"改為`v-for="(item,index) in list"
- 文件路徑問題(組件豺型、資源文件)，全局替換
- 動態(tài)class問題
- 小程序的方法和vue中的methods
- 事件綁定的方式
- 小程序使用setData設(shè)置數(shù)據(jù)张足，跟vue中的數(shù)據(jù)單向流不一樣触创，需要注意一下,這個(gè)工具對setData進(jìn)行了重寫坎藐，所以使用setData不會報(bào)錯为牍，但在onLoad中使用會提示錯誤
- globalData，這個(gè)工具里已經(jīng)轉(zhuǎn)化過了岩馍，只是額外提一下這個(gè)坑碉咆，在uni-app的app.vue文件中不可以直接使用this.globalData，會報(bào)錯找不到蛀恩，而應(yīng)該使用this.$options.globalData
- image疫铜、input標(biāo)簽需要手動轉(zhuǎn)換成<img />和<input />
- 自定義組件使用的時(shí)候如果是駝峰式命名，由于js里面的駝峰式被轉(zhuǎn)成了小寫（不知道是不是bug或者遺漏的地方）,所以在使用該組件時(shí)會看不到內(nèi)容双谆，把名稱替換一下就好了
- 小程序中有部分bind:綁定的方法壳咕，需要手動換成@
- 例如bindinput席揽，bindblur等事件，需要手動改為@的形式
- 有關(guān)
wx.的API谓厘，哪些需要替換成uni.還需要仔細(xì)核查一遍幌羞，因?yàn)橛械膚x的api是微信獨(dú)有的，替換為uni后竟稳，反而在微信下沒法用了属桦。如果后續(xù)要轉(zhuǎn)為h5，需要自己調(diào)研是否須平臺編譯 - 登陸他爸、支付聂宾、推送、定位诊笤、地圖等相關(guān)功能系谐，需要視平臺而定，可能需要單獨(dú)處理
- 原有的編譯模式condition被放到了project.config.json文件中讨跟，運(yùn)行不生效蔚鸥，需要放到pages.json文件中
- "navigateToMiniProgramAppIdList"配置寫在app.json里不生效,開發(fā)過程中需要在manifest.json文件對應(yīng)的mp-weixin下配置，這里屬于微信小程序特有配置
順便推薦一篇小程序轉(zhuǎn)uni-app的指南：
微信小程序轉(zhuǎn)換uni-app詳細(xì)指南许赃、小程序轉(zhuǎn)uni-app轉(zhuǎn)換器止喷、wepy轉(zhuǎn)uni-app
