手把手教你uniapp和小程式分包(圖文)
Jul 22, 2022 pm 04:55 PM
本篇文章為大家?guī)砹岁P(guān)於uniapp跨域的相關(guān)知識(shí)，其中介紹了uniapp和小程式分包的相關(guān)問題，每個(gè)使用分包小程式必定含有一個(gè)主包。所謂的主包，即放置預(yù)設(shè)啟動(dòng)頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 腳本；而分包則是根據(jù)開發(fā)者的配置進(jìn)行劃分，希望對(duì)大家有幫助。
推薦：《uniapp教學(xué)》
一、小程式分包
每個(gè)使用分包小程式必定含有一個(gè)主包。所謂的主包，即放置預(yù)設(shè)啟動(dòng)頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 腳本；而分包則是根據(jù)開發(fā)者的配置進(jìn)行劃分。
在小程式啟動(dòng)時(shí)，預(yù)設(shè)會(huì)下載主包並啟動(dòng)主包內(nèi)頁面，當(dāng)使用者進(jìn)入分包內(nèi)某個(gè)頁面時(shí)，客戶端會(huì)把對(duì)應(yīng)分包下載下來，下載完成後再進(jìn)行展示
目前小程式分包大小有以下限制：
- 整個(gè)小程式所有分包大小不超過20M
- 單一分包/主套件大小不能超過2M
對(duì)小程式進(jìn)行分包，可以優(yōu)化小程式首次啟動(dòng)的下載時(shí)間，以及在多團(tuán)隊(duì)共同開發(fā)時(shí)可以更好的解耦協(xié)作。
這裡直接點(diǎn)擊去看官方的分包教學(xué)容易理解
二、uniapp分包小程式
App預(yù)設(shè)為整包。相容於小程式的分包配置。其目的不用於下載提速，而用於首頁是vue時(shí)的啟動(dòng)提速。
這是我分包小程式之後的目錄結(jié)構(gòu)
- #components:公用元件（供主套件引用）
- page_後跟拼音的都是分包
- 分包裡的components是單一分包自己的元件目錄，分包vue頁面的引用只能是在自己page_zhaoshang分包目錄下才可以引用
- pages是主包，裡面都是啟動(dòng)頁面/TabBar 頁面
- static裡放的是公共靜態(tài)資源，圖片類別
"mp-weixin": {
"optimization":{"subPackages":true}
}
#最佳化分包：
在對(duì)應(yīng)平臺(tái)的設(shè)定(manifest. json)下新增"optimization":{"subPackages":true}開啟分包最佳化
mp-weixin、mp-qq 、mp-baidu的分包最佳化
- 靜態(tài)檔案：分包下支援static 等靜態(tài)資源拷貝，即分包目錄內(nèi)放置的靜態(tài)資源不會(huì)被打包到主包中，也不可在主包中使用
- js檔：當(dāng)某個(gè)js 僅被一個(gè)分包引用時(shí)，該js 會(huì)被打包到該分包內(nèi)，否則仍打到主包（即被主包引用，或被超過1 個(gè)分包引用）
- 自訂元件：若某個(gè)自訂元件僅被一個(gè)分包引用時(shí)，且未放入到分包內(nèi)，編譯時(shí)會(huì)輸出提示訊息
#注意：主包和分包是不能再在同一目錄下，在構(gòu)建uniapp項(xiàng)目時(shí)，可以考慮目錄結(jié)構(gòu)，以便後期進(jìn)行分包；
preloadRule?中，key?是頁面路徑，value?是進(jìn)入此頁面的預(yù)先下載配置，每個(gè)配置有以下幾項(xiàng)：
| 類型 | #必填 | 預(yù)設(shè)值 | #說明 | |
|---|---|---|---|---|
| StringArray | 是 | 無 | 進(jìn)入頁面後預(yù)下載分包的?root?或?name。 __APP__?表示主包。 | |
| String | 否 | #wifi | #在指定網(wǎng)路下預(yù)先下載，可選值為：all（不限網(wǎng)路）、wifi（僅限wifi已預(yù)先下載） |
以上是手把手教你uniapp和小程式分包(圖文)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
uniapp有什麼缺點(diǎn)
Apr 06, 2024 am 04:06 AM
UniApp 作為跨平臺(tái)開發(fā)框架擁有許多便利，但缺點(diǎn)也較為明顯：效能受限於混合開發(fā)模式，導(dǎo)致開啟速度、頁面渲染和互動(dòng)回應(yīng)較差。生態(tài)系統(tǒng)不完善，特定領(lǐng)域組件和庫較少，限制創(chuàng)意發(fā)揮和複雜功能實(shí)現(xiàn)。不同平臺(tái)的相容性問題，易出現(xiàn)樣式差異和 API 支援不一致的情況。 WebView 的安全機(jī)制不同於原生應(yīng)用，可能降低應(yīng)用程式安全性。同時(shí)支援多個(gè)平臺(tái)的應(yīng)用程式發(fā)布更新需要多次編譯打包，增加開發(fā)和維護(hù)成本。
uniapp和flutter有什麼差別
Apr 06, 2024 am 04:30 AM
UniApp 基於 Vue.js，F(xiàn)lutter 基於 Dart，兩者都支援跨平臺(tái)開發(fā)。 UniApp 提供豐富的元件和簡(jiǎn)易開發(fā)，但效能受限於 WebView；Flutter 使用原生渲染引擎，效能優(yōu)異，但開發(fā)難度較高。 UniApp 擁有活躍的中文社區(qū)，F(xiàn)lutter 擁有龐大且全球化的社區(qū)。 UniApp 適合快速開發(fā)、效能要求不高的場(chǎng)景；Flutter 適合客製化程度高、高效能的複雜應(yīng)用。
webstorm開發(fā)uniapp專案如何啟動(dòng)預(yù)覽
Apr 08, 2024 pm 06:42 PM
在 WebStorm 中啟動(dòng) UniApp 專案預(yù)覽的步驟：安裝 UniApp 開發(fā)工具外掛程式連接到裝置設(shè)定 WebSocket啟動(dòng)預(yù)覽
uniapp和mui哪個(gè)好
Apr 06, 2024 am 05:18 AM
整體而言，需複雜原生功能時(shí)，uni-app 較好；需簡(jiǎn)單或高度自訂介面時(shí)，MUI 較好。此外，uni-app 具備：1. Vue.js/JavaScript 支援；2. 豐富原生組件/API；3. 良好生態(tài)系。缺點(diǎn)是：1. 效能問題；2. 客製化介面困難。 MUI 具備：1. Material Design 支援；2. 高度彈性；3. 廣泛元件/主題庫。缺點(diǎn)是：1. CSS 依賴；2. 不提供原生元件；3. 生態(tài)系較小。
uniapp和原生開發(fā)哪個(gè)好
Apr 06, 2024 am 05:06 AM
在 UniApp 和原生開發(fā)之間選擇時(shí)，應(yīng)考慮開發(fā)成本、效能、使用者體驗(yàn)和靈活性。 UniApp 優(yōu)點(diǎn)在於跨平臺(tái)開發(fā)、快速迭代、易於學(xué)習(xí)和內(nèi)建插件，而原生開發(fā)則在效能、穩(wěn)定性、原生體驗(yàn)和可擴(kuò)展性方面更勝一籌。根據(jù)特定專案需求權(quán)衡利弊，初學(xué)者適合 UniApp，追求高效能和無縫體驗(yàn)的複雜應(yīng)用程式適合原生開發(fā)。
uniapp用什麼開發(fā)工具
Apr 06, 2024 am 04:27 AM
UniApp使用HBuilder X作為官方開發(fā)工具，該IDE整合了程式碼編輯器、偵錯(cuò)器、模擬器和豐富的插件，為跨平臺(tái)行動(dòng)應(yīng)用程式開發(fā)提供全面的支援。
PHP實(shí)戰(zhàn)：快速實(shí)作斐波那契數(shù)列的程式碼範(fàn)例
Mar 20, 2024 pm 02:24 PM
PHP實(shí)戰(zhàn)：快速實(shí)現(xiàn)斐波那契數(shù)列的程式碼範(fàn)例斐波那契數(shù)列是數(shù)學(xué)中一個(gè)非常有趣且常見的數(shù)列，其定義如下：第一個(gè)和第二個(gè)數(shù)為0和1，從第三個(gè)數(shù)開始，每個(gè)數(shù)都是前兩個(gè)數(shù)的和。斐波那契數(shù)列的前幾個(gè)數(shù)字依序?yàn)?,1,1.2,3,5,8,13,21,...依此類推。在PHP中，我們可以透過遞歸和迭代兩種方式來實(shí)現(xiàn)斐波那契數(shù)列的生成。下面我們分別來展示這兩
學(xué)uniapp需要哪些基礎(chǔ)
Apr 06, 2024 am 04:45 AM
uniapp開發(fā)需要以下基礎(chǔ)：前端技術(shù)（HTML、CSS、JavaScript）行動(dòng)開發(fā)知識(shí)（iOS和Android平臺(tái)）Node.js其他基礎(chǔ)（版本控制工具、IDE、行動(dòng)開發(fā)模擬器或真機(jī)除錯(cuò)經(jīng)驗(yàn)）
