前言

背景：由于歷史原因，公司有個(gè)歷史項(xiàng)目使用vue開發(fā)的公眾號(hào)H5，原生開發(fā)的微信小程序。兩端功能的完全一樣，但是需要維護(hù)兩個(gè)項(xiàng)目，最近客戶提了需求需要修改部分功能，博主接到需求后，覺得維護(hù)兩套代碼不僅是重復(fù)開發(fā)，測(cè)試起來(lái)也麻煩，因?yàn)橹笆莾蓚€(gè)人開發(fā)不同端的緣故，導(dǎo)致大部分的bug都是因?yàn)閮啥瞬灰恢庐a(chǎn)生的。為了節(jié)省時(shí)間和維護(hù)成本，提升開發(fā)測(cè)試效率，在反復(fù)對(duì)比調(diào)研，最終選擇了uniapp技術(shù)框架融合兩端進(jìn)行重構(gòu)。博主目前正在使用uniapp開發(fā)H5和小程序，這篇文章是和大家分享并記錄一下原生小程序在遷移到uniapp的步驟和時(shí)遇到的問(wèn)題。

一、遷移步驟

把微信小程序轉(zhuǎn)成uni-app，這里推薦一款【miniprogram-to-uniapp】小程序轉(zhuǎn)換工具插件

第一步：安裝miniprogram-to-uniapp 插件

在命令行里，運(yùn)行【 npm install miniprogram-to-uniapp -g 】進(jìn)行安裝，因?yàn)檫@個(gè)包是工具，要求全局都能使用，所以需要-g進(jìn)行全局安裝。
如果運(yùn)行npm報(bào)錯(cuò)，請(qǐng)先安裝Node.js，下載地址：https://nodejs.org/zh-cn/

npm install miniprogram-to-uniapp -g

第二步：查看是否安裝成功

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

 顯示版本號(hào)，說(shuō)明已經(jīng)安裝成功了

第三步：使用插件進(jìn)行轉(zhuǎn)換

在命令行里，輸入【wtu -i "你的小程序項(xiàng)目路徑"】

注意 -i 前面和后面都有空格?。?！

注意 -i 前面和后面都有空格?。?！

注意 -i 前面和后面都有空格?。。?/p>

如：【wtu -i "E:\zpWork\Project_self\miniprogram-to-uniapp\test\test-wx-to-uni"】 ，回車后即可以在源項(xiàng)目同及目錄得到一個(gè)后綴為_uni的目錄，即轉(zhuǎn)換成功。

轉(zhuǎn)換前

 轉(zhuǎn)換后

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

第四步：使用hbuilder X運(yùn)行轉(zhuǎn)換后的項(xiàng)目并在微信小程序編輯器查看

將轉(zhuǎn)換后的xxx_uni項(xiàng)目導(dǎo)入到hbuilder X，
點(diǎn)擊菜單 運(yùn)行--> 運(yùn)行到小程序模擬器-->微信開發(fā)者工具?。ㄈ绻鞘褂昧藇ant的項(xiàng)目，請(qǐng)運(yùn)行到H5，vant項(xiàng)目轉(zhuǎn)換后僅支持H5和app）
然后查看轉(zhuǎn)換后的項(xiàng)目運(yùn)行到小程序，是否可以正常運(yùn)行無(wú)報(bào)錯(cuò)！

第五步：調(diào)試修改

運(yùn)行項(xiàng)目，在小程序開發(fā)者工具調(diào)試遷移頁(yè)面的報(bào)錯(cuò)信息

二、處理遷移問(wèn)題

根據(jù)下方遷移內(nèi)容，逐一更新頁(yè)面方法，修復(fù)頁(yè)面報(bào)錯(cuò)信息，頁(yè)面顯示、功能運(yùn)行正常即遷移完成。

js部分

1，刪除 const app = getApp();

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

3，數(shù)據(jù)綁定 this.setData({ a : 1 }) 更新為 this.a = 1

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

5，onLoad（options）

• 通過(guò)options或this.$Route.query獲取頁(yè)面?zhèn)鬟f參數(shù)

6、部分頁(yè)面生命周期釋義，詳見頁(yè)面生命周期

• onPullDownRefresh：監(jiān)聽用戶下拉動(dòng)作，一般用于下拉刷新
• onReachBottom：頁(yè)面滾動(dòng)到底部的事件（不是scroll-view滾到底），常用于下拉下一頁(yè)數(shù)據(jù)
• onShareAppMessage：用戶點(diǎn)擊右上角分享
• onPageScroll：監(jiān)聽頁(yè)面滾動(dòng)

templete

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

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

css部分

1. css轉(zhuǎn)換可能失敗，大部分是單位轉(zhuǎn)換失敗，原px乘2，改為rpx即可
2. 盒子模型的問(wèn)題（小程序默認(rèn)content-box,uniapp默認(rèn)樣式border-box），修改box-sizing即可

三、擴(kuò)展

習(xí)慣vue寫法來(lái)處理router路由的同學(xué)，還可以集成一個(gè)uni-simple-router插件來(lái)管理路由。

1、使用vue-cli 創(chuàng)建一個(gè)新的項(xiàng)目,使用uni-simple-router管理路由。

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

2、 打開該項(xiàng)目，新建頁(yè)面，copy轉(zhuǎn)換后的項(xiàng)目的代碼

3、運(yùn)行項(xiàng)目即可

總結(jié)

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

到此這篇關(guān)于微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到的問(wèn)題總結(jié)的文章就介紹到這了,更多相關(guān)微信小程序轉(zhuǎn)uniapp內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論