问题

假如需要实现点击小程序中的图片进入预览模式，需要以下步骤。

/pages/index/index.js

Page({
  data: {
    src: '[an_image_url]'  
  },
  _previewImage(e) {
    wx.previewImage({
      urls: [url]
    });
  }
});

/pages/index/index.wxml

<image src="{{src}}" bindtap="_previewImage" />

设想一下，如果还有其他页面也需要实现这个功能，只能不断地复制 _previewImage 这个函数到其他页面的 Page({}) 中。

如果能在 wxml 中直接调用 wx.previewImage 并传入 urls，事情就简单多了。

方法

mina-page-patch 正是我们所需要的。mina-page-patch 将常见的 wx 下的 api 提前合并到 Page 函数，使每一个页面都自动拥有 $wx.[apiName] 的方法，并可以通过 data-* 属性传递调用 api 时需要的参数。

github 地址：github.com/littlee/min…

在 app.js 中引入 mina-page-patch 之后，如果需要实现点击图片进入预览模式，可以直接在 wxml 声明

<image src="{{src}}" bindtap="$wx.previewImage" data-urls="{{[src]}}" />

完全不需要额外的 js 代码。

如果你确实需要一个 success，fail，或者 complete 回调，可以这样做：

/pages/index/index.wxml

<image 
  src="{{src}}"
  bindtap="$wx.previewImage"
  data-urls="{{[src]}}"
  data-success="previewSuccess" />

/pages/index/index.js

Page({
  previewSuccess(res) {
    // 可以正常接收 success 的回调参数
    console.log('previewSuccess', res);
  }
});

更多信息请参考文档 github.com/littlee/min…