1. 列表渲染

• 將wx:for代碼塊放入<block></block>中

  <block wx:for="{{books}}">
    <v-book  books="{{item}}" wx:key="item.id"></v-book></block>

• 通過wx:for-item="itemName",小程序wx:for默認別名為item

• 使用場景為：組件內部定義了item屬性，通過修改別名避免沖突

  <block wx:for="{{books}}" wx:for-item="itemName">
          <v-book books="{{itemName}}" wx:key="itemName.id"></v-book>
        </block>

2.頁面page如何傳遞參數

• 通過wx.navigateTo跳轉的頁面，參數會包含在onLoad方法的options里

  
  

  // 組件跳轉前攜帶參數wx.navigateTo({
    url: `/pages/book-detail/book-detail?bid=${bid}`,})// 跳轉后的組件從onLoad生命周期里獲取參數

3.三種小程序編譯模式

• 普通編譯：每次編譯完打開首頁

• 添加編譯模式：自己定義編譯模式，自定義啟動頁面

• 通過二維碼編譯

4.slot插槽的使用

• slot插槽可以理解為組件的properites，只是slot傳入的是標簽

• slot插槽使用分為三步：啟用slot，定義slot，使用slot

• 組件中使用slot

  options:{
      multipleSlots: true}

• 組件頁面定義slot插槽

  <slot name="nums">{{num}}</slot>

• 頁面中使用插槽

  <v-tag text="{{item.content}}">
            <text slot='nums'>{{'+'+item.nums}}</text></v-tag>

• slot插槽的標簽樣式在頁面中設置

5.外部樣式的概念-externalClass

• 外部樣式externalClass使用(類似于插槽slot)

• 在組件中定義externalClass外部樣式

    externalClasses: [
      'tag-class'
    ],

• 在組件中使用

  <view class="container tag-class">

• 在外部頁面傳入樣式

  // wxml<v-tag tag-class="ex-tag" text="{{item.content}}">// wxss.ex-tag{
      color:white;}

• 外部樣式如何強制覆蓋普通樣式

• 1.不要默認樣式，只用外部樣式

• 2.使用外部樣式強制覆蓋普通樣式（!important）

• 小程序中，外部傳入的樣式無法保證肯定能覆蓋掉組件的默認樣式，因為小程序沒有強制使用外部樣式覆蓋默認樣式的機制。解決辦法有兩種：

6.讓wxml能夠解析&nbsp

• 在頁面tag上開啟解析能力 decode ="{{true}}"

  <text class="content" decode="{{true}}">{{util.format(book.summary)}}</text>

7.wxs概念與應用

• 為什么用wxs

• wxml無法調用js以及編寫js

• 使用wxs實現過濾器的功能

• 如何使用-以格式化文本為例(去掉多余的號)

• 新建filter.wxs（wxs中只能使用var，不能使用const）

  var format = function (text) {
    if (!text) {
      return
    }
    var reg = getRegExp('\\n', 'g')
    return text.replace(reg, '
  ')}var getTag = function (index) {
    var tag = index == 0 ? 'ex-tag1' : '' || index == 1 ? 'ex-tag2' : ''
    return tag}module.exports = {
    format: format,
    gettag: getTag}

• wxml頁面使用

  // 引入<wxs src="../../util/filter.wxs" module="util"></wxs>// 使用<text class="content">{{util.format(book.summary)}}</text>

• 直接在wxml中編寫wxs代碼

  <wxs module="tools">
    var getTag = function (index) {
      if (index == 0) {
        return 'ex-tag1'
      }
      if (index == 1) {
        return 'ex-tag2'
      }
      
      return ''
    }
    module.exports={
      getTag: getTag  }</wxs>

8.小程序的常用事件

• 1.bind:tap事件

• 用戶點擊觸發

• 2.input專用bindconfirm事件

• 輸入完點擊鍵盤上的完成按鈕時觸發

9.常用toast

• 彈出提示信息wx.showToast

  wx.showToast({
    title: comment + 1,
    icon: 'none'})

• 加載提示wx.showLoading

  wx.showLoading()

10.并行請求與串行請求

• Promise.all()-將多個Promise實例合并成一個Promise

  Promise.all([detail, comments, likeStatus]).then(res => {
    wx.hideLoading()})

• Promise.race()-相互競爭，多個Promise實例中最先完成的實例觸發