微信小程序基础加强总结

# 在页面的 .json 文件中，引入组件
{
  "usingComponents": {
    "my-test": "/components/test/test"
  }
}
# 在页面的 .wxml 文件中，使用组件
<my-test></my-test>

# 在 app.json 文件中，引入组件
{
  "usingComponents": {
    "my-test": "/components/test/test"
  }
}

# 在组件的 .js 文件中新增如下配置
Component({
  options: {
    stylelsolation: 'isolated'
  }
})
# 或在组件的 .json 文件中新增如下配置
{
  "stylelsolation": "isolated"
}

Component({
  <!-- 组件的初始数据 -->
  data: {
    count: 0
  }
})

Component({
   <!-- 组件的方法列表 -->
  methods: {
    <!-- 事件处理函数 -->
    addCount() {
      this.setData({count: this.data.count + 1});
      <!-- 通过 this 直接调用自定义方法 -->
      this._showCount()
    },
    <!-- 自定义方法建议以 _ 开头 -->
    _showCount() {
      wx.showToast({
        title: 'count值为：' + this.data.count,
        icon: 'none'
      })
    }
  }
})

Component({
  <!-- 属性定义 -->
  properties: {
    <!-- 完整定义属性的方式 -->
    max: {
      type: Number,
      value: 10
    },
    <!-- 简化定义属性的方式 -->
    max: Number
  }
})

Component({
  methods: {
    showInfo() {
      <!-- 结果为 true，证明 data 数据和 properties 属性本质上是一样的，都是可读可写的 -->
      console.log(this.data === this.properties)
    }
  }
})

# 在组建的 .wxml 文件中使用 properties 属性的值
<view>max属性的值为：{{max}}</view>
Component({
  properties: { max: Number },
  methods: {
    addCount() {
      this.setData({ max: this.properties.max + 1 })
    }
  }
})

Component({
  observers: {
    '字段A, 字段B': function(字段A的心智, 字段B的新值) {
    }
  }
})

Component({
  data: { n1: 0, n2: 0, sum: 0 },
  methods: {
    addN1() { sthis.setData({ n1: this.data.n1 + 1 })},
    addN2() { sthis.setData({ n2: this.data.n2 + 1 })}
  },
  observers: {
    'n1, n2': function(n1, n2) {
      this.setData({sum: n1 + n2})
    }
  }
})

# 数据监听器支持监听对象中单个或多个属性的变化，示例代码如下：
Component({
  observers: {
    '对象.属性A, 对象.属性B': function(属性A的新值, 属性B的心智){}
  }
})
# 监听对象中所有属性的变化
Component({
  observers: {
    'obj.**': function(obj){}
  }
})

Component({
  options: {
    <!-- 指定所有 _ 开头的数据字段为纯数据字段 -->
    pureDataPattern: /^_/
  },
  data: {
    a: true, // 普通数据字段
    _b: true // 纯数据字段
  }
})

Component({
  <!-- 推荐用法 -->
  lifetimes: {
    attached() {}, // 在组件实例进入页面节点树时执行
    detached() {}, // 在组件实例被从页面节点树移除时执行
  },
  <!-- 以下是旧的定义方式 -->
  attached() {}, // 在组件实例进入页面节点树时执行
  detached() {}, // 在组件实例被从页面节点树移除时执行
})

# 组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中
Component({
  pageLifetimes: {
    show: function() {}, // 页面被展示
    hide: function() {}, // 页面被隐藏
    resize: function(size) {} // 页面尺寸变化
  }
})

<!-- 组件的封装者 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <!-- 对于不准确的内容，可以使用 slot 进行展位 -->
  <slot></slot>
</view>
<!-- 组件的使用者 -->
<component>
  <view>这里是插入到组件slot中的内容</view>
</component>

Component({
  options: {
    multipleSlots: true // 在组件定义时，启用多个 slot 支持
  }
})

<!-- 组件模板 -->
<view class="wrapper">
  <!-- name 为 before 的第一个 slot 插槽 -->
  <slot name="before"></slot>
  <view>这是一段固定的文本内容</view>
  <!-- name 为 after 的第二个 slot 插槽 -->
  <slot name="after"></slot>
</view>

<!-- 引用组件的页面模板 -->
<component>
  <!-- 这部分内容将被放置在组件 <slot name="before"></slot> 的位置上 -->
  <view slot="before">这里是插入到组件 slot name="before"中的内容</view>
  <!-- 这部分内容将被放置在组件 <slot name="after"></slot> 的位置上 -->
  <view slot="after">这里是插入到组件 slot name="after"中的内容</view>
</component>

<!-- 父组件的 data 节点 -->
data: {
  count: 0
}
<!-- 父组件的 wxml 结构 -->
<my-child count="{{count}}"></my-child>

<!-- 子组件的 properties 节点 -->
properties: {
  count: Number
}
<!-- 子组件的 wxml -->
<view>子组件种，count值为：{{count}}</view>

<!-- 在父组件定义 syncCount 方法，将来传递给子组件，供子组件进行调用 -->
syncCount() {
  console.log('syncCount')
}

<!-- 使用bind:自定义事件名称（推荐：结构清晰） -->
<my-test count="{{count}}" bind:sync="syncCount"></my-test>
<!-- 使用bind后面直接协商自定义事件名称-->
<my-test count="{{count}}" bindsync="syncCount"></my-test>

<!-- 子组件的 wxml 结构 -->
<text>子组件中，count：{{count}}</text>
<button type="primary" bindtap="addCount">+1</button>
# 子组件的 js 代码
methods: {
  addCount() {
    this.setData({
      count: this.properties.count + 1
    })
    this.triggerEvent('sync', { value: this.properties.count })
  }
}

syncCount(e) {
  this.setData({
    count: e.detail.value
  })
}

<my-component count="{{count}}" bind:sync="syncCount" class="test" id="test"></my-component>
<button bindtap="getChild">获取子组件实例</button>
<!-- 按钮的 tap 事件处理函数 -->
getChild() {
  <!-- 可以传递 id选择器，也可以传递 class 选择器 -->
  const child = this.selectComponent('.test')
  <!-- 调用子组件的 setData 方法 -->
  child.setData({ count: child.properties.count + 1 })
  <!-- 调用子组件的 addCount 方法 -->
  child.addCount()
}

# 调用 Behavior() 方法，创建实例对象
# 并使用 module.exports 将 behavior 实例对象共享出去
module.exports = Behavior({
  # 属性节点
  properties: {},
  # 私有数据节点
  data: {},
  # 事件处理函数和自定义方法节点
  methods: {}
})

# 使用 require() 导入需要自定义 behavior 模块
const myBehavior = require('my-behavior')
Component({
  <!-- 将导入的 behavior 实例对象，挂载到 behaviors 数组节点中即可生效 -->
  behaviors: [myBehavior]
})

wx.request({
  method: '',
  url: '',
  data: {},
  success: () => {}
})

npm install --save minprogram-api-promise
# 在小程序入口文件中（app.js），只需要调用一次 promisifyAll() 方法
import { promisifyAll } from 'minprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)

# 页面的 .wxml 结构
<button bindtap="getInfo">vant按钮</button>
# 在页面的 .js 文件中，定义对应的 tap 事件处理函数
async getInfo() {
  const { data: res } = await wx.p.request({
    method: 'GET',
    url: '',
    data: {}
  })
}

# 在项目运行如下的命令，安装MobX相关的包
npm install --save mobx-miniprogram mobx-miniprogram-bindings

import { observable, action } from 'mobx-miniprogram'
export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,
  //计算属性
  get sum() {
    return this.numA + this.numB
  },
  // actions 方法，用来修改 store 中的数据
  updateNumA: action(function(step) {
    this.numA += step
  }),
  updateNumB: action(function(step) {
    this.numB += step
  }),
})

# 页面的 .js 文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from './store'
Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['updateNumA']
    })
  },
  <!-- 生命周期函数--监听页面卸载 -->
  onUnload() {
    this.storeBindings.destroyBindings()
  }
})

# 页面的 .wxml
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA + 1</van-button>
<van-button type="primary" bindtap="btnHandler" data-step="{{-1}}">numA - 1</van-button>
<!-- 按钮 tap 事件的处理函数 -->
btnHandler(e) {
  this.updateNumA(e.target.dataset.step)
}

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from './store'
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: 'sum'
    },
    actions: {
      updateNumA: 'updateNumA'
    }
  }
})

# 组件的 .wxml 结构
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA + 1</van-button>
<van-button type="primary" bindtap="btnHandler" data-step="{{-1}}">numA - 1</van-button>
<!-- 按钮 tap 事件的处理函数 -->
btnHandler(e) {
  this.updateNumA(e.target.dataset.step)
}