在小程序使用vant

  • 小程序初始是没有packback.json文件
  • 使用
npm init --y
// 初始化packback.json
  • 安装 vant组件库
# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production
  • 构建npm

  • 删除app.json 中的 “style”:”v2”

使用 API Promise 化

  • 首先下载Promise 包
npm i --save miniprogram-api-promise
  • 构建npm，先前构建过最好先删掉
  • 在全局js中引入
// 按需导入
import { promisifyAll } from 'miniprogram-api-promose'

//声明一个常量，为一个空对象
//并在wx顶级对象下添加一个属性p也指向该空对象，使所有成员都可以使用该对象
const wxp = wx.p = {}

//promsift all wx`s api
// 参数1 ： wx 顶级对象
// 参数2 ： wxp 指向一个空对象
promisifyAll(wx,wxp)

promisifyAll : 做的事就是将 wx 拥有的属性方法都copy并改造了一份给了 wxp 这个对象

然而, wxp 只是当前 js 文件的一个常量，只能在当前文件使用

因此：我们在 wx 上挂载一个属性 p 让他和 wxp 指向同一个空对象

在其他页面或者组件就可以通过全局对象 wx 点出 p 来访问到 wxp

此时 wx.p 发起异步的请求时，得到的是一个 promise 对象

那么我们就可以使用 async/await 简化Promise语法

全局数据共享

全局数据共享 (状态管理) 是为了解决组件之间的数据共享问题

小程序中使用

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

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

安装

// 安装mobx-miniorogram 和 mobx-miniprogram-bindings
npm install --save mobx-miniorogram mobx-miniprogram-bindings
  • 注意事项，安装完毕记得重新构建npm

创建Mobx的Store实例

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

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

页面中使用

// 导入第三方包 ，将数据绑定到页面
import {createStoreBindings} from 'mobx-miniprogram-bindings'
// 在页面中的js文件导入容器的数据
import {store} from '../../store/store'
Page({
  /**
   * 页面的初始数据
   */
  data: {

  },
  updateHderl1(e){
    this.updateNum1(1)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  // 绑定事件，在当前页面绑定仓库
  //调用 createStoreBindings 方法
  // 参数1 ；要绑定给谁 当前的this
  // 参数2 ： 对象 ， store 容器 ，fields数据，actions修改方法
    this.storeBindings = createStoreBindings(this,{
    // 映射容器的实例
      store,
      // 映射容器的数据字段
      fields:['numA','numB','sum'],
      // 映射容器的修改方法
      actions:['updateNum1']
    })
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    //使用this.storeBindings，得到调用createStoreBindings方法的返回值 
    // 调用 destroyStoreBindings 方法，进行清理销毁的工作
      this.createStoreBindings.destroyStoreBindings()
  },
})

3.2在组件中使用

组件的js文件

1. 按需导入容器成员 
2. 在组件的behaviors节点 实现自动绑定 
3. 在storeBindings节点指定要绑定的store和要绑定的数据以及方法
import{storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import{store} from '../../store/store'

Component({
  // 通过storeBindingsBehavior 来实现自动绑定
  behaviors:[storeBindingsBehavior]
  storeBindings:{
    store,//指定要绑定的store
    fields:{  //指定要绑定的数据字段或计算属性
      numA:()=> store.numA,
      numB:store =>store.numB,
      sum:'sum'
    },
     actions:{  //指定要绑定的方法
       updateNum2:'updateNum2'
     }
  }
})
注意： fields中前面是在组件中的名称，可自定义，后面是容器中的名称，必须和仓库一致

<!-- 组件的 .wxml结构 --> 
<view>{{numA}} + {{numB}} = {{sum}}</view> 
<van-button type="primary" bindtap="btnHnadler2">numB+1</van-button>
Compoonent({ 
    methods: { btnHnadler2(e) { 
    // 直接使用this调用仓库中的方法 
    this.updateNum2(20) 
      } 
     } 
   })

事件处理函数 btnHandler2

组件的wxml文件

4.分包

4.1.分包相关概念

1. 什么是分包

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

    可以优化小程序首次启动的下载时间

    在多团队共同开发时可以更好的解耦协作
3. 分包前项目的构成

    分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间。

4.2.使用分包

1. 配置方法、

    在 app.json 配置文件中, 新增 subpackages 的节点, 将希望放到分包的页面,写入 subpackages 数组的元素中.

{
  "pages":[  //主包的所有页面
     "pages/index",
     "pages/logs"
  ],
  "subpackages":[ //通过 subpackages 节点，声明分包的结构
      {
        "root":"packageA",//第一个分包的根目录
        "pages":[//当前分包下，所有页面的相对存放路径
          "pages/cat",
          "pages/dog"
        ]
      },{
        "root":"packageB",//第二个分包的根目录
        "name":"pack2",//分包的别名
        "pages":[ //当前分包下，所有页面的相对存放路径
          "pages/apple",
          "pages/banana"
        
        ]
      }
  ]
}
{
  //分包预下载的规则
  "preloadRule":{
      //触发分包预下载的页面路径
      "page/concact/concact":{
          //network表示在指定的网络模式下进行预下载
          //可选值有：all(不限网络)和wifi(仅WiFi模式下进行预下载)
          //，默认值为：WiFi
          "network":"all",
          //packages表示进入页面后，预下载那些分包
          //可以通过root或name指定预下载哪些分包
          "packages":["pkgA"]
      }
  }
}

  1. 分包预下载的限制

    同一个分包中的页面享有共同的预下载大小限额 2M ，例如：

  2. 打包原则

    ① 小程序会按 subpackages 的配置进行分包， subpackages 之外的目录将被打包到主包中

    ② 主包也可以有自己的 pages （即最外层的 pages 字段）

    ③ tabBar 页面必须在主包内

    ④ 分包之间不能互相嵌套

  3. 引用原则

    ① 主包无法引用分包内的私有资源

    ② 分包之间不能相互引用私有资源

    ③ 分包可以引用主包内的公共资源

4.3独立分包

  1. 什么是独立分包

    独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行

  2. 独立分包和普通分包的区别

    普通分包必须依赖于主包才能运行

    独立分包可以在不下载主包的情况下，独立运行

  3. 独立分包的配置方法

    和普通分包对比, 独立分包就是在 subpackages 数组的某个元素中, 配置independent 为true即可

  4. 引用原则

    独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源！例如：

    ① 主包无法引用独立分包内的私有资源

    ② 独立分包之间，不能相互引用私有资源

    ③ 独立分包和普通分包之间，不能相互引用私有资源

    ④ 特别注意：独立分包中不能引用主包内的公共资源

4.4.分包预下载

  1. 什么是分包预下载

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

  2. 配置分包的预下载

    预下载分包的行为，会在进入指定的页面时触发。在 app.json 中，使用 preloadRule 节点定义分包的预下载规则