微信小程式基礎加強總結

# 在頁面的 .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)
}