現(xiàn)有一個(gè)十分龐大的微信小程序應(yīng)用，想要把新功能利用uni-app來開發(fā)，是否可行？有哪些優(yōu)缺點(diǎn)？

首先看到官方給出的解決方案

https://uniapp.dcloud.io/hybrid

方式1：把原生小程序轉(zhuǎn)換為uni-app源碼。有各種轉(zhuǎn)換工具，詳見

方式2：新建一個(gè)uni-app項(xiàng)目，把原生小程序的代碼變成小程序組件，進(jìn)而整合到uni-app項(xiàng)目下。uni-app支持使用小程序wxml組件，參考

方式3：原生開發(fā)的小程序仍保留，部分新功能使用uni-app開發(fā)。

我們選用第三種解決方案，原生小程序保留，新功能使用uni-app來開發(fā)。

我們先新建一個(gè)原生小程序demo

創(chuàng)建成功后，目錄如下

記下來，去創(chuàng)建uni-app項(xiàng)目，這里我們通過vue-cli的方式來創(chuàng)建

// 安裝vue-cli 
npm install -g @vue/cli 
// 創(chuàng)建uni-app創(chuàng)建，選擇默認(rèn)模版 
vue create -p dcloudio/uni-preset-vue uniapp-project

創(chuàng)建成功后目錄如下

接下來我們打包一個(gè)子應(yīng)用

npm run build:mp-weixin -- --subpackage=sub_uniapp
// 或者 
yarn build:mp-weixin --subpackage=sub_uniapp

記下來我們把dist/build/mp-weixin/下的sub_uniapp文件夾拷貝到原生小程序的根目錄中。

然后在app.json文件中增加對(duì)應(yīng)的頁面路徑

接下來我們?cè)L問這個(gè)頁面

發(fā)現(xiàn)圖片沒有顯示

我們需要去uni-app項(xiàng)目中，把頁面中的圖片路徑從絕對(duì)路徑改為相對(duì)路徑。

然后，重新打包，copy到小程序中，重新訪問頁面

到這里基本功能已經(jīng)實(shí)現(xiàn)了。

有一些問題需要注意：

• uni-app中的app.vue onLanuch生命周期并不會(huì)觸發(fā)，在分包中，首次進(jìn)入分包會(huì)觸發(fā)一次
• 如果需要在uni-app中依賴原生小程序中的方法，不好去實(shí)現(xiàn)。
• 在項(xiàng)目管理時(shí)增加了項(xiàng)目的復(fù)雜度。

補(bǔ)充：一些注意事項(xiàng)

1.原來是前端打包為apk或者ipa，現(xiàn)在打包為h5手機(jī)版讓后端上傳服務(wù)器給ios或者安卓鏈接，讓安卓和ios進(jìn)行打包

2.如果使用原生會(huì)有一些很多方法不能使用例如：前端寫的微信登錄，拉起相機(jī)，掃描二維碼等都需要原生來做

3.所以說盡量前端能做，不要與原生混合開發(fā)

總結(jié)

到此這篇關(guān)于uni-app和原生小程序混合開發(fā)的文章就介紹到這了,更多相關(guān)uni-app和原生小程序混合開發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論