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

2. 手机号实时验证组件：在每次请求时，平台均会对用户选择的手机号进行实时验证。

<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')}})