【微信小程序——开发DAY5（黑马程序员课程）】

使用npm包

注意：先安装node.js

详细教程链接: 详细安装教程

安装完后记得重启——切记

安装Vant组件库

（1）创建package.json：右击项目空白处选择在外部终端窗口打开

官方文档安装步骤连接：链接: 安装Vant组件库官方链接

（2）通过npm安装Vant组件库——按照教学视频的打开，我没有安装成功，所以我在外面使用管理者权限打开cmd，并跳转到小程序的位置，再进行安装，然后安装成功了

（2.1）在外面打开cmd

（2.2）通过npm安装Vant组件库，安装成功

（3）安装成功后——构建npm包

（4）去除原有样式

使用Vant组件库

（1）引入——可以在全局或者页面的JS文件中的usingComponents节点中引入——我自己选择全局里引入

（2）使用组件: 官方具体使用组件文档

定制全局主题样式

链接: MDN官方文档使用 CSS 自定义属性（变量）
链接: 小程序自定义主题官方文档——然后点击官方配置文件

• 在app.wxss中——使用page节点（因为整个页面的根节点就是page）编写想要修改的组件样式，即可对全局生效（当然也可以在页面中写入，进行局部使用）
  代码如下：

/**app.wxss**/
/* 定义page节点——定制全局主题样式 */
page{
  --button-danger-background-color:green;
  --button-danger-border-color:green;
  --button-info-background-color:green;

}

API Promise化

API Promise化，指的是通过额外的配置，将官方提供的，基于回调函数的异步API，升级改造基于Promise的异步API，从而提高代码的可读性，维护性，避免回掉地狱的问题。
（1）安装包

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

（2）删除miniprogram_npm文件

注释：每次下载新包时，需要删除原来项目存在miniprogram_npm文件（里面包含所有的npm包——但未包含新下载的包），——新下载的包想要添加进去就要需要删除miniprogram_npm文件，再构建新的miniprogram_npm文件

（3）重新构建npm包——点击工具选择构建npm包，就会生成新的miniprogram_npm文件


（4）将基于wx对象的所有异步API，进行promise化

注：将基于wx对象的所有异步API，进行promise化，将promise化后的异步API挂载到wxp对象身上，就可以通过wx.p来调用promise化后的异步API

代码如下：在app.js中编写

// app.js
import{promisifyAll} from 'miniprogram-api-promise'
//wx.p为自定义属性， wxp与wx.p指向同一个对象 {}
const wxp=wx.p={}
//将基于wx对象的所有异步API，进行promise化，将promise化后的异步API挂载到wxp对象身上，就可以通过wx.p来调用promise化后的异步API
promisifyAll(wx,wxp)

（5）调用promise化后的异步API
黑马程序课程接口变化链接: 所有最新接口更改连接

（5.1）可以看见接口信息：

（5.2）将拿到的promise对象打印出来

（5.3）将拿到的promise对象中的data属性打印出来

全局数据共享（又叫做：状态管理）

作用：是为了解决组件之间数据共享的问题，开发中常用的全局数据共享方案有：Vuex,Redux,MobX等。
在小程序中可使用，mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。其中

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

1.安装Mobx相关的包

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

2.删除miniprogram.npm文件，然后重构npm

3.创建Mobx的Store实例

（1）新建一个store文件夹——里面新建一个store.js文件

在store.js中编写代码如下：

//在这个JS文件中，专门来创建Store的实例对象
import {action, get, observable}from 'mobx-miniprogram'

//observable方法就返回一个observable实例对象
export const sotre=observable({
   
  //定义数据
    numA:1,
    numB:2,

    //计算属性,使用get修饰为只读
    get sum (){
        return this.numA+this.numB
    },

    //action方法函数，专门来修改store中的值,使用action来包裹function
    updataNum1:action(function(step){

          this.numA+=step
    }),

    updataNum2:action(function(step){

      this.numB+=step
    })

})

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

（1）在页面.js文件中导入需要使用的包，文件

• 导入绑定方法
• 导入store实例对象
  代码如下：

 //导入包的方法createStoreBindings
import{createStoreBindings}from 'mobx-miniprogram-bindings'
//导入创建了的实例额对象sotore
import {store}from '../../store/store'

（2）在页面page中的onLoad生命周期函数中进行绑定的工作
代码如下：

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //将createStoreBindings方法返回的对象使用this.storeBindings自定义属性去指向
    this.storeBindings=createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updataNum1']
    })
  },

（3）在页面周期函数的onUnLoad函数中做一些清理性质的工作
代码如下：

//清理绑定的store对象
  onUnload: function () {
        this.storeBindings.detroyStoreBindings()
  },

全部代码如下：

// pages/new_page_3/new_page_3.js
//桥梁_——mobx-miniprogram-bindings包
//导入包的方法createStoreBindings
import{createStoreBindings}from 'mobx-miniprogram-bindings'
//导入创建了的实例额对象sotore
import {store}from '../../store/store'

Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //将createStoreBindings方法返回的对象使用this.storeBindings自定义属性去指向
    this.storeBindings=createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updataNum1']
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */


   //清理绑定的store对象
  onUnload: function () {
        this.storeBindings.detroyStoreBindings()
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

5.在页面中使用Store中的成员

（1）编写按钮，在页面.wxml中编写
代码如下:

<view>{{numA}}+{{numB}}={{sum}}</view>

<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA+1</van-button>

<van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">numA-1</van-button>

在页面js文件中编写事件处理函数（与生命周期函数同级编写）

 //事件处理函数
    //将按钮绑定的补偿值赋给updataNum1，实现函数的调用
    btnHandler1(e){
        //console.log(e)
        this.updataNum1(e.target.dataset.step)
    },

效果如图：

5.将Store中的对象绑定到自定义组件组件中

（1）导入，代码如下：

//导入————组件的数据共享——第一步
//桥梁_——mobx-miniprogram-bindings包
//导入包的方法createStoreBindings
import{storeBindingsBehavior}from 'mobx-miniprogram-bindings'
//导入创建了的实例额对象sotore
import {store}from '../../store/store'

（2）声明，代码如下：

Component({

//导入————组件的数据共享_第二步在behaviors数组中添加storeBindingsBehavior
behaviors:[storeBindingsBehavior,mybehaviors],
})

（3）传递数据，代码如下：

Component({

//第三步：
storeBinding:{

  store,
  fields:{

      //将那个属性绑定过来，赋值——左边的名字可以自定义
      numA1:'numA',
      numB1:'numB',
      sum1:'sum'


  },
  actions:{
    updataNum2:'updataNum2'
  }


},

})

全部代码：

// components/test5/test5.js
//通过require导入后通过mybehaviors常量进行接收
const mybehaviors=require('../../behaviors/my-behaviors')


//导入————组件的数据共享——第一步
//桥梁_——mobx-miniprogram-bindings包
//导入包的方法createStoreBindings
import{storeBindingsBehavior}from 'mobx-miniprogram-bindings'
//导入创建了的实例额对象sotore
import {store}from '../../store/store'



Component({

//导入————组件的数据共享_第二步
behaviors:[storeBindingsBehavior,mybehaviors],

//第三步：
storeBinding:{

  store,
  fields:{

      //将那个属性绑定过来，赋值——左边的名字可以自定义
      numA1:'numA',
      numB1:'numB',
      sum1:'sum'


  },
  actions:{
    updataNum2:'updataNum2'
  }


},




  //挂载——引用哪一个就放在behaviors数组里
  behaviors:[mybehaviors],

  /**
   * 组件的属性列表
   */
  properties: {
        count:Number
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    addCount(){
      this.setData({
        count:this.properties.count+1
      })
      //触发自定义事件，将数值同步给父组件,传第一个最新的值
      this.triggerEvent('sync',{value:this.properties.count})

    },
  }
})

6.在组件中使用Store种的成员

在自定义组件wxml中编写

<view>{{numA}}+{{numB}}={{sum}}</view>

<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB+1</van-button>

<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB-1</van-button>

编写绑定事件

	
	methods: {
    //声明一个组件数据共享用到的方法
    btnHandler2(e){
      console.log(e)
      this.updataNum2(e.target.dataset.step)

    }
    }

效果如图：
——在这里浪费了一些时间，因为我定义了两个behavior:[]数组，搞半天才发现