27微信小程序开发5

使用npm包：
    小程序对npm的支持与限制：
        目前，小程序已经支持使用npm安装第三方包，从而提高小程序的开发效率，但是，在小程序中使用
        npm包有如下3个限制：
        1 不支持依赖于Node.js内置库的包
        2 不支持依赖于浏览器内置对象的包
        3 不支持依赖于C++插件的包

使用npm包-Vant Weapp：
    什么是Vant Weapp：
        Vant Weapp是有赞前端团队开发的一套小程序UI组件库，助力开发者快速搭建小程序应用，它所使用的是
        MIT开源许可协议，对商业使用比较友好
        官方文档地址：https://youzan.github.io/vant-weapp
    安装Vant组件库：
        在小程序项目中，安装Vant组件库主要分为如下3步：
            1 通过npm安装npm i @vant/weapp -S --production
            2 构建npm包
            3 修改app.json
    使用Vant组件：
        安装完Vant组件库之后，可以在app.json的usingComponents节点中引入需要的组件，即可在wxml中
        直接使用组件，示例代码如下：
        "usingComponents": {
          "van-button":"@vant/weapp/button/index"
        }
        按钮
    定制全局主题样式：
        在app.wxss中，写入css变量，即可对全局生效：
        page{
            /* 定制警告按钮的背景颜色和边框颜色 */
            --button-danger-background-color:#C00000;
            --button-danger-border-color:#D60000;
        }

使用npm包-API Promise化：
    基于回调函数的异步API的缺点：
        默认情况下，小程序官方提供的异步API都是基于回调函数实现的，例如，网络请求的API需要按照如下的方式调用：
        wx.request({
            method:'',
            url:'',
            data:{},
            success:()=>{}, // 请求成功的回调函数
            fail:()=>{}, // 请求失败的回调函数
            complete:()=>{} // 请求完成的回调函数
        })
    什么是API Promise化：
        API Promise化，指的是通过额外的配置，将官方提供的。基于回调函数的异步API，升级改造为基于
        Promise的异步API，从而提高代码的可读性、维护性，避免回调地狱的问题
    实现API Promise化：
        在小程序中，实现API Promise化主要依赖于miniprogram-api-promise这个第三方的npm包，它的安装
        和使用步骤如下：
        npm install --save [email protected]
        // 在小程序入口文件中(app.js)，只需调用一次promisifyAll()方法
        // 即刻实现异步API的Promise化
        import {promisifyAll} from 'miniprogram-api-promise'
        const wxp=wx.p={}
        promisifyAll(wx,wxp)
    调用Promise化之后的异步API：
        async getInfo(){
            const {data:res}=await wx.p.request({
                method:"GET",
                url:"https://www.escook.cn/api/get",
                data:{name:'zs',age:100}
            })
            console.log(res)
        },
        vant按钮

全局数据共享：
    什么是全局数据共享：
        全局数据共享(又叫做：状态管理)是为了解决组件之间数据共享的问题
        开发中常用的全局数据共享方案有：Vuex、Redux、MobX等
    小程序中的全局数据共享方案：
        在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享，其中：
        mobx-miniprogram用来创建Store实例对象
        mobx-miniprogram-bindings用来把Store中的共享数据或方法，绑定到组件或页面中使用

全局数据共享-MobX：
    安装MobX相关的包：
        在项目中运行如下的命令，安装MobX相关的包：
        npm install --save [email protected] [email protected]
        注意：MobX相关的包安装完毕之后，记得删除miniprogram_npm目录后，重新构建npm
    创建MobX的Store实例：
        import {observable,action} from 'mobx-miniprogram'
        export const store = observable({
            // 数据字段
            numA:1,
            numB:2,
            // 计算属性
            get sum(){return this.numA+this.numB},
            // actions方法，用来修改store中的数据
            updateNum1:action(function(step){
                this.numA+=step
            }),
            updateNum2:action(function(step){
                this.numB+=step
            }),
        })
    将Store中的成员绑定到页面中：
        // 页面的.js文件
        import {createStoreBindings} from 'mobx-miniprogram-bindings'
        import {store} from '../../store/store'
        Page({
            onLoad:function(){  // 生命周期函数--监听页面加载
                this.storeBindings=createStoreBindings(this,{
                    store,
                    fields:['numA','numB','sum'],
                    actions:['updateNum1']
                })
            },
            onUnload:function(){    // 生命周期函数--监听页面卸载
                this.storeBindings.destoyStoreBindings()
            }
        })
    在页面上使用Store中的成员：
        // 页面的.wxml结构
        {{numA}}+{{numB}}={{sum}}
        numA+1
        numA-1
        // 按钮tap事件的处理函数
        btnHandler1(e){this.updateNum1(e.target.dataset.step)}
    将Store中的成员绑定到组件中：
        import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
        import {store} from '../../store/store'
        Component({
            behaviors:[storeBindingsBehavior],  // 通过storeBindingsBehavior来实现自动绑定
            storeBindings:{
                store,  // 指定要绑定的Store
                fields:{    // 指定要绑定的字段数据
                    numA:()=>store.numA,    // 绑定字段的第1种方式
                    numB:(store)=>store.numB,  // 绑定字段的第2种方式
                    sum:'sum'   // 绑定字段的第3种方式
                },
                actions:{   // 指定要绑定的方法
                    updateNum2:'updateNum2'
                }
            }
        })
    在组件中使用Store中的成员：
        // 组件的.wxml结构
        {{numA}}+{{numB}}={{sum}}
        numB+1
        numB-1
        // 组件的方法列表
        methods:{
            btnHandler2(e){this.updateNum2(e.target.dataset.step)}
        }

分包-基础概念：
    什么是分包：
        分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载
    分包的好处：
        对小程序进行分包的好处主要有以下两点：
        可以优化小程序首次启动的下载时间
        在多团队共同开发时可以更好的解耦协作
    分包前项目的构成：
        分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间
    分包后项目的构成：
        分包后，小程序项目由1个主包+多个分包组成：
        主包：一般只包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公共资源
        分包：只包含和当前分包有关的页面和私有资源
    分包的加载规则：
        在小程序启动时，默认会下载主包并启动主包内页面
            tabBar页面需要放到主包中
        当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示
            非tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载
    分包的体积限制：
        目前，小程序分包的大小有以下两个限制：
        整个小程序所有分包大小不超过16M(主包+所有分包)
        单个分包/主包大小不能超过2M

分包-使用分包：
    配置方法：
        小程序的目录结构
        app.js  app.json  app.wxss  pages(主包的所有页面)  packageA(第一个分包)        packageA(第二个分包)  utils
                                      index  logs           pages(分包的所有页面)      pages
                                                           cat  dog                 apple  banana
        在app.json的subpackages节点中声明分包的结构
        {
            "pages":[   // 主包的所有页面
                "pages/index",
                "pages/logs"
            ],
            "subpackages":[ // 通过subpackages节点，声明分包的结构
                {
                    "root":"packageA",  // 第一个分包的根目录
                    "pages":[   // 当前分包下，所有页面的相对存放路径
                        "pages/cat",
                        "pages/dog"
                    ]
                },{
                    "root":"packageB",  // 第二个分包的根目录
                    "name":"pack2", // 分包的别名
                    "pages":[   // 当前分包下，所有页面的相对存放路径
                        "pages/apple",
                        "pages/banana"
                    ]
                },
            ]
        }
    打包原则：
        1 小程序会按subpackages的配置进行分包，subpackages之外的目录将被打包到主包中
        2 主包也可以有自己的pages(即最外层的pages字段)
        3 tabBar页面必须在主包内
        4 分包之间不能互相嵌套
    引用原则：
        1 主包无法引用分包内的私有资源
        2 分包之间不能相互引用私有资源
        3 分包可以引用主包内的公共资源

分包-独立分包：
    什么是独立分包：
        独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行
    独立分包和普通分包的区别：
        最主要的区别：是否依赖于主包才能运行
        普通分包必须依赖于主包才能运行
        独立分包可以在不下载主包的情况下，独立运行
    独立分包的应用场景：
        开发者可以按需，将某些具有一定功能性的页面配置到独立分包中，原因如下：
        当小程序从普通的分包页面启动时，需要首先下载主包
        而独立分包不依赖于主包即可运行，可以很大程度上提升分包页面的启动速度
        注意：一个小程序中可以有多个独立分包
    独立分包的配置方法：
        小程序的目录结构
        app.js  app.json  app.wxss  pages(主包的所有页面)  moduleA(普通分包)  muduleB(独立分包)  urils
                                        index  logs         pages           pages
                                                        rabbit  squirrel  pear  pineapple
        通过independent声明独立分包
        {
            "pages":[
                "pages/index",
                "pages/logs"
            ],
            "subpackages":[
                {
                    "root":"moduleA",   // moduleA为普通分包
                    "pages":[
                        "pages/rabbit",
                        "pages/squirrel"
                    ]
                },{
                    "root":"moduleB",
                    "pages":[
                        "pages/pear",
                        "pages/pineapple"
                    ],
                    "independent":true  // 通过此节点，声明当前moduleB分包为”独立分包“
                }
            ]
        }
    引用原则：
        独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源，例如：
        1 主包无法引用独立分包内的私有资源
        2 独立分包之间，不能相互引用私有资源
        3 独立分包和普通分包之间，不能相互引用私有资源
        4 特别注意：独立分包中不能引用主包内的公共资源

分包-分包预下载：
    什么是分包预下载：
        分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包
        页面时的启动速度
    配置分包的预下载：
        预下载分包的行为，会在进入指定的页面时触发，在app.json中，使用preloadRule节点定义分包的预下载
        规则，示例代码如下：
        {
            "preloadRule":{ // 分包预下载的规则
                "pages/contact/contact":{   // 触发分包预下载的页面路径
                    // network表示在指定的网络模式下进行预下载
                    // 可选值为：all(不限网络)和wifi(仅wifi模式下进行预下载)
                    // 默认值为：wifi
                    "network":"all",
                    // packages表示进入页面后，预下载哪些分包
                    // 可以通过root和name指定预下载哪些分包
                    "packages":["pkgA"]
                }
            }
        }
    分包预下载的限制：
        同一个分包中的页面享有共同的预下载大小限额2M