微信小程序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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈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;深入剖析…