JS SDK

请先确定你的微信公众号拥有网页服务(JS SDK)调用权限

配置

如只需实例化一个client且为全局变量，则无需做任何配置，各项token将直接存储在对象中，7200s 后自动失效。

如需实例化多个client(即多公众号方案)，请参见配置统一说明 (目前只提供redis存储方案)。

引入微信JS

在你实现微信功能的 View 的 Layout 中引入JS，即添加以下内容 (建议设为单独的erb然后 render)

<% sign_package = $weixin_client.get_jssign_package(request.url) %>
<!-- 此处不是错误，"//" 为自适应HTTP/HTTPS头，无需添加HTTP/HTTPS。 -->
<%= javascript_include_tag '//res.wx.qq.com/open/js/jweixin-1.0.0.js' %>

<script>
  wx.config({
    debug: false,
    appId: "<%= sign_package['appId'] %>",
    timestamp: "<%= sign_package['timestamp'] %>",
    nonceStr: "<%= sign_package['nonceStr'] %>",
    signature: "<%= sign_package['signature'] %>",
    jsApiList: [
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'onMenuShareQQ',
      'onMenuShareWeibo',
      'hideMenuItems',
      'showMenuItems',
      'hideAllNonBaseMenuItem',
      'showAllNonBaseMenuItem',
      'translateVoice',
      'startRecord',
      'stopRecord',
      'onRecordEnd',
      'playVoice',
      'pauseVoice',
      'stopVoice',
      'uploadVoice',
      'downloadVoice',
      'chooseImage',
      'previewImage',
      'uploadImage',
      'downloadImage',
      'getNetworkType',
      'openLocation',
      'getLocation',
      'hideOptionMenu',
      'showOptionMenu',
      'closeWindow',
      'scanQRCode',
      'chooseWXPay',
      'openProductSpecificView',
      'addCard',
      'chooseCard',
      'openCard'
    ]
  });


/*
 * 注意：
 * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
 * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
 * 3. 完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
 */
  wx.ready(function () {
    // 5.2 图片预览
    $('img').click(function () {
      var img_src = $(this).prop("src");
      wx.previewImage({
        current: img_src,
        urls: [img_src]
      });
    });
  });
  wx.error(function (res) {
    // alert(res);
  });
</script>
<%= yield :weixin_api %>

定制功能

例如：

<%= content_for :weixin_api do %>
  <script type="text/javascript">
    wx.ready(function () {
      // 设置“分享给朋友”按钮点击状态及自定义分享内容
      wx.onMenuShareAppMessage({
        title: "<%= @share_title %>",
        desc: "<%= @share_desc %>",
        link: "<%= @share_url %>",
        imgUrl: "<%= @share_img %>",
      });
      // 设置“分享到朋友圈”按钮点击状态及自定义分享内容
      wx.onMenuShareTimeline({
        title: "<%= @share_title %>",
        link: "<%= @share_url %>",
        imgUrl: "<%= @share_img %>",
      });
    });
  </script>
<% end %>