微信小程序81~90

1. 配置分包加載以及打包、引用原則

小程序如果需要進行分包加載,需要在 app.json 中,通過 subPackages 或者 subpackages 定義分包結構

每個分包結構含三個常用字段:

  1. root:分包的根目錄,該目錄下的所有文件都會被打包成一個獨立的包
  2. name:分包的別名,用于在代碼中引用該分包
  3. pages:指定當前分包中包含哪些頁面
<!-- 如果需要跳轉到分包頁面,需要在路徑之前加上分包的根目錄路徑 root 路徑才行 -->
<navigator url="/modules/goodModules/pages/list/list">跳轉到商品列表頁面</navigator>"subPackages": [{"root": "modules/goodModules","name": "goodModules","pages": ["pages/list/list","pages/datail/detail"]}]

打包原則

tabbar頁面必須在主包內
最外層的pages字段,屬于主包的包含的頁面
按subpackages配置路徑進行打包,配置路徑外的目錄將被打包到主包中
分包之間不能相互嵌套,subpackage的根目錄不能是另外一個subpackage內的子目錄

引用原則

主包不可以引用分包的資源,但分包可以使用主包的公共資源
分包與分包之間資源無法相互引用,分包異步化時不受限制

2. 獨立分包的裝置

獨立分包:指能夠獨立于主包和其他分包運行的包

當給subpackages定義的分包結構添加independent字段,即可聲明對應分包為獨立分包

從獨立分包中頁面進入小程序時,不用下載主包,當用戶進入普通分包或主包內頁面時,主包才會被下載。開發者可以將功能相對獨立的頁面配置到獨立分包中,因為獨立分包不依賴主包就能運行,使得分包頁面啟動速度更快。

{"root": "modules/marketModules","name":"marketModules","pages": ["pages/market/market"],"independent": true}

注意事項:
(1)獨立分包中不能依賴主包和其他分包中的資源
(2)主包中的app.wxss對獨立分包無效
(3)App只能在主包內定義,獨立分包中不能定義App,會造成嚴重的后果

3. 分包預下載

訪問小程序頁面時,預先下載其他分包中的代碼和資源,提高用戶體驗

要在app.json中通過preloadRule字段設置預下載規則

"preloadRule": {"pages/index/index": {"network": "all","packages": ["modules/goodModules"]},"modules/marketModules/pages/market/market": {"network": "all","packages": ["__APP__"]}}

在這里插入圖片描述

4. 獲取微信頭像

想使用微信提供的頭像填寫能力:

  1. 將button組件open-type的值設置為chooseAvatar
  2. 通過bindchooseavatar事件回調獲取到頭像信息的臨時路徑
// wxml
<view><button class="btn" open-type="chooseAvatar" bindchooseavatar="chooseAvatar"><image class="avatar" src="{{ avatarUrl }}" mode=""/></button>
</view>// index.js
Page({data: {avatarUrl: '../../'},// 獲取微信頭像chooseAvatar(event) {const { avatarUrl }  = event.datailthis.setData({avatarUrl})}
})
5.獲取微信昵稱

想使用微信提供的昵稱填寫能力,需要三步:

  1. 通過 form 組件中包裹住 input 以及 form-type 為 submit 的 button 組件
  2. 需要將 input 組件 type 的值設置為 nickname,當用戶輸入框輸入時,鍵盤上方會展示微信昵稱
  3. 給 form 綁定 submit 事件,在事件處理函數中通過事件對象獲取用戶昵稱
<form bindsubmit="onSubmit"><input type="nickname" name="nickname" placeholder="請輸入昵稱"/><button type="primary" plain form-type="submit">點擊獲取昵稱</button>
</form>onSubmit (event) {console.log(event.datail.value);}
6.轉發功能

幫助用戶流暢的與好友分享內容和服務
方式一:
頁面.js必須聲明onShareAppMessage事件監聽函數,并自定義轉發內容。只有定義了此事件處理函數,右上角菜單才會顯示“轉發”按鈕
方式二:
通過給button組件設置屬性open-type=“share”,可以在用戶點擊按鈕后觸發Page.onShareAppMessage事件監聽函數

如果通過按鈕轉發就有值,如果通過右上角三個點轉發就是undefined

onShareAppMessage (obj) {return {title: '這是一個非常神奇的畫面',path: '/miniprogram/pages/index/index.js',imageUrl: '../../assets/易烊千璽.jpg'}}
7.分享到朋友圈

要滿足兩個條件:

  1. 頁面必須設置允許“發送給朋友”,頁面.js文件聲明onShareAppMessage事件監聽函數
  2. 頁面必須設置允許“分享到朋友圈”,頁面.js文件聲明onShareTimeline事件監聽函數
    在這里插入圖片描述
8. 手機號驗證組件

手機號驗證組件分為兩種:手機號快速驗證組件 以及 手機號實時驗證組件

  1. 手機號快速驗證組件:平臺會對號碼進行驗證,但不保證是實時驗證
// 在event.detail中可以獲取到code,code是動態令牌,用來換區用戶的手機號,需要將code發送給后端,后端接收后調用API,換區用戶真正的手機號,再返回給前端
<button open - type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
  1. 手機號實時驗證組件:在每次請求時,平臺均會對用戶選擇的手機號進行實時驗證。
<button open - type="getRealtimePhoneNumber"
bindgetrealtimephonenumber="getrealtimephonenumber" />

注意事項:
目前該接口針對非個人開發者,且完成了認證的小程序開放(不包含海外主體)
兩種驗證方式要付費使用,有1000次的免費額度

9. 客服功能

使用方式:

  1. 需要將button組件open-type的值設置為contact,當用戶點擊就會進入客服會話
  2. 在微信公眾后臺,綁定后的客服賬號,可以登錄網頁端客服獲移動端小程序 客服接收,發送客服消息
10.框架接口-getApp()

通過getApp() 方法獲取到小程序全局唯一的App實例
所以在getApp()中添加全局共享的數據、方法,從而實現頁面、組件的數據傳值

注意事項:

  1. 不要在App()方法中使用getApp(), 使用this就可以拿到app實例
  2. 通過getApp()獲取實例后,不要私自調用生命周期函數
// app.js
const appInstance = getApp()
App({// 全局共享的數據globalData: {token: ''},// 全局共享的方法setToken(token) {this.globalData.token = token}
})<button bind:tap="login">登錄</button>// pages/profile/profile.js
const appInstance = getApp()
Page({login () {appInstance.setToken('ncjdcbhwerbcj')}})

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

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

相關文章

深度學習——神經網絡1

一、神經網絡 1.神經網絡定義&#xff1a;人工神經網絡&#xff08;Artificial Neural Network&#xff0c;ANN&#xff09;也簡稱為神經網絡&#xff08;NN&#xff09;&#xff0c;是一種模仿生物神經網絡結構和功能的計算模型。人腦可以看作是一個生物神經網絡&#xff0c;由…

ipmitool 使用簡介(ipmitool sel list ipmitool sensor list)

常用IPMI命令擴展使用ipmitool查看傳感器信息ipmitool是一個用于管理IPMI&#xff08;Intelligent Platform Management Interface&#xff09;設備的命令行工具&#xff0c;可用于監控服務器硬件狀態&#xff0c;包括傳感器數據。運行以下命令可以列出所有傳感器信息&#xff…

小米YU7預售現象深度解析:智能電動汽車的下一個范式革命

小米YU7預售現象深度解析&#xff1a;智能電動汽車的下一個范式革命一、預售數據創造三項行業新紀錄 2025年6月26日的小米YU7發布會&#xff0c;不僅刷新了智能汽車預售速度&#xff0c;更揭示了新時代的消費心理變遷&#xff1a; &#xff08;1&#xff09;訂單爆發速度史無前…

xlog-Android15適配之16KB對齊

背景 前兩天查看Google play控制臺突然發現有告警&#xff0c;一看原來是要求必須盡快適配Android15。 過程 先看了一下網上的資料&#xff0c;Android15適配 發現對我的apk基本上沒有什么影響&#xff0c;除了 動態庫必須16KB對齊這一項。 最簡單查看apk是否16KB對齊的方法…

Crazyflie支持MATLAB/Simulink控制 基于NOKOV度量動捕系統實現

Crazyflie支持MATLABSimulink控制 基于NOKOV度量動捕系統實現 一、動捕軟件VRPN配置 以動捕軟件版本XINGYING 4.2.0.5495為例&#xff0c;其他版本同理。打開動捕軟件&#xff0c;連接上鏡頭。單擊菜單欄下的視圖->數據廣播。在數據廣播中的VRPN流下&#xff0c;將單位下拉…

Windows 系統安裝與使用 Claude Code 全攻略

Claude Code 作為一款高效的 AI 編程輔助工具&#xff0c;深受開發者青睞&#xff0c;但由于其本身不支持 Windows 文件系統&#xff0c;在 Windows 系統上使用需要借助 WSL&#xff08;適用于 Linux 的 Windows 子系統&#xff09;。下面為你詳細介紹在 Windows 系統上安裝和使…

如何用Python編程計算權重?

1. 加權平均中的權重計算&#xff08;已知權重值&#xff09; 如果已知各元素的權重&#xff0c;直接用權重乘以對應值后求和。 # 示例&#xff1a;計算加權平均分&#xff08;權重之和為1&#xff09; scores [80, 90, 70] # 各項分數 weights [0.3, 0.5, 0.2] # 對應權重…

WinUI3入門16:Order自定義排序

初級代碼游戲的專欄介紹與文章目錄-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代碼都將會位于ctfc庫中。已經放入庫中我會指出在庫中的位置。 這些代碼大部分以Linux為目標但部分代碼是純C的&#xff0c;可以在任何平臺上使用。 源碼指引&#xff1a;github源…

Java 面向對象三大特性詳解:封裝、繼承與多態,掌握OOP核心思想

作為一名Java開發工程師&#xff0c;你一定知道&#xff0c;封裝&#xff08;Encapsulation&#xff09;、繼承&#xff08;Inheritance&#xff09;和多態&#xff08;Polymorphism&#xff09; 是面向對象編程&#xff08;Object-Oriented Programming, OOP&#xff09;的三大…

WPS中配置MathType教程

項目場景&#xff1a;在WPS中使用MathType問題描述&#xff1a;MathPage.wll或MathType.dll文件找不到問題原因分析&#xff1a;在C盤wps中的startup中有mathpage.wll,但配置不可用而我的WPS安裝在E盤&#xff0c;并且桌面圖標啟動路徑也是E盤路徑下的WPS路徑&#xff0c;所以不…

基于模板設計模式開發優惠券推送功能以及對過期優惠卷進行定時清理

1.模板設計模式&#xff1a;模板設計模式是一種常見的設計模式&#xff0c;主要作用是對 具體操作的 共有代碼塊進行提取&#xff0c;提升代碼復用性。那么說道代碼復用性&#xff0c;首先想到的是抽象類而不是接口。因為抽象類的本質就是為了代碼復用&#xff0c;抽象類既可以…

對象的finalization機制Test1

Java語言提供了對象終止(finalization)機制來允許開發人員自定義對象被銷毀之前的處理邏輯。當垃圾回收器發現沒有引用指向一個對象時&#xff0c;通常接下來要做的就是垃圾回收&#xff0c;即清除該對象&#xff0c;而finalization機制使得在清除此對象之前&#xff0c;總會先…

RJ45 連接器(水晶頭)的引腳定義

RJ45連接器核心定義 【】物理結構 8個金屬觸點&#xff08;Pin 1至Pin 8&#xff09;的透明塑料插頭&#xff0c;帶塑料卡榫。 引腳編號規則 卡榫朝下&#xff0c;金屬觸點面向自己時&#xff1a; 最左側為 Pin 1 最右側為 Pin 8 順序&#xff1a;Pin 1 → Pin 2 → Pin 3 → P…

小架構step系列08:logback.xml的配置

1 概述 logback.xml配置文件的詳細配置&#xff0c;很多地方都說得比較細&#xff0c;本文主要從幾個重點來看一下原理&#xff0c;了解原理能夠幫助確定哪些應該配置&#xff0c;以及如何配置。 logback.xml是為打印日志服務的&#xff0c;打印的內容一般打印到控制臺(Conso…

STM32中SPI協議詳解

前言 在嵌入式系統中&#xff0c;設備間的數據傳輸協議多種多樣&#xff0c;SPI&#xff08;Serial Peripheral Interface&#xff0c;串行外設接口&#xff09;憑借其高速、全雙工、易用性等特點&#xff0c;成為連接STM32與高速外設&#xff08;如OLED屏、Flash芯片、AD轉換器…

TypeScript 接口全解析:從基礎到高級應用

TypeScript 接口全解析&#xff1a;從基礎到高級應用在 TypeScript 中&#xff0c;接口是定義數據結構和行為規范的強大工具&#xff0c;它能夠顯著提升代碼的可讀性、可維護性和類型安全性。本文將全面講解 TypeScript 接口的相關知識點&#xff0c;從基礎語法到高級特性&…

主存(DRAM)是什么?

主存&#xff08;DRAM&#xff09;是什么&#xff1f; 主存&#xff08;DRAM&#xff09;詳解 主存&#xff08;Main Memory&#xff09; 通常由 DRAM&#xff08;Dynamic Random Access Memory&#xff0c;動態隨機存取存儲器&#xff09; 構成&#xff0c;是計算機系統中用于…

Python 機器學習核心入門與實戰進階 Day 6 - 模型保存與加載(joblib / pickle)

? 今日目標 掌握如何將訓練好的模型持久化保存到文件熟悉兩種主流保存方式&#xff1a;joblib 和 pickle加載模型并應用于新數據預測實現完整的“訓練 → 保存 → 加載 → 預測”流程為后續部署做準備&#xff08;如 Flask、FastAPI&#xff09;&#x1f9f0; 一、模型保存工具…

【SigNoz部署安裝】Ubuntu環境部署SigNoz:Docker容器化監控的全流程指南

文章目錄前言1.關于SigNoz2.本地部署SigNoz3.SigNoz簡單使用4. 安裝內網穿透5.配置SigNoz公網地址6. 配置固定公網地址前言 在分布式架構主導的現代運維體系中&#xff0c;系統性能監控正面臨范式變革的關鍵轉折。當微服務架構遭遇服務雪崩、無服務器架構出現冷啟動延遲等復雜…

NV298NV312美光固態閃存NW639NW640

美光固態閃存技術全景解析&#xff1a;從NV298到NW640的深度探索近年來&#xff0c;美光科技憑借其在3D NAND閃存技術上的持續突破&#xff0c;推出了多款備受市場關注的固態硬盤產品。本文將從技術評測、產品對比、市場趨勢、用戶反饋及應用場景等多個維度&#xff0c;深入剖析…