微信小程序（组件通讯和全局数据共享）

1.父子组件之间的通信

①属性绑定

用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据

②事件绑定

用于子组件向父组件传递数据，可以传递任意数据

③获取组件实例

父组件还可以通过 this.selectComponent() 获得子组件实例对象

这样就可以直接访问子组件的任意数据和方法

属性绑定

属性绑定用于实现父向子传值，而且只能传递普通类型的数据

//父组件的 data 节点
data: {
  count:0
}
//父组件的 wxml 结构
<my-test3 count="{{count}}"></my-test3>
<view>~~~</view>
<view>父组件中，count值为：{{count}}</view>

事件绑定

事件绑定用于实现子向父传值，可以传递任何类型的数据。

① 在父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

② 在父组件的wxml中,通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件

③ 在子组件的js中，通过调用this.triggerEvent('自定义事件名称'，{/*参数对象*/})，将数据发送到父组件

④ 在父组件的js中，通过e.detail获取到子组件传递过来的数据。

methods: {
    addCount() {
      this.setData({
        count: this.properties.count+1
      })
      //触发自定义事件，将数值同步给父组件
      this.triggerEvent('sync',{value:this.properties.count})
    }
  }

获取组件实例

可在父组件里调用this.selectComponent("id或class选择器")，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。

2.behaviors

behaviors是小程序中，用于实现组件间代码共享的特性。

在组件中，使用require()方法导入需要的behavior,挂载后即可访问behavior 中的数据或方法

同名字段的覆盖和组合规则

组件和它引用的behavior中可以包含同名的字段，此时可以参考以下规则：

① 同名的数据字段（data）

② 同名的属性（properties）或方法（methods）

③ 同名的生命周期

3.定制全局样式

在app.wxss中，写入CSS变量即可对全局生效：

page {
    /*定制警告按钮的背景颜色和边框颜色*/
    --button-danger-background-color: #C00000;
    --button-danger-border-color: #D00000;
}

API Promise化

定义：通过额外的配置，将官方提供的，基于回调函数的异步API,升级改造为基于Promise的异步API,从而提高代码的可读性。

实现：依赖于 miniprogram-api-promise这个第三方的npm 包。

npm install --save miniprogram-api-promise@1.0.4

// 在小程序入口文件中（app.js）,只需调用一次 promisifyAll() 方法
// 即可实现异步API
import {promisifyAll} from'miniprogram-api-promise'

const wxp- wx.p-{}
promisifyAll(wx.wxp)

4.全局数据共享

全局数据共享是为了解决组件之间数据共享的问题。

创建MobX的Store实例

//在这个js文件中，专门来创建 Store 的实例对象
import {observable } from 'mobx-miniprogram'
export const store=observable ({
  //数据字段
   numA: 1,
   numB: 2,
  //计算属性
  get sum() {
    return this.numA+this.numB
  },
  // action函数，专门来修改store中数据的值
  updateNuml:action(function(step) {
    this.numA+=step
}),
  updateNum2:action(function(step) {
  this.numB+=step
}),
})

将Store中的成员绑定到页面中

//pages/message/message.js
//引入方法
import {createStoreBindings} from''
import {store} from'../store/store'

Page({
  /**
   * 页面的初始数据
   */
  data: {

  },
  
})
Component({
  behaviors: [storeBingsBehavior],// 通过storeBingsBehavior实现自动绑定

  storeBingsBehavior: {
    store,  //指定要绑定的Store
    fields: {
      numA:(store)=>store.numA,  //绑定字段的第一种方式
       numB:(store)=>store.numB,  //绑定字段的第二种方式
       sum:sum                    //绑定字段的第三种方式
    },
    action:{ //指定要绑定的方法
      updateNum2:'updateNum2'
    }
  }
})

5.分包

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

好处：

对小程序进行分包的好处主要有以下两点：

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

· 在多团队共同开发时可以更好地解耦协作

独立分包与普通分包的区别：

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

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

应用场景：

当小程序从普通分包页面启动时，需要首先下载主包

而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度

引用原则：

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

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

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

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

配置分包的的预下载

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

"preloadRule":
  "pages/contact/contact": {
     //network 表示在指定的网络模式下进行预下载
     // 可选值为：sil 和 wifi
     // 默认值为：wifi
    "network":"all",
     //packages表示进入页面后，预下载哪些分包
     //可以通过root或name指定预下载哪些分包
    "packages":["pkgA"]
  }
 }
}

分包预下载的限制

6.自定义tabBar

实现步骤

自定义tabBar分为3步骤：

① 配置信息

② 添加tabBar 代码文件

③ 编写tabBar 代码

<van-tabbar active="{{ active }}"bind:change="onChange">
  <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>
</van-tabbar>

效果：

Vant组件库+自定义组件+全局数据共享

APP.js文档中增加的标签如下：

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

7. uni-app项目

目录结构

uni-app是一个使用Vue.js开发所有前端应用的框架

分支的提交与合并

1.将本地的tabbar分支进行本地的commit提交：

git add
git commit -m "完成 tabBar的开发"

2.将本地的 tabbar 分支合并到本地的master 分支：

git checkout master
git merge tabbar

3.将本地的 tabbar 分支推送到远程仓库进行保存：

git push -u origit tabbar

4.删除本地的tabbar分支：

git branch -d tabbar