118.【微信小程序 - 02】（七）

<!--pages/home/home.wxml-->
<text class="t1">首页</text>
<view>
  {{numA}}+{{numB}}={{sum}}
</view>
<!-- 利用 Vant组件 并绑定处理事件且传递参数 -->
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA+1</van-button>
<van-button type="danger" bindtap="btnHandler" data-step="{{-1}}" >numA-1</van-button>

import { createStoreBindings } from 'mobx-miniprogram-bindings';
import { store } from '../../store/store';
  btnHandler(e){
    console.log(e)
    this.updateNum1(e.currentTarget.dataset.step)
  },

// 1. 导入包和实列对象 
import { createStoreBindings } from 'mobx-miniprogram-bindings';
import { store } from '../../store/store';
Page({
  /**
   * 页面的初始数据
   */
  data: {
    count:0
  },
  btnHandler(e){
    console.log(e)
    this.updateNum1(e.currentTarget.dataset.step)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 绑定
   this.storeBindings= createStoreBindings(this,{
      store, // 1.实列对象
      fields:['numA','numB','sum'], // 2. 我们在store.js中定义的属性
      actions:['updateNum1','updateNum2'] // 3. 我们在store.js中定义的方法
    })
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.storeBindings.destoryStoreBindings()
  },
})

// components/test/test.js
// 第一步: 映射到本组件中
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings';
// 第二步: 接受映射
import { store } from '../../store/store';
Component({
 // 第三步: 通过storeBindingsBehavior来实现自动绑定
  behaviors:[storeBindingsBehavior], 
  storeBindings:{
    // 第四步: 指定要绑定的数据源Store
    store,  
    // 第五步: 指定要绑定的字段数据
    fields:{  
      //  格式为: numA->'绑定的数据源名'
      numA:'numA',  //绑定字段的第一种方式
      numB:'numB', // 绑定字段的第二种方式
      sum:'sum' // 绑定字段的第三种方式
    },
    // 第六步: 指定绑定的方法
    actions:{ 
      updateNum2:'updateNum2'
    }
  },
})

<!--components/test/test.wxml-->
<view>
  {{numA}}+{{numB}}={{sum}}
</view>
<!-- 绑定按钮并传递参数 -->
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB+1</van-button>
<van-button type="primary" bindtap="btnHandler2" data-step="{{-1}}">numB-1</van-button>

methods: {
    btnHandler2(e){
      this.updateNum2(e.target.dataset.step)
    }
  }

1. 新增一个属性对象 subPackages -> 内嵌有几个对象就是几个分包
2. 必须要写的一个 root属性 -> 用来指向分包的根目录名
3. pages: 用来指向我们生成的文件 -> 有多少个文件，就在这个分包下有多少页面

"subPackages": [
    {
      "root": "pkgA",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root": "pkgB",
      "pages": [
        "pages/apple/apple"
      ]
    }
  ],

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "my-test1":"/components/test/test"
  },
  "pages":[
      "pages/home/home",  
      "pages/message/message", 
      "pages/contact/contact",
      "pages/info/info"
  ],
  "subPackages": [
    {
      "root": "pkgA",
      "pages": [
        "pages/cat/cat"
      ]
    }
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "金橘社区",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100
  },
  "tabBar": {
    "list": [
      {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "images/index.png",
      "selectedIconPath": "images/index-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "信息",
      "iconPath": "images/mail.png",
      "selectedIconPath": "images/mail-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "电话",
      "iconPath": "images/phone.png",
      "selectedIconPath": "images/phone-active.png"
    }
  ]
  },
  "sitemapLocation": "sitemap.json"
}

"subPackages": [
    {
      "root": "pkgA",
      "name": "p1",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root": "pkgB",
      "name": "p2",
      "pages": [
        "pages/apple/apple"
      ]
    }
  ],