微信小程式轉換uniapp的遷移步驟以及遇到的問題總結

2022-07-21 14:01:49

前言

背景：由於歷史原因，公司有個歷史專案使用vue開發的公眾號H5，原生開發的微信小程式。兩端功能的完全一樣，但是需要維護兩個專案，最近客戶提了需求需要修改部分功能，博主接到需求後，覺得維護兩套程式碼不僅是重複開發，測試起來也麻煩，因為之前是兩個人開發不同端的緣故，導致大部分的bug都是因為兩端不一致產生的。為了節省時間和維護成本，提升開發測試效率，在反覆對比調研，最終選擇了uniapp技術框架融合兩端進行重構。博主目前正在使用uniapp開發H5和小程式，這篇文章是和大家分享並記錄一下原生小程式在遷移到uniapp的步驟和時遇到的問題。

一、遷移步驟

把微信小程式轉成uni-app，這裡推薦一款【miniprogram-to-uniapp】小程式轉換工具外掛

第一步：安裝miniprogram-to-uniapp 外掛

在命令列裡，執行【 npm install miniprogram-to-uniapp -g 】進行安裝，因為這個包是工具，要求全域性都能使用，所以需要-g進行全域性安裝。
如果執行npm報錯，請先安裝Node.js，下載地址：https://nodejs.org/zh-cn/

npm install miniprogram-to-uniapp -g

第二步：檢視是否安裝成功

繼續在命令列裡，執行【 wtu -V 】，執行結果如下

顯示版本號，說明已經安裝成功了

第三步：使用外掛進行轉換

在命令列裡，輸入【wtu -i "你的小程式專案路徑"】

注意 -i 前面和後面都有空格！！！

如：【wtu -i "E:zpWorkProject_selfminiprogram-to-uniapptesttest-wx-to-uni"】，回車後即可以在源專案同及目錄得到一個字尾為_uni的目錄，即轉換成功。

轉換前

轉換後

轉換後的專案檔案對比（左邊是小程式專案，右邊是Uni-app專案目錄）：

第四步：使用hbuilder X執行轉換後的專案並在微信小程式編輯器檢視

將轉換後的xxx_uni專案匯入到hbuilder X，
點選選單執行--> 執行到小程式模擬器-->微信開發者工具！（如果是使用了vant的專案，請執行到H5，vant專案轉換後僅支援H5和app）
然後檢視轉換後的專案執行到小程式，是否可以正常執行無報錯！

第五步：偵錯修改

執行專案，在小程式開發者工具偵錯遷移頁面的報錯資訊

二、處理遷移問題

根據下方遷移內容，逐一更新頁面方法，修復頁面報錯資訊，頁面顯示、功能執行正常即遷移完成。

js部分

1，刪除 const app = getApp();

2，以 wx. 開頭的方法更新為 uni. 開頭

3，資料繫結 this.setData({ a : 1 }) 更新為 this.a = 1

4，路由跳轉 wx.navigateTo() 更新為uni.navigateTo()

5，onLoad（options）

通過options或this.$Route.query獲取頁面傳遞引數

6、部分頁面生命週期釋義，詳見頁面生命週期

onPullDownRefresh：監聽使用者下拉動作，一般用於下拉重新整理
onReachBottom：頁面捲動到底部的事件（不是scroll-view滾到底），常用於下拉下一頁資料
onShareAppMessage：使用者點選右上角分享
onPageScroll：監聽頁面捲動

templete

以下幾條不影響使用，改不改都行

<block>標籤可能是小程式<block>標籤或templete模版轉換生成的，有的頁面轉完後可能有多層<block>巢狀的情況，不影響使用，但是不程式碼太美觀，修改的話<block> 標籤替換為 <templete> 標籤，樣式估計也需要調整
頁面事件例如 <view @tap="clickBtn" data-id="id">點選</view> ,頁面轉換完使用沒問題，但是和平常開發vue不一樣，更新的話可以改為<view @click="clickBtn(id)">，在修改對應方法即可
引入wxs的頁面 <script module="utils" lang="wxs" src="./utils.wxs"></script> 大部分方法可改為 computed、watch，

css部分

css轉換可能失敗，大部分是單位轉換失敗，原px乘2，改為rpx即可
盒子模型的問題（小程式預設content-box,uniapp預設樣式border-box），修改box-sizing即可

三、擴充套件

習慣vue寫法來處理router路由的同學，還可以整合一個uni-simple-router外掛來管理路由。

1、使用vue-cli 建立一個新的專案,使用uni-simple-router管理路由。

vue create -p dcloudio/uni-preset-vue xcxToUniapp

2、開啟該專案，新建頁面，copy轉換後的專案的程式碼

3、執行專案即可

總結

這篇文章記錄了博主用使用uniapp整合H5和小程式兩端的一些思路和解決方案。雖然很曲折，但還是很開心，故記錄一下。希望這個記錄能幫到看到這篇文章的小夥伴

到此這篇關於微信小程式轉換uniapp的遷移步驟以及遇到的問題總結的文章就介紹到這了,更多相關微信小程式轉uniapp內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！