微信网页-授权登录-分享-支付

一个H5全部涉及，第一次使用，记录下来。

授权登录

1、需要一个公众号，正式没有可以去申请个测试的公众号，公众号后台授权管理配置授权回调域名。
2、jssdk提供了一个授权的地址，直接跳转过去即可

function getCode(){
    var appId = "*********";
    var redirect_uri = encodeURIComponent(commimUrl+'home.html')//可定义具体页面
    var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appId+"&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect"; 
    window.location.href = url  
}

3、确认授权后，页面会返回redirect_uri 定义的地址，并附带参数?code=~~~~,把code截取下来发给后端就可以了。

分享

直接上代码

ajax(url,type,activity_id,tk,function(res){
	    if(res.status == 200){
	        console.log(res.data)
	        //这里是后端生成的签名
	        wx.config({
	            debug : false,
	            appId : res.data.appId,
	            timestamp : res.data.timestamp,
	            nonceStr : res.data.nonceStr,
	            signature : res.data.signature,
	            jsApiList : [ 'onMenuShareTimeLine','onMenuShareAppMessage','updateAppMessageShareData','updateTimelineShareData' ]
	        }); 
	    }
	})
//这里配置分享朋友和朋友圈，对应的新接口和老接口
 wx.ready(function() {
        var title = "";
        //分享给朋友
        wx.onMenuShareAppMessage({
            title : title, // 分享标题
            desc : '', // 分享描述
            link : '', // 分享链接
            imgUrl : '', // 分享图标
            success : function() {},
            fail:function(){},
            cancel : function() {}
        });
        wx.updateAppMessageShareData({ 
            title: title, // 分享标题
            desc: '', // 分享描述
            link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '', // 分享图标
            success : function() { },
            fail:function(){},
        })
        wx.onMenuShareTimeLine({
            title : title, // 分享标题
            desc : '嘉彤产康，五店同庆，惠动全城', // 分享描述
            link : 'http://two.test.cqcoder.com/', // 分享链接
            imgUrl : 'http://two.test.cqcoder.com/static/images/ioc.png', // 分享图标
            type : 'link', // 分享类型,music、video或link，不填默认为link
            success : function() {},
            fail:function(){},
            cancel : function() {}
        });
        wx.updateTimelineShareData({ 
            title: title, // 分享标题
            desc : '', // 分享描述
            link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '', // 分享图标
            success : function() {},
            fail:function(){},
        })
    });
    wx.error(function(res) {
        console.log(res.errMsg)
        // alert(res.errMsg);
    });

支付

也是直接复制上代码

function onBridgeReady(){
       WeixinJSBridge.invoke(
           'getBrandWCPayRequest',JSON.parse(res.data.pay_param),
           function(res){
           if(res.err_msg == "get_brand_wcpay_request:ok" ){
           // 使用以上方式判断前端返回,微信团队郑重提示：
                   //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
           } 
       }); 
   }
   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();
   } 

我是一个爱跪键盘的前端小萌新~~~