微信小程序開發初試（Taro、Vant-weapp）

Taro & Vant Weapp

組件實例

this.selectComponent('.classSelector')

引入

Taro

Taro中引入Vant Weapp，不能直接通過第三方NPM包的形式直接調用。

需要進行以下幾步：

• 在github上找到Vant-weapp下載文件包，將對應的dist目錄複製到項目/src/components/vant-weapp目錄下。
• 在Pages對應文件的config.usingComponents中，配置每個頁面所需要的組件。(無法在app.js中進行所謂的全局註冊組件。)

  config = {
    navigationBarTitleText: '首頁',
    usingComponents: {
      "van-button": "../../components/vant-weapp/button/index",
      "van-popup": "../../components/vant-weapp/popup/index"
    }
  }

• 在使用Vant-weapp組件後，taro構建會自動將相應的組件複製一份到dist/components下，而Vant-weapp的組件還依賴工具庫/src/components/vant-weapp/wxs，該工具庫taro不會自動複製到dist中。所以，我們需要修改/config/index.js文件中的config.copy.patterns，讓其在編譯時，自動複製到dist對應目錄下。

  copy: {
    patterns: [
      {
        from: 'src/components/vant-weapp/wxs/',
        to: 'dist/components/vant-weapp/wxs/'
      }
    ],
    options: {
    }
  },

• 由於Vant-weapp的樣式使用的單位是px，所以會被taro編譯成rpx，以便對各個設配進行適配。可以通過修改/config/index.js文件中的config.weapp.module.pxtransform.selectorBlackList不讓其單位轉換。

pxtransform: {
  enable: true,
  config: {

  },
  selectorBlackList: [
    /^.van-.*?$/,  // 這裏是vant-weapp中className的匹配模式
  ]
},

ec-canvas

ec-canvas是 ECharts 的微信小程序版本。

Canvas引起的層級覆蓋問題

canvas是由客戶端創建的原生組件，而原生組件的層級是最高的，所以頁面中的其他組件無論設置 z-index 爲多少，都無法蓋在原生組件上。

所以，如果canvas和遮罩交互同時存在時，canvas會在遮罩的上層。

解決方案：

• 在canvas外包裹一層結構，通過條件(遮罩的開關)來設置canvas容器的hidden屬性。

• 通過cover-view、cover-image自定義組件，cover-view通過定位，提升層級，可以防止被canvas覆蓋。

  • 因爲後插入的原生組件可以覆蓋之前的原生組件，所以，要注意：結構上，cover-view一定要在canvas後邊；
  • 可以通過flex和order來調整展示順序。
  • 只有最外層cover-view才支持position: fixed。

iconfont

下載到本地，什麼都不要改，放到指定位置。

該資源不會自動拷貝到dist/文件夾下，所以需要通過修改配置文件拷貝。

  copy: {
    patterns: [
      ...
      {
        from: 'src/assets/fonts/',
        to: 'dist/assets/fonts/'
      },
      ...
    ],
    options: {
    }
  }

然後，在app.js入口文件中，import './assets/fonts/iconfont.css'。

注意：開發完，上傳版本的時候，開發者工具會報告圖標字體文件沒有被打包上傳，然而，可以正常的預覽體驗版。

自定義組件

組件向外傳參

this.triggerEvent(
  'eventType',
  {
    key: value, //這裏定義的鍵值對，在父組件中，通過args.detail.key獲取；
  },
  {
    bubbles: true, //事件屬性:是否冒泡；
    capturePhase: true, //事件屬性： 是否可捕獲；
  }
)

插槽slot

用法同Vue。

注意：組件內部對slot定義的樣式，不起作用。只能在調用組件的位置，對傳入slot內的結構進行樣式定義。

注意事項

typeof

wx:if語句中，不能使用typeof運算符，{{}}中不能使用typeof運算符，只能在wxs中使用。

data初始化賦值

不知道data什麼時機初始化，但，初始化data的時候，不能使用this指向當前組件實例（這是this === void 0），也就是說，data初始化只能給一個常量。

需要properties或methods來初始化data的時候，只能在生命週期attached中通過this.setData更新data的值。

而且，如果data.fn = this.methodName，methodName中如果調用了this引用，這時this指向的是data，所以需要使用data.fn = this.methodName.bind(this)。

canvas層級最高

參見上述引入ec-canvas部分。

vant-weapp庫中的popup樣式設置

popup內容的大小不是由內容撐起來的，需要通過popup組件的custom-class定義一個類名，設置width、height來定義內容的尺寸。

vant-tree-select事件觸發

在Taro中的代碼風格類React，而vant-weapp庫中的代碼風格爲wxml和wxs風格。React綁定事件是駝峯式，wxml綁定事件是使用-連字符分隔。

這就造成了Taro使用vant-tree-select組件時，onClickNav和onClickItem不會被vant-tree-select識別，事件無法觸發。

解決方案：

• @tarojs/cli低版本，對vant-tree-select進行二次封裝，事件原始觸發通過this.$triggerEvent傳出駝峯式的事件類型，在Taro中調用。
• 升級@tarojs/cli的版本，如1.2.0版本無法觸發駝峯式命名的事件，升級到最新版1.3.15，使用onClick-nav形式綁定事件就可以了。

---

目前vant-weapp0.5.20中，vant-tree-select不支持單選。

props獲取不到

駝峯式命名的事件無法觸發[微信小程序]

注意@tarojs/cli的版本，如最初用的1.2.0版本就獲取不到自定義組件傳的參數，升級到最新版1.3.15就可以了。

注意@tarojs/cli的版本，如最初用的1.2.0版本無法觸發駝峯式命名的事件，升級到最新版1.3.15，使用onClick-nav形式綁定事件就可以了。

Taro編譯器無法自動將用到組件的.wxs文件移動到/dist相應目錄下

修改/config/index.js文件中的config.copy.patterns，讓其在編譯時，自動複製到dist對應目錄下。

  copy: {
    patterns: [
      {
        from: 'src/components/vant-weapp/**/*.wxs',
        to: 'dist/components/vant-weapp/**/*.wxs'
      }
    ],
    options: {
    }
  },

在微信開發者工具中運行Taro代碼，如果有async/await，則regenerator is not defined。

將微信開發者工具--> 右上角詳情--> 本地設置裏的配置全部關掉，如ES6轉ES5...。

定製echarts，引入報錯

echarts.js不需要再次編譯，配置中新增編譯時忽略echarts.js。

weapp: {
    ...
    compile: {
      exclude: ['src/echarts-for-weixin/ec-canvas/echarts.js']
    }
}

getState()獲取Store存儲的數據

可以在(dispatch, getState) => {中使用。

真機調試正常，預覽/體驗版空白（只有tabbar）

將"本地設置"--> "上傳時進行代碼保護"取消勾選。

Taro中className=''單引號賦值不起作用。

className的值使用雙引號包裹。