前言

上次讲到使用 JS API 实现微信支付功能（https://ruby-china.org/topics/26138JS），现在有必要继续讲一下如何使用这个 API 来实现微信分享等各类的接口以及微信自带的 debug 模式。

安装

# 为了更好的演示，这里直接安装master
gem 'weixin_authorize', git: "https://github.com/lanrion/weixin_authorize.git", branch: "master"

# 当然你也可以直接安装 1.6.3的版本
gem 'weixin_authorize', ~> "1.6.3"

当然接下来你得知道 weixin_authorize 是基本使用，这里不是重点，请直接移步：https://github.com/lanrion/weixin_authorize/wiki/Getting-Started

$wechat_client = WeixinAuthorize::Client.new(ENV["APPID"], ENV["APPSECRET"])
$wechat_client.is_valid? # 判断是否配置正确

JS API 使用

此处有一个前提： application.html.erb 存在如下一行代码：<%= yield :javascript %>

创建基本的 js 接口配置文件

views/layouts/_wx_js.html:

<% sign_package = $wechat_client.get_jssign_package(request.url) %>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
  wx.config({
    debug: false,
    appId: "<%= sign_package['appId'] %>",
    timestamp: "<%= sign_package['timestamp'] %>",
    nonceStr: "<%= sign_package['nonceStr'] %>",
    signature: "<%= sign_package['signature'] %>",
   // 此处jsApiList 是为了告诉微信需要初始哪些接口给我用
    jsApiList: [
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'onMenuShareQQ',
      'onMenuShareWeibo',
      'hideMenuItems',
      'showMenuItems',
      'hideAllNonBaseMenuItem',
      'showAllNonBaseMenuItem',
      '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.error(function (res) {
    // alert(res);
  });
</script>

定制分享内容

views/orders/show.html.erb

<%= content_for :javascript do %>
  <%= render "layouts/weixin_js" %>
  <script type="text/javascript">
    wx.ready(function () {
     // 1.分享给朋友
      wx.onMenuShareAppMessage({
        title: "<%= @share_title %>",
        desc: "<%= @share_desc %>",
        link: "<%= @share_url %>",
        imgUrl: "<%= @share_img %>",
      });
       // 2. 分享到朋友圈
      wx.onMenuShareTimeline({
        title: "<%= @share_title %>",
        link: "<%= @share_url %>",
        imgUrl: "<%= @share_img %>",
      });

       // 3. 图片预览
      var images = $(".am-slides img");
      images.click(function (){
        var image_urls = $.map(images, function(pic){
          return $(pic).attr("original-url");
        });
        var img_src = $(this).prop("src");
        wx.previewImage({
          current: img_src,
          urls: image_urls
        });
      });
    });

  // ....这里还有很多类似的，看官方文档即可。
  </script>
<% end %>

注意地方

• js ticket weixin_authorize 已经帮你缓存了，所以你不用担心过期或者重复请求问题
• 如果想要调试，当然，你开始 debug 模式：debug: true, 并且在 wx.error 把错误 alter 出来即可
• 添加 JS 接口安全域名：前往：公众号设置 => 功能设置即可。

谢谢～