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

前言

背景:由於歷史原因,公司有個歷史項目使用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 前面和後面都有空格!!!

註意 -i 前面和後面都有空格!!!

註意 -i 前面和後面都有空格!!!

如:【wtu -i "E:\zpWork\Project_self\miniprogram-to-uniapp\test\test-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

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

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

css部分

  1. css轉換可能失敗,大部分是單位轉換失敗,原px乘2,改為rpx即可
  2. 盒子模型的問題(小程序默認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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: