這是一篇使用開源小工具miniprogram-to-uniapp 的使用心得記錄，因?yàn)楣ぷ餍枰?，自己嘗試過手動搬頁面，但覺得重復(fù)性搬運(yùn)實(shí)在繁瑣，而且耗費(fèi)時間，所以在網(wǎng)上找了找有沒有現(xiàn)成的工具，終于看見這么個小工具，感謝開源的作者。

轉(zhuǎn)換工具文檔：miniprogram-to-uniapp使用指南

推薦一下源碼：https://github.com/zhangdaren/miniprogram-to-uniapp

源碼粗略分析

主要命令： 【wtu -i "你的小程序項(xiàng)目路徑" -o "輸出目錄，可不填"】

wtu這個命令是作者通過node的commander來實(shí)現(xiàn)了自己的全局命令，輸入命令后執(zhí)行了transform這個函數(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);
        });
    });

}

這個函數(shù)主要的作用如下：

1. 讀取需要轉(zhuǎn)換的文件路徑，如果沒有指定輸出目錄，就在同級目錄下新建一個以_uni為后綴的文件夾
2. 讀取小程序項(xiàng)目配置，也就是project.config.json，package.json
3. 遍歷目錄:（遇到文件夾則繼續(xù)向下遍歷）
   • images或者image文件夾復(fù)制到static目錄里，(workers目錄也復(fù)制到static目錄中，不過不是很清楚workers目錄是用來干什么的)
   • 處理js，wxml，wxss，json這四種文件，并暫存到fileData對象中，這個對象包括js，wxml，wxss,folder，json，fileName，isAppFile作為key值，
   • 如果是.wxs文件，需要先使用js解析器JavascriptParser轉(zhuǎn)換一下，
   • 如果是屬于圖片類的文件，判斷當(dāng)前文件的上層目錄，如果存在同級文件屬于js，wxml，wxss中的一種，就直接復(fù)制到static目錄里；否則連同上一級目錄復(fù)制到static目錄里（這種情況處理的是比如取名為img文件夾，會被整個copy到static目錄下資源整合）
   • 其他情況下直接copy整個文件，例如README文件，會直接復(fù)制到根目錄下
4. 處理文件組，即上面traverseFolder函數(shù)返回的fileData對象，（js、wxml、wxss），使用該對象中的fileName組裝vue文件名
   • isAppFile判斷是否是app.js，單獨(dú)命名為App.vue,
   • 解析json,判斷有沒有引用自定義組件
   • 配置routerData對象，存儲這個page的路由樣式等信息，（注意，小程序每個page文件里的配置在uni-app里面都配置到了pages.json里，這樣跳轉(zhuǎn)小程序還是會報錯，我之前使用uni-app時把"navigateToMiniProgramAppIdList"配置寫在app.json里同樣不生效,開發(fā)過程中需要在manifest.json文件對應(yīng)的mp-weixin下配置）
   • wxml文件處理，以及wxml里面的wxs信息需要提取并轉(zhuǎn)換，涉及到詞法分析（這個還沒有進(jìn)一步學(xué)習(xí)過，具體以后有時間可以研究研究）
   • js文件處理，
   • wxss文件處理，圖片路徑區(qū)分（本地資源、網(wǎng)絡(luò)資源）
   • 寫入文件，上面步驟返回的最后都是字符串
5. 處理配置文件，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

到這個地方，這個開源小工具也就完成了它的功能，但轉(zhuǎn)換后還有不少bug是需要自己手動調(diào)試發(fā)現(xiàn)的。

需要手動調(diào)試部分（自己測驗(yàn)到的問題）

配置eslint文件并修復(fù)報錯信息，使用HBuilderX運(yùn)行，根據(jù)報錯信息修正

• 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ù)單向流不一樣，需要注意一下,這個工具對setData進(jìn)行了重寫，所以使用setData不會報錯，但在onLoad中使用會提示錯誤
• globalData，這個工具里已經(jīng)轉(zhuǎn)化過了，只是額外提一下這個坑，在uni-app的app.vue文件中不可以直接使用this.globalData，會報錯找不到，而應(yīng)該使用this.$options.globalData
• image、input標(biāo)簽需要手動轉(zhuǎn)換成<img />和<input />
• 自定義組件使用的時候如果是駝峰式命名，由于js里面的駝峰式被轉(zhuǎn)成了小寫（不知道是不是bug或者遺漏的地方）,所以在使用該組件時會看不到內(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