微信小程序81~90-EW帮帮网

1. 配置分包加载以及打包、引用原则

小程序如果需要进行分包加载，需要在 app.json 中，通过 subPackages 或者 subpackages 定义分包结构

每个分包结构含三个常用字段：

root：分包的根目录，该目录下的所有文件都会被打包成一个独立的包
name：分包的别名，用于在代码中引用该分包
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. 获取微信头像

想使用微信提供的头像填写能力：

将button组件open-type的值设置为chooseAvatar
通过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.datail
        this.setData({
            avatarUrl
        })
    }
})

5.获取微信昵称

想使用微信提供的昵称填写能力，需要三步：

通过 form 组件中包裹住 input 以及 form-type 为 submit 的 button 组件
需要将 input 组件 type 的值设置为 nickname，当用户输入框输入时，键盘上方会展示微信昵称
给 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.分享到朋友圈

要满足两个条件：

页面必须设置允许“发送给朋友”,页面.js文件声明onShareAppMessage事件监听函数
页面必须设置允许“分享到朋友圈”,页面.js文件声明onShareTimeline事件监听函数

8. 手机号验证组件

手机号验证组件分为两种：手机号快速验证组件以及手机号实时验证组件

手机号快速验证组件：平台会对号码进行验证，但不保证是实时验证

// 在event.detail中可以获取到code，code是动态令牌，用来换区用户的手机号，需要将code发送给后端，后端接收后调用API，换区用户真正的手机号，再返回给前端
<button open - type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">

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

<button open - type="getRealtimePhoneNumber"
bindgetrealtimephonenumber="getrealtimephonenumber" />

注意事项：
目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）
两种验证方式要付费使用，有1000次的免费额度

9. 客服功能

使用方式：

需要将button组件open-type的值设置为contact，当用户点击就会进入客服会话
在微信公众后台，绑定后的客服账号，可以登录网页端客服获移动端小程序客服接收，发送客服消息

10.框架接口-getApp()

通过getApp() 方法获取到小程序全局唯一的App实例
所以在getApp()中添加全局共享的数据、方法，从而实现页面、组件的数据传值

注意事项：

不要在App()方法中使用getApp(), 使用this就可以拿到app实例

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

微信小程序81~90