微信小程序事件小結

最近在寫微信小程序，分（總）享（結）一些小的開發技巧。

1、事件綁定bindtap

      微信小程序裏面的事件綁定方法是bindtap，此方法只能指定方法名，不能傳參數。   

 <image src="{{item.imgUrl}}" class="swiper-img" bindtap="golink" data-link-url="{{item.linkUrl}}"/> 

   如上，給圖片增加了一個golink的方法，那如何獲取事件的入參？先將需要傳遞的參數通過data-xxx 形式寫在元素上，上面代碼golink 要傳遞linkeurl，直接在image元素上添加data-linke-url直接看golink方法代碼。

 // 打開URl鏈接
  golink: function(event) {
    let dataset = event.currentTarget.dataset;
    let linkUrl = encodeURIComponent(dataset.linkUrl);
   
    wx.navigateTo({
      url: '/pages/webview/outchain?url='+linkUrl
    })  
  },

沒錯，在bindtap指定的方法裏，微信小程序自帶參入了事件對象event，通過event對象中的currentTarget 的dataset獲取入參。有興趣的同學可以把event對象打印出來看看，得到的對象是這樣一個json 對象。

{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "linkUrl":"xxxxxxx"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "linkUrl":"xxxxxxx"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

 

2、打開外鏈

   微信小程序之前是不支持打開外鏈的，現在增加了web-view組件來打開外鏈。如果用web-view 打開外鏈呢？還是上面的golink的代碼。

最後一條語句是跳轉到 /pages/webview/outchain  ，直接看outchain.js代碼。

Page({
    data: {
      webviewSrc: ""
    },
    onLoad: function(options) {
       
        let url = decodeURIComponent(options.url);
        if (url) {
            this.setData({
                webviewSrc: url
            });
        }
    }
})

很簡單的代碼，從onload方法裏的options中獲取入參，然後解碼直接設置webviewsrc。outchain.wxml的代碼如下：

<view>
  <web-view src="{{ webviewSrc }}"></web-view>
</view>

直接使用web-view 組件就可以打開外鏈了。其中有2個需要注意點：

1. 從其他組件傳入的參數是通過options獲取。
2. url傳遞時需要編碼處理，不然微信小程序會自動過濾掉url 帶的參數。

 

參考資料：

    微信小程序事件

   web-view