2022/4/6

60-94

自定义组件

组件的创建与引用

样式

数据、方法和属性

此实验证明data和properties指向同一对象

数据监听器

纯数据字段

组件的生命周期

执行时机和表的顺序相同

组件所在页面的生命周期

用于监听组件所在页面的生命周期

插槽

根据使用情况的不同，可以向内填充不同的组件。
如图中，第一次调用组件，插槽就为view组件，第二次调用组件，插槽就为text组件

父子组件之间的通信

推荐使用第一种方法，因为结构更清晰，bind：事件名称

behaviors

使用npm包

vant weapp

自动初始化包管理配置文件：npm init -y






修改后，危险按钮的颜色发生变化
page：小程序页面的根节点
关于变量名见：配置文件

API Promise化

将wx中所有回调函数promise化，并将其挂载到wxp下，后续即可以通过wx.p调用promise化的回调函数

全局数据共享

Mobx

创建：文件夹store->js文件store.js
计算属性：get——只读
修改数据属性：定义action方法，通过action方法进行修改。action方法包住一个function函数

第一步：导入需要的包和文件
第二步：在onLoad中的绑定数据：createStoreBindings(this,{store,…})
this:页面示例，表示当前页面
store:数据源
…：fields为导入的属性数组，actions(s不能少)为导入的方法数组
第三步：在onUnload中解绑数据



注：不论哪里使用了store中的数据，当数据改变时，所有地方的store数据都会改变。

分包

使用分包

独立分包\

分包预下载

自定义tabBar

自定义tabBar文档

如上图所示，尽管设置了"custom": true后tarBar不会显示，但list中的内容仍需写完整。

以组件形式添加上图文件，命名方式必须完全相同

可以将app.json中的list数组放置到index.js的data中，在index.wxml中以wx:for 的形式循环渲染出自定义的tabBar

<van-tabbar-item wx:for="{{list}}"  wx:key="index" >
    <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>

通过info属性可以为tabBar添加数字徽标

按需渲染info：在需要渲染数字徽标的list的元素中定义一个info变量，在渲染时判断info是否定义，以实现按需渲染。当info为0时则不会渲染数字徽标

<van-tabbar-item wx:for="{{list}}"  wx:key="index" info="{{item.info?item.info:''}}" >

使数字徽标显示需要的数字

1. 将store中的数据映射到tabBar中
   使用文档
   方法与将store绑定到components的方法相同
2. 定义数字监听器

observers:{
    'sum':function(sum){
      this.setData({
        'list[4].info':sum
      })
    }
  },

tabBar页面切换

注：页面切换的url要求完整路径，list中的url应以/开头

"pagePath": "/pages/test-npm/test-npm",

 onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },

选择项显示问题：点击到对应的选择项，但是图标并没有跟随点击变化。
解决方法：将active从data中定义到store中，同时定义一个更新active的方法，让其代替this.setData({ active: event.detail });

onChange(event) {
      // event.detail 的值为当前选中项的索引
      //this.setData({ active: event.detail });
      this.updatastore_active(event.detail)
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },

具体过程见：过程