詳情見 ： https://blog.csdn.net/cmdfas/article/details/119884168

現有一個十分龐大的微信小程式應用，想要把新功能利用uni-app來開發，是否可行？有哪些優缺點？

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

https://uniapp.dcloud.io/hybrid

方式1：把原生小程式轉換為uni-app原始碼。有各種轉換工具，詳見

方式2：新建一個uni-app專案，把原生小程式的程式碼變成小程式元件，進而整合到uni-app專案下。uni-app支援使用小程式wxml元件，參考

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

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

我們先新建一個原生小程式demo

建立成功後，目錄如下

記下來，去建立uni-app專案，這裡我們通過vue-cli的方式來建立

// 安裝vue-cli
npm install -g @vue/cli
// 建立uni-app建立，選擇預設模版
vue create -p dcloudio/uni-preset-vue uniapp-project
建立成功後目錄如下

接下來我們打包一個子應用

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

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

然後在app.json檔案中增加對應的頁面路徑

接下來我們訪問這個頁面

發現圖片沒有顯示

我們需要去uni-app專案中，把頁面中的圖片路徑從絕對路徑改為相對路徑。

然後，重新打包，copy到小程式中，重新訪問頁面

到這裡基本功能已經實現了。

有一些問題需要注意：

uni-app中的app.vue onLanuch生命週期並不會觸發，在分包中，首次進入分包會觸發一次

如果需要在uni-app中依賴原生小程式中的方法，不好去實現。

在專案管理時增加了專案的複雜度。
————————————————
版權宣告：本文為CSDN博主「小帥的程式設計筆記」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/cmdfas/article/details/119884168