您好,登錄后才能下訂單哦!
這篇文章主要講解了“微信小程序轉(zhuǎn)換uniapp的遷移步驟及遇到的問題怎么解決”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“微信小程序轉(zhuǎn)換uniapp的遷移步驟及遇到的問題怎么解決”吧!
把微信小程序轉(zhuǎn)成uni-app,這里推薦一款【miniprogram-to-uniapp】小程序轉(zhuǎn)換工具插件
在命令行里,運(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
npm install miniprogram-to-uniapp -g
繼續(xù)在命令行里,運(yùn)行【 wtu -V 】,執(zhí)行結(jié)果如下
顯示版本號(hào),說明已經(jīng)安裝成功了
在命令行里,輸入【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)目目錄):
將轉(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)行無報(bào)錯(cuò)!
運(yùn)行項(xiàng)目,在小程序開發(fā)者工具調(diào)試遷移頁面的報(bào)錯(cuò)信息
根據(jù)下方遷移內(nèi)容,逐一更新頁面方法,修復(fù)頁面報(bào)錯(cuò)信息,頁面顯示、功能運(yùn)行正常即遷移完成。
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)
通過options或this.$Route.query獲取頁面?zhèn)鬟f參數(shù)
6、部分頁面生命周期釋義,詳見頁面生命周期
onPullDownRefresh:監(jiān)聽用戶下拉動(dòng)作,一般用于下拉刷新
onReachBottom:頁面滾動(dòng)到底部的事件(不是scroll-view滾到底),常用于下拉下一頁數(shù)據(jù)
onShareAppMessage:用戶點(diǎn)擊右上角分享
onPageScroll:監(jiān)聽頁面滾動(dòng)
以下幾條不影響使用,改不改都行
<block>標(biāo)簽可能是小程序<block>標(biāo)簽或templete模版轉(zhuǎn)換生成的,有的頁面轉(zhuǎn)完后可能有多層<block>嵌套的情況,不影響使用,但是不代碼太美觀,修改的話<block> 標(biāo)簽替換為 <templete> 標(biāo)簽,樣式估計(jì)也需要調(diào)整
頁面事件 例如 <view @tap="clickBtn" data-id="id">點(diǎn)擊</view> ,頁面轉(zhuǎn)換完使用沒問題,但是和平常開發(fā)vue不一樣,更新的話可以改為<view @click="clickBtn(id)">, 在修改對(duì)應(yīng)方法即可
引入wxs的頁面 <script module="utils" lang="wxs" src="./utils.wxs"></script> 大部分方法可改為 computed、watch,
css轉(zhuǎn)換可能失敗,大部分是單位轉(zhuǎn)換失敗,原px乘2,改為rpx即可
盒子模型的問題(小程序默認(rèn)content-box,uniapp默認(rèn)樣式border-box),修改box-sizing即可
習(xí)慣vue寫法來處理router路由的同學(xué),還可以集成一個(gè)uni-simple-router插件來管理路由。
1、使用vue-cli 創(chuàng)建一個(gè)新的項(xiàng)目,使用uni-simple-router管理路由。
vue create -p dcloudio/uni-preset-vue xcxToUniapp
2、 打開該項(xiàng)目,新建頁面,copy轉(zhuǎn)換后的項(xiàng)目的代碼
3、運(yùn)行項(xiàng)目即可
感謝各位的閱讀,以上就是“微信小程序轉(zhuǎn)換uniapp的遷移步驟及遇到的問題怎么解決”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)微信小程序轉(zhuǎn)換uniapp的遷移步驟及遇到的問題怎么解決這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。