005微信小程序npm包_全局數據共享和分包

npm包_全局數據共享和分包

  • 1. 使用npm包
    • 1.1 Vant Weapp
    • 1.2 API Promise化
  • 2. 全局數據共享
  • 3. 分包
    • 3.1 分包的加載規則
    • 3.2 分包的體積限制
    • 3.3 使用分包
    • 3.3 獨立分包
    • 3.4 分包預下載

1. 使用npm包

小程序對npm進行了支持與限制，限制如下：

  • 不支持依賴于 Node.js 內置庫的包
  • 不支持依賴與 瀏覽器內置對象的包
  • 不支持依賴與 C++插件的包

1.1 Vant Weapp

? Vant Weapp 是有贊前端團隊開源的一條小程序 UI 組件庫,官方文檔,它使用MIT開源許可協議。

安裝 Vant 組件庫

  • 通過 npm 安裝

    • 在當前項目路徑的命令行中輸入:

      # 通過 npm 安裝
npm i @vant/weapp -S --production

  • 構建 npm 包

在這里插入圖片描述

  • 修改 app.json

    • 將 app.json 中的 "style": "v2" 去除，小程序的新版基礎組件強行加上了許多樣式，難以覆蓋，不關閉將造成部分組件樣式混亂。

    • 在 app.json的 usingComponents節點中引入需要的組件

      //例 引入按鈕組件
"usingComponents": {"van-button": "@vant/weapp/button/index"
}

      <!-- wxml 結構 -->
<van-button type="primary">主要按鈕</van-button>

    定制全局主題樣式：?		Vant Weapp 使用 CSS變量來實現定制主題。?		[所有可用的顏色變量](https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less)- 在 app.wxss 中，寫入 CSS 變量 ，對全局生效：	?```css
page{--button-danger-background-color: #C00000;--button-danger-border-color: #D60000;--button-primary-background-color: #001dc0;--button-primary-border-color: #D60000;
}

1.2 API Promise化

? API Promise化：指的是通過額外的配置，將官方提供的、基于回調函數的異步API，升級改造為基于Promise 的異步 API，從而提高代碼的可讀性、維護性，避免回調地獄的問題。

  • 實現 API Promise：在小程序中，實現API Promise化主要依賴與 miniprogram-api-Promise這個第三方 npm 包。

    • 安裝：

      npm install --save  miniprogram-api-Promise

    • 在小程序入口文件中 app.js，只需要調用一次 promisifyAll() 方法

      //引入 promisifyAll 方法，用于將小程序的API轉換為支持 Promise的形式
import {promisifyAll} from 'miniprogram-api-promise'//創建一個對象 wx.p，并賦值給常量 wxp
const wxp = wx.p = {}//使用 promisifyAll方法將 wx（微信小程序原生API）中的所有方法轉換為同時支持回調和 Promise的形式
promisifyAll(wx,wxp)

  • 調用 Promise化之后的異步 API

    <!-- .wxml頁面 -->
<van-button  type="primary" bind:tap="getInfo">按鈕</van-button>

    // 定義一個異步函數 getInfo
async getInfo(){//使用 wx,p,request，通過 promisifyAll 轉換后支持 async/await的版本const {data: res} = await wx.p.request({method: 'GET',url: 'https://applet-base-api-t.itheima.net/api/get',data: {name: 'zs',age: 20}})console.log(res)}

2. 全局數據共享

? 全局數據共享（又稱：狀態管理）：是為了解決組件之間數據共享的問題。開發中常用的全局數據共享方案有：Vuex、ReduX、MobX等。

在這里插入圖片描述

  • 小程序中的全局數據共享方案：小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 實現全局數據共享。

    • mobx-miniprogram 用來創建 Store 實例對象
    • mobx-miniprogram-bindings用來把 Store 中的共享數據或方法，綁定到組件或頁面中使用

    在這里插入圖片描述

  • MobX

    • 安裝 MobX相關包

      npm install --save mobx-miniprogram mobx-miniprogram-bindings

      //專門創建 Store 的實例對象
import {observable, action} from 'mobx-miniprogram'//export 是 JavaScript（包括微信小程序開發中）用于導出模塊內容的關鍵字，它的作用是將變量、函數、對象等從一個文件中“暴露出去”，以便其他文件可以通過 import 來引入和使用。
export const store = observable({//數據字段numA: 1,numB: 2,activeTabBarIndex: 0,//計算屬性get sum(){return this.numA +this.numB},//action 函數，專門來修改 store 中數據的值updateNum1: action(function(step){this.numA += step}),updateNum2: action(function(step){this.numB += step})})

  • 將Store中的成員綁定到頁面中

    // 頁面 .js 文件// 從 mobx-miniprogram-bindings 導入 createStoreBindings
// 這個工具用于將 MobX Store 和小程序頁面進行綁定
import { createStoreBindings } from 'mobx-miniprogram-bindings'// 從 store.js 中導入之前創建的全局 store 實例
import { store } from '../../store/store'Page({/*** 生命周期函數 -- 頁面加載時觸發*/onLoad: function (options) {// 創建 Store 綁定對象// 將 store 中的數據和方法綁定到當前頁面（this），實現響應式更新this.storeBindings = createStoreBindings(this, {store,        // 使用的 store 實例fields: ['numA', 'numB', 'sum'], // 需要綁定的響應式字段actions: ['updateNum1'] // 需要綁定的 action 方法})},/*** 生命周期函數 -- 頁面卸載時觸發（頁面關閉或跳轉）*/onUnload: function () {// 銷毀 Store 綁定，防止內存泄漏this.storeBindings.destroyStoreBindings()}
})

  • 在頁面上使用 Store 中的成員

    <!-- .wxml -->
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bind:tap="btnHandler1" data-step="{{1}}">numA +1</van-button>
<van-button type="danger" bind:tap="btnHandler1"  data-step="{{-1}}">numA -1</van-button>

      btnHandler1(e){// console.log(e)this.updateNum1(e.target.dataset.step)}

  • 將Store 中的成員綁定到組件中

    import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'Component({behaviors:[storeBindingsBehavior],storeBindings: {//數據源store,fields: { //指定要綁定的數據numA: ()=>store.numA,//綁定字段的第1種方法numB: (store) => store.numB,//綁定字段的第2種方法sum: 'sum'//綁定字段的第3種方法},actions: {//指定要綁定的方法updateNum2: 'updateNum2'}}
})

  • 在組件中使用 Store 中的成員

    <view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bind:tap="btnHandler2" data-step="{{1}}">numB +1</van-button>
<van-button type="danger" bind:tap="btnHandler2"  data-step="{{-1}}">numB -1</van-button>

      /*** 組件的方法列表*/methods: {btnHandler2(e){this.updateNum2(e.target.dataset.step)}}

3. 分包

? 分包指的是把一個完整的小程序項目，按照需求分為不同的子包，在構建時打包成不同的分包，用戶在使用時按需進行加載。

  • 可以優化小程序首次啟動的下載時間
  • 在多團隊共同開發時可以更好的解耦合協作

? 分包前，小程序項目中所有的頁面和資源都被打包到了一起，導致整個項目體積過大，影響小程序首次啟動的下載時間。

在這里插入圖片描述

分包后項目的構成，小程序項目由1個主包 + 多個分包組成：

  • 主包：一般只包含項目的啟動頁面或TabBar頁面、以及所有分包都需要用到的一些公共資源
  • 分包：只包含和當前分包有關的頁面和私有資源

在這里插入圖片描述

3.1 分包的加載規則

  • 在小程序啟動時，默認會下載主包并啟動主包頁面
    • TabBar頁面需要放到主包中
  • 當用戶進入分包內某個頁面時，客戶端會把對應分包下載下來，下載完成后再進行展示
    • 非TabBar頁面可以按照功能的不同，劃分不同的分包之后，進行按需下載

3.2 分包的體積限制

  • 整個小程序所有分包大小不超過 16M（主包+所有分包）
  • 單個分包/主包大小不能超過 2M

3.3 使用分包

配置方法

|———— app.js
|———— app.json
|———— app.wxss
|———— pages //主包的所有頁面
|	  |———— index
|	  |____ logs
|———— packageA //第一個分包
|	  |____ pages
|			|---- cat
|			|____ dog
|———— packageB //第二個分包
|	  |____ pages
|			|---- apple
|			|____ banana
|____ utils

//在 app.json 的 subpackages 節點中聲明分包的結構
{"pages": ["pages/home/home", "pages/message/message","pages/contact/contact"],"subPackages": [{"root": "pkgA","name": "p1","pages": ["pages/cat/cat","pages/dog/dog"]},{"root": "pkgB","name": "p2","pages": ["pages/apple/apple"]}]
}

打包原則：

  • 小程序會按 subpackages 的配置進行分包，subpackages 之外的目錄將被打包到主包中
  • 主包也可以有自己的pages（即最外層的 pages 字段）
  • tabBar 頁面必須在主包內
  • 分包之間不能相互嵌套

引用原則：

  • 主包無法引用分包內的私有資源
  • 分包之間不能相互引用私有資源
  • 分包可以引用主包內的公共資源

在這里插入圖片描述

3.3 獨立分包

? 獨立分包本質上也是分包，但可以獨立于主包和其它分包而單獨運行。

在這里插入圖片描述

獨立分包和普通分包的區別

  • 普通分包必須依賴于主包才能運行
  • 獨立分包可以在不下載主包的情況下，獨立運行

獨立分包的配置方法：設置 independent 為true

{"pages": ["pages/home/home", "pages/message/message","pages/contact/contact"],"subPackages": [{"root": "pkgB","name": "p2","pages": ["pages/apple/apple"],"independent": true //通過此節點，聲明當前 moduleB 分包為 "獨立分包"}]
}

引用規則：

  • 主包無法引用獨立分包的私有資源
  • 獨立分包之間，不能相互引用私有資源
  • 獨立分包和普通分包之間，不能相互引用私有資源

3.4 分包預下載

? 分包預下載：在進入小程序的某個頁面時，由框架自動預下載可能需要的分包，從而提升后續分包頁面時的啟動速度。

? 預下載分包的行為，會在進入指定的頁面時觸發。在app.json中，使用 preloadRule節點定義分包的預下載規則：

  "preloadRule": {"pages/contact/contact": { //觸發分包預下載的頁面路徑"packages": ["p1"], //通過 root或 name指定預下載哪些分包"network": "wifi" //指定網絡模式下進行預下載，默認值：wifi，可選值為：all（不限網絡）和 wifi（僅 wifi模式下進行預下載）}}

? 同一個分包中的頁面享有共同的預下載大小限額 2M

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/85674.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/85674.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/85674.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

DPO直接偏好函數的學習解讀

DPO直接偏好函數的學習解讀

DPO, Direct Preference Optimization&#xff0c;采用直接優化策略滿足人類偏好&#xff0c;使得LLM對于給定輸入&#xff0c;生成能用輸出的概率高于生成不能用輸出的概率。 1&#xff09;DPO優化目標 在DPO訓練過程中&#xff0c;模型通過最大化可用回答相對于不可用回答的…
閱讀更多...
【開源初探】基于 Qwen2.5VL的文檔解析工具：docext

【開源初探】基于 Qwen2.5VL的文檔解析工具：docext

源碼地址&#xff1a; https://github.com/NanoNets/docext 概述 docext 是一個由視覺語言模型&#xff08;vlm&#xff09;提供支持的全面的本地文檔智能工具包。vlm 使用的是基于 Qwen2.5VL-3B 的模型&#xff0c;應該是在此模型基礎上進行的微調。 它提供了三個核心功能&…
閱讀更多...
Python 正確重載運算符(增量賦值運算符)

Python 正確重載運算符(增量賦值運算符)

增量賦值運算符 Vector 類已經支持增量賦值運算符 和 * 了&#xff0c;如示例 13-15 所示。 示例 13-15　增量賦值不會修改不可變目標&#xff0c;而是新建實例&#xff0c;然后 重新綁定 >>> v1 Vector([1, 2, 3]) >>> v1_alias v1 # ? >>> …
閱讀更多...
XCUITest + Objective-C 詳細示例

XCUITest + Objective-C 詳細示例

??親愛的技術愛好者們，熱烈歡迎來到 Kant2048 的博客！我是 Thomas Kant，很開心能在CSDN上與你們相遇～?? 本博客的精華專欄： 【自動化測試】 【測試經驗】 【人工智能】 【Python】
閱讀更多...
redis分布式鎖 Redisson在電商平臺開發中的實際應用

redis分布式鎖 Redisson在電商平臺開發中的實際應用

目錄 概述 Redis分布式鎖的實現方式 1. 基于SETNX命令&#xff08;String類型&#xff09; 2. 使用SET命令的NX和EX參數&#xff08;推薦方式&#xff09; 3. 基于Lua腳本實現復雜邏輯 4. RedLock算法&#xff08;多節點Redis實現&#xff09; Redisson的分布式鎖 Redis…
閱讀更多...
joomla 使用nginx服務器只能打開首頁，其他頁面404的解決方案

joomla 使用nginx服務器只能打開首頁，其他頁面404的解決方案

最近一個客戶將Joomla4網站從原先的Apache服務器改為Nginx服務器&#xff0c;整個過程一切順利&#xff0c;但還原網站后發現只能打開首頁&#xff0c;其他頁面都是404。這個問題需要修改nginx的配置文件來解決。 偽靜態 在Apache中使用.htaccess來完成偽靜態路由的轉發&…
閱讀更多...
湖北理元理律師事務所企業債務紓困路徑：司法重整中的再生之道

湖北理元理律師事務所企業債務紓困路徑：司法重整中的再生之道

中小企業債務危機常呈現“擔保鏈擴散”特征&#xff0c;單一債務可能引發企業崩盤。湖北理元理律師事務所通過預重整制度與企業債務重組技術&#xff0c;探索出“司法保護商業談判”的紓困模式。 一、企業債務風險處置四步法 緊急止血 申請司法保護&#xff1a;通過訴前調解…
閱讀更多...
利用DeepWiki高效閱讀項目源碼

利用DeepWiki高效閱讀項目源碼

想獲取更多高質量的Java技術文章&#xff1f;歡迎訪問Java技術小館官網&#xff0c;持續更新優質內容&#xff0c;助力技術成長 技術小館官網 DeepWiki 是一個強大的工具&#xff0c;專為程序員提供開源項目源碼的結構化文檔和 AI 驅動的問答功能&#xff0c;幫助快速理解復雜…
閱讀更多...
django rest_framework 前端網頁實現Token認證

django rest_framework 前端網頁實現Token認證

rest_framework提供了幾種認證方式&#xff1a;Session、Token等。Session是最簡單的&#xff0c;幾乎不用寫任何代碼就可以是實現&#xff0c;Token方式其實也不復雜&#xff0c;網上的教程一大把&#xff0c;但是最后都是用Postman這類工具來實現API調用的&#xff0c;通過這…
閱讀更多...
面試題-函數類型的重載是啥意思

面試題-函數類型的重載是啥意思

在 TypeScript 中&#xff0c;函數重載&#xff08;Function Overload&#xff09; 是指為同一個函數提供多個不同的調用簽名&#xff08;參數類型和返回值類型的組合&#xff09;&#xff0c;但函數體只有一個實現。這樣可以讓函數在不同的輸入下表現出不同的行為&#xff0c;…
閱讀更多...
磐基PaaS平臺MongoDB組件SSPL許可證風險與合規性分析（上）

磐基PaaS平臺MongoDB組件SSPL許可證風險與合規性分析（上）

#作者&#xff1a;任少近 文章目錄 1.背景與問題1.1.背景1.2.問題 3.SSPL條款解讀分析3.1.條款0&#xff1a;定義條款3.2.條款一&#xff1a;源代碼條款3.3.條款二&#xff1a;基本授權條款3.4.條款三&#xff1a;反規避保護條款3.5.條款四&#xff1a;逐字傳播條款3.6.條款五…
閱讀更多...
「Linux文件及目錄管理」輸入輸出重定向與管道

「Linux文件及目錄管理」輸入輸出重定向與管道

知識點解析 輸入/輸出重定向 標準輸入（stdin）：默認從鍵盤讀取，文件描述符為0。標準輸出（stdout）：默認輸出到終端，文件描述符為1。標準錯誤（stderr）：默認輸出到終端，文件描述符為2。重定向符號： >：覆蓋輸出到文件（如command > file）。>>：追加輸出…
閱讀更多...
【Node】最佳Node.js后端開發模板推薦

【Node】最佳Node.js后端開發模板推薦

Node.js 后端開發模板推薦 以下是幾個優秀的Node.js后端模板&#xff0c;它們都適合二次開發&#xff0c;各自有不同的特點和適用場景&#xff1a; 1. Express基礎模板 Express Generator (官方工具) 官方提供的快速搭建工具基礎MVC結構簡單易上手 npm install express-ge…
閱讀更多...
HALCON相機標定

HALCON相機標定

相機標定簡介&#xff1a; 首先&#xff0c;相機會產生畸變&#xff0c;即實際圖像和拍攝圖像不一致&#xff0c;可以是凸性也可以是凹性形變&#xff0c;相機標定的過程就是將畸變圖像還原為原始圖像&#xff0c;并將圖像中的像素坐標轉換為世界坐標。 形如&#xff1a;相機內…
閱讀更多...
Solidity 入門教程（二）：值類型全解 —— 布爾、整數、地址與字節數組

Solidity 入門教程（二）：值類型全解 —— 布爾、整數、地址與字節數組

在上一章中&#xff0c;我們寫下了第一個 Solidity 合約并在 Remix 中成功運行。本章我們將深入了解 Solidity 中的幾種常用值類型&#xff08;Value Types&#xff09;&#xff0c;并通過示例代碼在 Remix 進行驗證。 一、Solidity 中的三種數據類型 在 Solidity 中&#xf…
閱讀更多...
16.大數據監控

16.大數據監控

0.說明 監控主要構成。 軟件版本。 1.exporter監控配置 1.1 node_exporter 啟動命令 nohup ./node_exporter &服務 創建文件 /etc/systemd/system/node_exporter.service&#xff1a; [Unit] DescriptionPrometheus Node Exporter Wantsnetwork-online.target Aft…
閱讀更多...
Tomcat項目本地部署（Servlet為例）

Tomcat項目本地部署（Servlet為例）

在Windows上部署 在idea中打開項目 首先我們需要準備一個Servlet項目&#xff0c;我之前的Servlet項目是用eclipse寫的&#xff0c;這種情況下如果用idea直接打開的話會出現左側目錄無法顯示的情況&#xff0c;這個時候我們就需要用別的方法打開 打開項目管理 如下圖&#…
閱讀更多...
安裝MySQL 5.7導入數據，修改密碼，創建賬號并授權

安裝MySQL 5.7導入數據，修改密碼，創建賬號并授權

1. 準備工作 sudo yum update -y sudo yum install -y wget libaio numactl 2. 下載 MySQL 5.7 二進制包 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.44-linux-glibc2.12-x86_64.tar.gz 3. 創建 MySQL 用戶和組 sudo groupadd mysql sudo useradd -r -g m…
閱讀更多...
基礎RAG實現，最佳入門選擇（八）

基礎RAG實現，最佳入門選擇（八）

RAG重排序 RAG重排序技術以提高RAG系統中的檢索質量。重新排序充當初始檢索后的第二個過濾步驟&#xff0c;以確保最相關的內容用于響應生成。 重排序的關鍵概念 1.初始檢索&#xff1a;使用基本相似度搜索的第一遍&#xff08;準確度較低但速度更快&#xff09; 2.文檔評分…
閱讀更多...
Spring Boot 常用注解整理

Spring Boot 常用注解整理

Spring & Spring Boot 常用注解整理 現代的 Spring 與 Spring Boot 應用大量使用注解來簡化配置、管理組件和實現各種框架功能。本文系統整理了常用的 Spring/Spring Boot 注解&#xff0c;按照功能分類進行介紹。每個注解都會涵蓋其含義、提供來源、應用場景以及代碼示例…
閱讀更多...
最新文章

Copyright @ 2022~2023