微信小程序事件小结

最近在写微信小程序，分（总）享（结）一些小的开发技巧。

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