微信公众号网页jssdk使用方法

微信H5中会用到给好友分享和朋友圈分享

  1. 绑定域名
    先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
    这样你的jssdk才能正常使用
  1. 引入js文件

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

或者你下载js文件,然后在vue或者react项目中应用即可

  1. 从后端取得四个关键参数
1
2
3
4
appId: appId,//必填,公众号的唯一标识
timestamp: timestamp,// 必填,生成签名的时间戳
nonceStr: nonStr,// 必填,生成签名的随机串
signature: signature,// 必填,签名

jsapi_ticket获取办法

生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。

参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

signature生成办法——参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1

例如jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

可以通过以下网址验证是否正确

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

  1. 使用wx.config

wx.config({
debug: false, //默认为false 为true的时候是调试模式,开启调试模式,调用的所有api的返回值会在客户端alert出
appId: appId,//必填,公众号的唯一标识
timestamp: timestamp,// 必填,生成签名的时间戳
nonceStr: nonStr,// 必填,生成签名的随机串
signature: signature,// 必填,签名
// 必填,需要使用的JS接口列表
jsApiList: [
‘checkJsApi’,
‘onMenuShareTimeline’,
‘onMenuShareAppMessage’,
‘onMenuShareQQ’,
‘onMenuShareWeibo’,
‘onMenuShareQZone’,
‘updateAppMessageShareData’,
‘updateTimelineShareData’,
],
});

debug为true时,你可以再到config使用是否加载成功,转发和分享是否完成
jsApiList使用哪些功能就添加哪些功能

具体功能如下:微信jssdk大全

微信网页jssdk使用说明和 invalid 分析

总的来说,微信网页包含了很多功能从支付到定位,样样都有,但是用的不是h5+的,而是微信自己的,微信自己的东西就需要去授权(付费的公众号),然后把当前网页的url返回给后端,后端根据通过access_token请求到的jsapi_ticket、时间戳、随机字段和url加密hash生成签名即可。

所以需要在公众号里把js安全域名绑定了才行,同时在接口配置页面检查是否把你的服务器的域名加入了信任域名?在基本配置页面检查是否把你的服务器的 IP 地址加入了白名单?

config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。

确认url是页面完整的url(请在当前页面alert(location.href.split(‘#’)[0])确认),包括’http(s)://‘部分,以及’?’后面的GET参数部分,但不包括’#’hash后面的部分

确保一定缓存access_token和jsapi_ticket。

页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败

vue的hash模式会带#在url中,而微信分享的link中会带上from=singlemessage的字段,导致url出问题解决办法如下

  1. 将hash分开:将hash前后分开,微信就不会将from=singlemessage拼接
    (window.location.href).replace(window.location.search,’’)
  1. 正则替换 ?from=singlemessage&isappinstalled=0
    这一步需要在 vue 全局路由里完成,操作如下:
    // router.js
    router.beforeEach((to, from, next) => {
    let url = window.location.href;
    if (url.includes(‘?from=’)) { // 判断是否携带了 from 参数,这一步灵活变通,只要能判断出是从微信分享链接进来的就 OK

    url = url.replace(/vip.+.#/, 'vip/#'); // 利用正则表达式去掉微信携带的 ?from=singlemessage&isappinstalled=0 这串参数,如果这串参数对于你当前的页面有用处的话,可以重新拼接到你正常的链接后面去
    window.location.href = url; // 重定向到正常链接
    

    }
    })

  2. 前端页面中转,重定向

  3. 后端重定向

小伟科技 wechat
python爱好者公众号—每日学习python必备
欢迎打赏支持!