2018-05-27

微信授权相关

微信现在是越发的强大了，小程序也是越来越强悍，但是回想起来自己第一次接触微信授权相关的时候，一头雾水不知从何做起。现在已经写了好多需要微信授权登录的页面，所以来总结一下。

简单H5跳转授权登录

这个其实主要是后端同学的工作，后端给一个带授权的链接，前端只需要在页面跳转的时候用这个链接即可实现：

window.location.href='https://resource.url.com/wxRedirect/?url=https://open.weixin.qq.com/connect/oauth2/authorize?appid='+你的appid+'&redirect_uri=https://pay.url.com/v1/wechat/url_callback.htm&response_type=code&scope=snsapi_base&state=1#wechat_redirect'

微信H5页面分享

这个主要是引用相关文件，然后写好分享信息即可。当然还是需要后端同学的配合。在很多不同页面中分享时，在config部分的信息基本保持不变，变化的主要是ready部分的分享信息。

在需要调用JS接口的页面引入JS文件

http(s)://res.wx.qq.com/open/js/jweixin-1.2.0.js

通过config接口注入权限验证配置（先判断是不是微信UA）

var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    $.ajax({
        type: 'get',
        url: 'https://h5.url.com/v1/h5_share/query/signature_jsonp.htm', //这个是通用的，基本所有与该公众号相关的页面都用这同一个接口
        dataType: 'jsonp',
        data: {
            url: location.href.split('#')[0],
        },
        success: function (data) {
            if (data.returnCode == 0) {
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: 你的appId,
                    timestamp: data.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.data.noncestr, // 必填，生成签名的随机串
                    signature: data.data.sign, // 必填，签名，见附录1
                    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'chooseImage', 'uploadImage', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'onVoicePlayEnd', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
            } else {
                alert("接口异常");
            }
        },
        error: function () {
            alert("网络异常");
        }
    });
}

通过ready接口处理

特殊需求：带有私密信息的页面是不可以分享的，此时就需要禁掉点击页面右上角调出分享按钮。此时需要设置：

wx.ready(function () {
	wx.hideAllNonBaseMenuItem();
})

一般普通设置如下：

var title = "分享标题";
var desc = "分享文案";
var links = "点击时打开的链接，可以是跳转授权接口，也可以是普通页面地址";
var imgUrl = "图标";
wx.ready(function () {
    //分享给微信好友
    wx.onMenuShareAppMessage({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: links, // 分享链接
        imgUrl: imgUrl, // 分享图标
        success: function (res) {
        },
        cancel: function (res) {
        },
        fail: function (res) {
        }
    });
    // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
    wx.onMenuShareTimeline({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: links, // 分享链接
        imgUrl: imgUrl, // 分享图标
        success: function (res) {
        },
        cancel: function (res) {
        }
    });
    // 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
    wx.onMenuShareQQ({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: links, // 分享链接
        imgUrl: imgUrl, // 分享图标
        complete: function (res) {
        },
        success: function (res) {
        },
        cancel: function (res) {
        }
    });
    // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
    wx.onMenuShareWeibo({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: links, // 分享链接
        complete: function (res) {
        },
        success: function (res) {
        },
        cancel: function (res) {
        }
    });
    //分享到qq空间
    wx.onMenuShareQZone({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: links, // 分享链接
        imgUrl: imgUrl, // 分享图标
        success: function () {
        },
        cancel: function () {
        }
    });
});

微信H5页面支付

这里需要说明一下，开始的时候微信提供了getBrandWCPayRequest这个接口，后来在这个基础上提供了wx.chooseWXPay这个接口，区别就是，第一个不需要引入http://res.wx.qq.com/open/js/jweixin-1.2.0.js和wx.config.js文件。现在两个都可以使用。当然这两个都是仅限于在微信内使用。如果需要在微信以外的地方调起微信支付，则需要 https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4 这个页面的方式。

getBrandWCPayRequest 方法介绍

文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

步骤：先从后端获得微信支付所需的参数，然后调起微信支付，支付成功后跳转到自己的支付成功页面，支付失败则返回给用户一个支付失败的提示。

// 在上一步先获取参数，然后注入到里面
function onBridgeReady(){
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {
           "appId":"", //公众号名称，由商户传入     
           "timeStamp":"", //时间戳，自1970年以来的秒数     
           "nonceStr":"", //随机串     
           "package":"", //订单详情扩展字符串
           "signType":"MD5", //微信签名方式：     
           "paySign":"" //微信签名 
       },
       function(res){
       	 // 使用以下方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。   
           if(res.err_msg == "get_brand_wcpay_request:ok" ) {
	           // 跳转到自己的支付成功提示页面
           } 
           if (res.err_msg === "get_brand_wcpay_request:cancel") {
	           // 弹出支付取消提示给用户
           } 
           if (res.err_msg === "get_brand_wcpay_request:fail") {
	           // 弹出支付失败提示给用户
           }
       }
   ); 
}
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}

wx.chooseWXPay 方法介绍

文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

步骤：先引入http://res.wx.qq.com/open/js/jweixin-1.2.0.js和wx.config.js文件，然后在wx.ready(function(){})里面调起就好了。

wx.chooseWXPay({
  timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: '', // 支付签名随机串，不长于 32 位
  package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
  signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
  paySign: '', // 支付签名
  success: function (res) {
	// 支付成功后的回调函数
  }
});

附：H5页面调起支付宝支付介绍：

可以先判断用户是在微信里还是其他浏览器，如果在微信里则调起上面的微信支付，否则调起支付宝支付。其实整个过程都是在后端完成，把需要的参数传给后端，如果返回成功，则跳转到后端给的地址上去，如果失败则跳到其他地址。so eazy!

注意：微信调试其他接口，比如图片上传预览、语音上传下载播放等功能时，一定要在手机端进行调试，开发者工具基本没什么用。

acelibin

格物致知

微信授权相关

简单H5跳转授权登录

微信H5页面分享

微信H5页面支付