資訊專欄INFORMATION COLUMN
在微信小程序開發(fā)中用新功能利用uni-app來開發(fā)，我們看看都有哪些優(yōu)缺？
首選我們看看官網(wǎng)給出的解決思路方案
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文件中增加對應(yīng)的頁面路徑
接下來我們訪問這個(gè)頁面
發(fā)現(xiàn)圖片沒有顯示
我們需要去uni-app項(xiàng)目中，把頁面中的圖片路徑從絕對路徑改為相對路徑。
然后，重新打包，copy到小程序中，重新訪問頁面
到這里基本功能已經(jīng)實(shí)現(xiàn)了。
其實(shí)我們有些問題要注意：
uni-app中的app.vue onLanuch生命周期并不會(huì)觸發(fā)，只有在分包中，首次進(jìn)入分包會(huì)觸發(fā)一次
在uni-app中依賴原生小程序中的方法，實(shí)現(xiàn)就會(huì)有困難。而且項(xiàng)目也會(huì)更復(fù)雜。
補(bǔ)充：一些注意事項(xiàng)
1.以前的時(shí)候是用前端打包為apk或者ipa，現(xiàn)在區(qū)別是用打包為h5手機(jī)版讓后端上傳服務(wù)器給ios或者安卓鏈接，讓安卓和ios進(jìn)行打包
2.我們可以轉(zhuǎn)化下思路，用用原生方法：前端寫的微信登錄，拉起相機(jī)，掃描二維碼等都需要原生來做
3.其實(shí)都很麻煩，能不要用混合的就不要用混合的。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/127988.html
摘要：當(dāng)時(shí)下載了一個(gè)，下載了官方提供的示例教程。關(guān)于項(xiàng)目目錄開發(fā)規(guī)范一定要遵守，直接通過官網(wǎng)學(xué)習(xí)即可。最后就是發(fā)布安卓包和蘋果包了。我將自己做的第一個(gè)新聞列表新聞詳情程序打包，安裝到了安卓手機(jī)上測試了下，效果非常棒。 本人微信公眾號：前端修煉之路，歡迎關(guān)注 背景介紹 大概在今年的十月份左右，我了解到Dcloud推出了uni-app。當(dāng)時(shí)下載了一個(gè)Hbuilder X，下載了官方提供的hell...
摘要：一開始支持微信小程序自定義組件新版支持了更多語法，詳細(xì)如下支持過濾器支持比較復(fù)雜的渲染表達(dá)式支持在內(nèi)使用中的函數(shù)支持同的解析支持新語法支持解構(gòu)插槽設(shè)置默認(rèn)值支持后備內(nèi)容組件支持原生事件綁定，如新版不支持的語法不支持綁定變量使用字符串 一、1、uni-app 1.8開始支持微信小程序自定義組件2、新版支持了更多 Vue 語法，詳細(xì)如下： 支持過濾器 filter支持比較復(fù)雜的 JavaS...
摘要：其實(shí)大部分坑在在官網(wǎng)都有介紹具體位置在在中使用模塊官方文檔中總結(jié)了很多坑，但我只說一下我今天遇到的坑不支持中的過濾器解決辦法從后臺(tái)獲取數(shù)據(jù)后始用對數(shù)據(jù)進(jìn)行處理，例子始用過濾器時(shí)始用僅為示例，并非真實(shí)接口地址。 其實(shí)大部分坑在 uni-app在官網(wǎng)都有介紹 具體位置在 在 uni-app 中使用 Vue.js 模塊 官方文檔中總結(jié)了很多坑，但我只說一下我今天遇到的： 坑1：uni-app...
閱讀 566·2023-03-27 18:33
閱讀 755·2023-03-26 17:27
閱讀 656·2023-03-26 17:14
閱讀 608·2023-03-17 21:13
閱讀 541·2023-03-17 08:28
閱讀 1829·2023-02-27 22:32
閱讀 1324·2023-02-27 22:27
閱讀 2207·2023-01-20 08:28
