joson-Li

day05-微信小程序-npm-mobx-miniprogram(全局数据共享)-分包

使用npm包

限制

不支持依赖于 Node.js 内置库的包
不支持依赖于浏览器内置对象的包
不支持依赖于 C++ 插件的包

如何找包

(1)方式1- 在npm网站,以wx或者mp开头来搜索,egwx axios或者mp axios

(2)方式2-以awesome wx或者awesome mp到github搜索

第一次使用npm包

(1) 生成package.json

npm init -y

(2) 通过 npm 安装包

npm i @vant/[email protected] -S --production

(3) 构建npm包

点击工具->构建npm

(4)使用npm包

点击详情->本地设置勾选使用npm模块

(5)测试安装是否成功
(5.1) 修改app.json

去除style属性,不去除会导致部分组件样式混乱

(5.2) 使用vant组件

// 在app.json文件中
"usingComponents": {
	"van-button": "@vant/weapp/button/index"
}


<van-button type="primary">按钮van-button>

(5.3)修改全局主题样式

/* 在app.wxss中 */
page: {
    /* 定制警告按钮的背景颜色 和边框颜色*/
    --button-danger-background-color: #c00000;
    --button-danger-border-color: #d60000;
}

第二次使用npm包

(1) 通过npm安装包

npm i moment

(2) 构建npm包

点击工具->构建npm

(3) 测试安装是否成功

在app.js中

{
	onLoad: function (options) {
        const moment = require('moment')
    	console.log(moment().format('YYYY-MM-DD hh:mm:ss'))
    }
}

如果构建失败,怎么办?

自己构建包

(1) 在utils文件夹下新建moment.js
(2) 在bootcdn网站找moment的代码,复制到utils/moment.js中

文件地址:https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js
(3)测试执行

在app.js中

{
	onLoad: function (options) {
        const moment = require('./utils/moment.js')
    	console.log(moment().format('YYYY-MM-DD hh:mm:ss'))
    }
}

API Promise化

1.安装构建

下载完成，我们不能直接使用，而是需要再次重新构建npm包
建议在构建前先删除原有的miniprogram_npm
然后再点击工具，构建npm

npm i --save [email protected]

2.导入并执行代码

// 在小程序入口文件中（app.js),只需要调用一次 promisifyAll()方法
// 即可实现异步API 的Promise化
// 按需导入一个方法
import { promisifyAll } from 'miniprogram-api-promise'
// 声明一个常量，为一个空对象，
// 并在wx顶级对象下添加一个属性p也指向该空对象，使所有成员都可以使用该对象
const wxp = {}
// promisifyAll做的事就是将 wx 拥有的属性方法都copy并改造了一份给了 wxp 这个对象
// 参数1： wx顶级对象
// 参数2： wxp指向一个空对象
promisifyAll(wx, wxp)
// 此时 wx.p 发起异步的请求时，得到的是一个 promise 对象
wx.p = wxps

3.使用`promise api`

//在页面中使用promise api/*原来写法:getInfo() {    wx.request({        method: 'GET',        url: 'https://www.escook.cn/api/get',        data: {            name: 'zs',            age: 20        },        // 请求成功的回调        success: (res) => {          console.log(res.data)              }       })},*/async getInfo() {    const {data: res} = await wx.p.request({        method: 'GET',        url: 'https://www.escook.cn/api/get',        data: {            name: 'zs',            age: 20        }    })    console.log(res)},

全局数据共享

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中：

mobx-miniprogram用来创建 Store 实例对象 mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

1.安装`MobX`

MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm

npm install --save [email protected] [email protected]

2.创建 `MobX` 的 `Store` 实例

在项目根目录下新建store文件夹，并且新建 store.js 文件

// 按需导入第三方包的方法observable, actionimport { observable, action } from 'mobx-miniprogram'// 创建 Store实例对象,并将其导出export const store = observable({    // 数据字段state    numA: 1,    numB: 2,    // 计算属性getters    // 在计算属性的方法前，必须加 get修饰符，代表sum的值是只读的，无法进行修改    // 计算属性sum 依赖于numA和numB的值，因此sum函数的返回值就是最终的值    get sum() {    	return this.numA + this.numB    },    // 定义actions方法, 用来修改 store中的数据    updateNum1: action(function (step) {    	this.numA += step    }),    updateNum2: action(function(step) {    	this.numB += step    })})

3.使用将 Store 中的成员

3.1在页面中使用

// 页面的 js 文件中// 1.首先 导入第三方包，将数据绑定到页面import { createStoreBindings } from 'mobx-miniprogram-bindings'// 2.其次 在页面的js文件的头部区域导入容器的数据import { store } from '../../store/store'Page({    // 上面周期函数--监听页面的加载    onLoad: function() {        // 3. 绑定操作：将仓库的东西绑定到当前的页面中，在页面的js文件的Page方法中        // 调用createStoreBindings方法,map映射        // 参数1： 绑定给谁：当前页面this        // 参数2： 对象{ store(容器)， fields(数据)， actions(修改方法)        this.storeBindings = createStoreBindings(this, {            // 映射容器的实例            store,            // 映射容器的数据字段,通过this.data.numA进行访问            fields: ['numA', 'numB', 'sum'],            // 映射容器修改的方法,通过this.updateNum1()            actions: ['updateNum1']        })    },    // 生命周期函数--监听页面的卸载    onUnload: function () {        // 4.使用this.storeBindings，得到调用createStoreBindings方法的返回值        //调用destroyStoreBindings 方法，进行清理销毁的工作        this.storeBindings.destroyStoreBindings()    },    // 页面的js文件中的 tap事件处理函数    btnHnadler1 (e) {        console.log(e)        // 使用仓库中的方法，并传递数据        this.updateNum1(100)    }})

<view>{{numA}} + {{numB}} = {{sum}}view><van-button type="primary" bindtap="btnHnadler1">numA+1van-button>

3.2在组件当中使用

// 在组件的 js 文件// 1. 按需导入容器成员// 2. 在组件的behaviors节点 实现自动绑定import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'import { store } from '../../store/store'Component({    // 3.通过storeBindingsBehavior 来实现自动绑定    behaviors: [storeBindingsBehavior],    // 4. 在storeBindings节点指定要绑定的store和要绑定的数据以及方法    storeBindings: {        store, // 指定要绑定的store,map数据        fields: { // 指定要绑定的数据字段或计算属性            numA: () => store.numA, // 绑定字段的方式1：            numB: store => store.numB, // 绑定字段的方式2            sum: 'sum' // 绑定字段的方式3        },        // fields: ['numA', 'numB', 'sum']        actions: { // 指定要绑定的方法            updateNum2: 'updateNum2'        }    },    methods: {        btnHnadler2(e) {            // 直接使用this调用仓库中的方法            this.updateNum2(20)        }	}})// 注意： fields中前面是在组件中的名称，可自定义，后面是容器中的名称，必须和仓库一致

<view>{{numA}} + {{numB}} = {{sum}}view><van-button type="primary" bindtap="btnHnadler2">numB+1van-button>

分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

组成部分

分包后，小程序项目由 1 个主包 + 多个分包组成：

主包：一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
分包：只包含和当前分包有关的页面和私有资源

加载规则

在小程序启动时，默认会下载主包并启动主包内页面,tabBar 页面需要放到主包中
当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示

普通分包

// 在app.json中// 主包// (1)tabBar 页面必须在主包内// (2)主包无法引用分包内的私有资源"pages": [    "pages/home/home",    "pages/message/message",    "pages/contact/contact"],// 普通分包,小程序会按 subpackages 的配置进行分包， subpackages 之外的目录将被打包到主包中// (1)目录结构://		pkgA/pages/cat/cat//		pkgA/pages/dog/dog// (2)分包之间不能互相嵌套// (3)分包之间不能相互引用私有资源// (4)分包可以引用主包内的公共资源"subpackages": [    {        "root": "pkgA",        "name": "p1",        "pages": [            "pages/cat/cat",            "pages/dog/dog"        ]    }],

注意:如果存在,报错["subPackages"][0]["root"] 字段需为目录,关闭当前项目,再打开项目

独立分包

// 在app.json中// 独立分包// (1)目录结构://		pkgB/pages/apple/apple// (1)独立分包可以在不下载主包的情况下，独立运行        // (3)独立分包不能引用主包和其他分包的资源   "subpackages": [    {        "root": "pkgA",        "name": "p1",        "pages": [            "pages/cat/cat",            "pages/dog/dog"        ]    },    {        "root": "pkgB",        "name": "p2",        "pages": [            "pages/apple/apple"        ],          "independent": true //配置独立分包    }],

分包预加载

分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度

// 分包预下载的规则"preloadRule": {    // 触发分包预下载的页面路径    "page/concact/concact": {        // network 表示在指定的网络模式下进行预下载        // 可选值有： all(不限网络)和wifi(仅 wifi 模式下进行预下载)        // 默认值为： wifi        "network": "all",        // packages 表示进入页面后， 预下载哪些分包        // 可以通过root 或name 指定预下载哪些分包        "packages": ["pkgA"]    }}

自定义tabbar

1.全局配置

在app.json中

{    "tabBar": {        // 指定 custom 字段        "custom": true,        // 为了保证低版本兼容以及区分哪些页面是 tab 页， tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。        "list": [          {            "pagePath": "pages/home/home",            "text": "首页",            "iconPath": "/images/tabs/home.png",            "selectedIconPath": "/images/tabs/home-active.png"          },          {            "pagePath": "pages/message/message",            "text": "消息",            "iconPath": "/images/tabs/message.png",            "selectedIconPath": "/images/tabs/message-active.png"          },          {            "pagePath": "pages/contact/contact",            "text": "联系我们",            "iconPath": "/images/tabs/contact.png",            "selectedIconPath": "/images/tabs/contact-active.png"          }        ]   }}

2.创建组件

在项目根目录下创建custom-tab-bar文件夹, 并创建index组件

注意: 文件夹的名称和组件的名称都不能改

3.定义Store

在store\store.js中

import { observable, action } from 'mobx-miniprogram'export const store = observable({  //激活的tabbar索引值  activeTabBarIndex: 0,  //修改tabbar索引值的action  updateActiveTabBarIndex: action(function(index) {    this.activeTabBarIndex = index  })})

4.引用vant组件