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

一个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，不填默认为linksuccess : 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();}

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

微信网页-授权登录-分享-支付相关推荐

微信公众号开发（一）微信网页授权登录
微信网页授权登录前期准备授权登录获取微信数据处理授权拒绝前期准备 1.微信公众号开发,首先要搞一个公众号,开发阶段可以申请一个公众平台测试账号. (进入到微信公众公众平台,找到开发者工具,点 ...
php微信授权ajax,ajax 实现微信网页授权登录
项目背景因为项目采用前后端完全分离方案,所以,无法使用常规的微信授权登录作法,需要采用 ajax 实现微信授权登录. 需求分析因为本人是一个PHPer ,所以,微信开发采用的是 EasyWeCha ...
java ajax 微信网页授权_ajax 实现微信网页授权登录的方法
AJAX 的 ajax 实现微信网页授权登录的方法项目背景因为项目采用前后端完全分离方案,所以,无法使用常规的微信授权登录作法,需要采用 ajax 实现微信授权登录. 需求分析因为本人是一个ph ...
微信网页授权登录的方法
微信网页授权登录官方文档微信网页授权登录的方法–推荐文章一微信网页授权登录的方法–推荐文章二总结: 微信授权方式(scope的属性值控制): 应用授权作用域,snsapi_base (不弹出授权 ...
Springboot + Spring Security多种登录方式：账号用户名登录+微信网页授权登录
一.概述实现账号用户名+微信网页授权登录集成在Spring Security的思路,最重要的一点是要实现微信登录通过Spring Security安全框架时,不需要验证账号.密码. 二.准备工作要 ...
微信网页授权登录java后台实现
建议先阅读微信开发-网页授权登录官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_au ...
php微信登录代理转发,PHP微信网页授权登录
PHP微信网页授权登录 2018年04月10日 15:44:03阅读数:601 namespace Org\WeChat; /** * 微信授权相关接口 */ class Wechat { //高级功 ...
SpringBoot + Spring Security多种登录方式：账号+微信网页授权登录
一.概述实现账号用户名+微信网页授权登录集成在Spring Security的思路,最重要的一点是要实现微信登录通过Spring Security安全框架时,不需要验证账号.密码. 二.准备工作要 ...
Spring Boot Security 多种登录方式集成配置思路及方法账号用户名登录+微信网页授权登录
概述实现账号用户名+微信网页授权登录集成在Spring Security的思路前情提要本思路完全抛弃Spring Security的配置式账号密码登录模式,采用完全独立的Filter.Provi ...

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

授权登录

分享

支付

微信网页-授权登录-分享-支付相关推荐

最新文章

热门文章