微信小程序（使用npm包、全局数据共享、分包、自定义tabBar）

---

简介

黑马程序员，学习记录
视频链接：黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战

---

———— 使用npm包 ————

• 支持与限制

1. Vant Weapp

官方文档：https://youzan.github.io/vant-weapp

这个更快：Vant Weapp - 轻量、可靠的小程序 UI 组件库 (gitee.io)

• 安装

  • 在目录打开终端

  • 自动初始化 包管理配置文件

  npm init -y
  

  • 运行以下命令安装

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

  • 点击编译器里右上角 工具—>构建npm

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

• 使用vant组件

  app.json中导入

    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
  

  使用

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

• 定义全局主题样式

• 定制全局样式主题

  在 app.wxss 中 改变就行

  gitee：packages/common/style/var.less · vant/vant-weapp - 码云 - 开源中国 (gitee.com)

  page {
    --button-danger-background-color: #c00000;
    --button-danger-border-color: #D60000;
    --button-primary-background-color: #13A7A0;
    --button-primary-border-color: #15b4aa;
  }
  

2. API Promise 化

• 介绍

• 安装和使用

npm i --save miniprogram-api-promise

​ 再构建npm就行

• 实现

// 在 app.js
// 只需调用一次 promisifyAll() 方法
// 即可实现异步 API 的 Promise 化
import {promisifyAll} from 'miniprogram-api-promise'

const wxp = wx.p = {}  // 同时也赋给了wx.p 对象  这俩是一个东西

// 参数：wx 顶级对象      
// 将 wx 所有的方法通过promisifyAll函数进行 promise化 并挂载到 wxp 这个空对象上
promisifyAll(wx, wxp)

• 异步 API 的调用

  // es6解构  将data重命名为res 
  //async   await
  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);
  },

———— 全局数据共享 ————

• 介绍

1. MobX

• 小程序中使用全局数据共享

• 安装 Mobx

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

2. 页面

• 创建

// store.js
// 在这个js文件中 专门用来创建 store的实例对象
import { action, observable } 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
  })
})

• 绑定到页面中 并 在页面中使用

  // pages/message/message.js 

  onLoad: function (options) {
    this.storeBindings = createStoreBindings(this,{
      store,
      fileds:['numA','numB','sum'],
      actions:['updateNum1']
    })
  },
      
  btnHandler1(e){
    // console.log(e);
    this.updateNum1(e.target.dataset.step)
  },

<view>{{numA}} + {{numB}} = {{sum}}view>
<van-button type='primary' bindtap="btnHandler1" data-step="{{1}}">numA + 1van-button>
<van-button type='danger' bindtap="btnHandler1" data-step="{{-1}}">numA - 1van-button>

3. 组件

• 将store中的成员绑定到组件中

// components/numbers/numbers.js
import { storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import { store } from '../../store/store' 

Component({
  behaviors:[storeBindingsBehavior],

  storeBindings:{
    //数据源
    store,
    fields:{
      numA : 'numA',
      numB : 'numB',
      sum : 'sum'
    },
    actions:{
      updateNum2: 'updateNum2'
    }
  },
    ...
  /**
   * 组件的方法列表
   */
  methods: {
    btnHandler2(e){
      this.updateNum2(e.target.dataset.step)
    }
  }
}

<text>components/numbers/numbers.wxmltext>
<view>{{numA}} + {{numB}} = {{sum}}view>
<van-button type='primary' bindtap="btnHandler2" data-step="{{1}}">numB + 1van-button>
<van-button type='danger' bindtap="btnHandler2" data-step="{{-1}}">numB - 1van-button>

———— 分包 ————

1. 概念

• 介绍

• 好处

• 分包前项目的构成

• 分包后项目的构成

• 分包的加载规则

• 体积限制

  目前最新的小程序分包大小有以下限制：

  • 整个小程序所有分包大小不超过 12M
  • 单个分包/主包大小不能超过 2M

  说明文档：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

2. 使用

• 配置方法

  // app.json
  "subPackages": [
    {
      "root": "pkgA",
      "name": "p1", // 别名
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root": "pkgB",
      "name": "p2", // 别名
      "pages":[
        "pages/apple/apple"
      ]
    }
  ],

• 打包原则

• 引用原则

3. 独立分包

• 介绍

• 和普通分包的区别

• 应用场景

• 配置方法

    {
      "root": "pkgB",
      "name": "p2",
      "pages":[
        "pages/apple/apple"
      ],
      "independent": true // 加上这句话就行
    }

• 引用原则

4. 分包预下载

• 介绍

• 配置

  // app.json 
  //与 pages 同级目录
  "preloadRule": {
    "pages/contact/contact":{
      "packages": ["p1"],
      "network": "wifi"
    }
  },

• 分包预下载的限制

———— 自定义 tabBar ————

1. 介绍

官方文档：自定义 tabBar | 微信开放文档 (qq.com)

// app.json
"tabBar": {
    "custom": true,  // 加上这个即可
    "list": [
    	...   // 为了兼容性 完整保留下来
    ]
  },

• 创建

  必须叫这个名字

 custom-tab-bar  

2. 案例

• 代码

// store.js
// 在这个js文件中 专门用来创建 store的实例对象
import { action, observable } from 'mobx-miniprogram'

export const store = observable({
  // 数据字段
  activeTabBarIndex: 0,
  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
  }),
  updateActiveTabBarIndex: action(function(index){
    this.activeTabBarIndex = index
  })
})

// custom-tab-bar/index.js
import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import { store } from "../store/store";

Component({
  behaviors: [storeBindingsBehavior],
  options:{
    styleIsolation:'shared'
  },
  storeBindings: {
    store,
    fields: {
      sum: "sum",
      active: 'activeTabBarIndex'
    },
    actions: {
      updateActice:'updateActiveTabBarIndex'
    },
  },
  observers:{
    'sum': function(val){
      this.setData({
        'list[1].info':val
      })
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    "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",
        info:2
      },
      {
        "pagePath": "/pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },
  
  methods:{
  // event.detail 的值为当前选中项的索引
    onChange(event) {
      // console.log(event.detail);
      // this.setData({
      //   active: event.detail
      // })
      this.updateActice(event.detail)
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    }
  }
})

<van-tabbar active="{{ active }}" bind:change="onChange" active-color='#13a7a0'>
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info ? item.info : ''}}">
    <image
      slot="icon"
      src="{{item.iconPath}}"
      mode="aspectFit"
      style="width: 25px;height: 25px;"
    />
    <image
      slot="icon-active"
      src="{{item.selectedIconPath}}"
      mode="aspectFit"
      style="width: 25px;height: 25px;"
    />
    {{item.text}}
  van-tabbar-item>
van-tabbar>

/* custom-tab-bar/index.wxss */
.van-tabbar-item__icon{
  margin-bottom: 0;
}

———— 总结 ————