微信JS-SDK使用步骤

概述

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

JS接口安全域名配置

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限

引入文件

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

备注：支持使用 AMD/CMD 标准模块加载方法加载

通过config接口注入权限验证配置

所有需要使用JS-SDK的页面，必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可以在每次url变化时进行调用，目前android微信客户端不支持pushState的H5新特性，用pushState来实现web app 的页面会导致签名失败，Android6.2后可用）

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '', // 必填，签名，见附录1
  jsApiList: [
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'hideMenuItems',
    'showMenuItems',
    'showAllNonBaseMenuItem',
    'hideAllNonBaseMenuItem',
    'startRecord',
    'stopRecord',
    'onVoiceRecordEnd',
    'uploadVoice',
    'downloadVoice',
    'playVoice',
    'onVoicePlayEnd',
    'pauseVoice',
    'stopVoice',
    'openLocation',
    'getLocation',
    'chooseWXPay',
    'onMenuShareQQ',
    'scanQRCode',
  ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

注： sign需要请求后台获取，jsApiList可根据实际需求增减。

通过ready接口处理成功验证

wx.ready(function() {
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口
  // 获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
  // 微信扫一扫属于用户触发行为，固不需要放在此处执行
});

注：不论config信息验证是否成功，最终都会执行ready方法

通过error接口处理失败验证

wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

微信支付接口

wx.chooseWXPay({
  timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: '', // 支付签名随机串，不长于 32 位
  package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
  signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
  paySign: '', // 支付签名
  success: function (res) {
    // 拉起微信，支付成功后的回调函数（注意:此处微信已经支付成功，但是自己的服务器还没有收到来自微信服务器推送支付成功的消息，要等到微信服务器返回支付成功的信息到我们自己的服务器后，才知道支付真的成功了。）
    //因此要在这写一个定时器，定时到服务器请求：id为的订单是否支付成功
    timeJob = window.setInterval("$.getCommodityOrderInfo()",2000);
    //真正成功后，再window.clearInterval(timeJob);
  }
});

备注：prepay_id通过微信支付统一下单接口拿到，paySign采用统一的微信支付签名方法生成，注意这里appid与config中传入的一致，最后签名的参数有：appid，timeStamp，nonceStr，package，signType

chooseWXPay:fail：订阅号要通过认证才可以支付，订阅号分享的文章，Android支付会失败。可以通过二维码的方式支付。

二维码扫一扫支付接口

wx.scanQRCode({
  needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
  success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
  }
});

//如需对扫码结果进行处理，可在此方法外层包裹一层函数，传入回调，形如:
const scanQRCode = (fn) => {
  wx.scanQRCode({
    // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
    needResult: 1,
    desc: 'scanQRCode desc',
    success(res) {
      fn(res.resultStr)
    },
  });
},