微信JS分享

喜欢ヅ旅行 2022-06-07 12:35 291阅读 0赞

#### 概述 ####

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

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

此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项

### 准备工作 ###

*  拥有自己的域名
 *  绑定域名到公网服务器IP地址
 *  拥有公司订阅号并认证成功
 *  微信公众平台订阅号绑定域名  
    　　先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，可以按照提示进行填写，最多填写三个  
    比如你要部署并后面分享的路径域名都是 m.bbb.com  
    那么就填写m.bbb.com，其他都不要加，不要加端口号和http头  
    ![这里写图片描述][SouthEast]
 *  参考资料和协助工具  
    1.微信开发者说明文档：[点击查看][Link 1]  
    2.微信WEB开发者工具（需要该订阅号在开发者名单中授权使用者的微信账号，[微信WEB开发者工具使用指导][WEB]）：  
    Windows 64位版本：[下载地址][Link 2]  
    Windows 32位版本：[下载地址][Link 3]  
    Mac版本：[下载地址][Link 4]  
    3.微信JSSDK分享sample：[点击下载][Link 5]  
    4.在线DEMO：[http://203.195.235.76/jssdk/][http_203.195.235.76_jssdk]

### 服务器端提供js的授权token ###

服务器端Java版本和PHP版本基本没什么区别只需要把授权拿到就可以了

示例代码：  
[http://demo.open.weixin.qq.com/jssdk/sample.zip][http_demo.open.weixin.qq.com_jssdk_sample.zip]  
备注：链接中包含php、java、nodejs以及python的示例代码供第三方参考，第三方切记要对获取的accesstoken以及jsapi\_ticket进行缓存以确保不会触发频率限制。

官网提供了验证授权返回的数据是否正确  
[https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign][https_mp.weixin.qq.com_debug_cgi-bin_sandbox_t_jsapisign]

只要通过官网的验证最后的签名和官网一摸一样基本就没问题了。

### 前端js分享页面 ###

最坑的地方就在这里了，往往也是这里拦住了很多人。  
需要注意的几个点

*  分享的页面的URL必须是前面你公众号绑定的那个域名项目的地址并且不能带端口号比如：[http://m.bbb.com/test/index.html][http_m.bbb.com_test_index.html]但是不能是[http://www.bbb.com/test/index.html,http://bbb.com/test/index.html][http_www.bbb.com_test_index.html_http_bbb.com_test_index.html]  
    ,[http://localhost/test/index.html,http://localhost:8080/test/index.html][http_localhost_test_index.html_http_localhost_8080_test_index.html]
 *  每次测试都需要把文件扔到服务器中，因为微信会检查你分享的页面的url和签名生成的url是否一致
 *  debug=true只是会弹出alert框，比如错误码或者成功的消息，其他没有什么卵用。
 *  生成签名的服务电脑的IP必须在白名单之中，不然即使在微信官网验证正确，但是分享时依然会报errMsg : config:invalid signature

以此页面为例

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>微信分享测试</title>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
    
    </head>
    <body>
        <div id="myDiv"><h2>微信分享测试</h2></div>
    <p>
    author：牧竹子<br>
    time：2017-10-20<br>
    订阅号： <br>
    <img src="https://img-blog.csdn.net/20170928183434735?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvempjamF2YQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">
    </p>
    </body>
    
    
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script> /************* *微信分享方法 *@param url 分享的链接地址 *@param title分享的标题 *@param desc分享描述信息 *@param img分享的图片预览链接地址 *****************/ function WeChat(url,title,desc,img){ //测试的时候直接让服务器根据测试的地址生成一个授权信息，这样就不用后台服务部署到服务器上进行测试了。正式环境可以打开此请求地址。 //$.get("http://localhost:8081/api/getJsToken",{url:url},function(result) { var result={ "code":1,"msg":"获取JS授权成功","data":{ "jsapiTicket":"HoagFKDcsGMVCIY2vOjf9nqIBAjdC6IXoMicLp9D0QS9Y7liHyNeQhO5U03Fmy4UrxzcohZxTRQF7lUdlchGRQ","signature":"ab5531650b03a170607763173629ff1764d812d9","appId":"appId","url":"http://m.bbb.com/index.html","nonceStr":"1a8db561118a4c34","timestamp":"1508510014"}}; console.log(result.data) var appId=result.data.appId, timestamp=result.data.timestamp, nonceStr=result.data.nonceStr, signature=result.data.signature; wx.config({ debug: true, appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ //把需要的接口加入至列表 "onMenuShareTimeline", //分享给好友 "onMenuShareAppMessage", //分享到朋友圈 "onMenuShareQQ", //分享到QQ "onMenuShareWeibo", //分享到微博 "checkJsApi","scanQRCode", //如果需要调扫码 侧加入至列表 ] }); wx.ready(function () { // 在这里调用 API wx.onMenuShareTimeline({ //例如分享到朋友圈的API title: title, // 分享标题 link: url, // 分享链接 imgUrl: img, // 分享图标 success: function () { }, cancel: function () { // 用户取消分享后执行的回调函数 } }); wx.onMenuShareAppMessage({ title: title, // 分享标题 desc: desc, // 分享描述 link: url, // 分享链接 imgUrl: img, // 分享图标 type: '', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () { }, cancel: function () { // 用户取消分享后执行的回调函数 } }); wx.error(function (res) { alert(res.errMsg); //打印错误消息。及把 debug:false,设置为debug:ture就可以直接在网页上看到弹出的错误提示 }); }); // }, // "json" // ); } //需要调用时执行这个方法。 var url = location.href.split('#')[0];//用户要分享的网址 var title = '你值得关注';//分享的标题 var shareimg = 'http://m.xialeme.com/Upload/System/20170924/59c777f53052b.png';//分享的图片 console.log(shareimg); var desc = '关注牧竹子的订阅号';//分享的描述信息 WeChat(url,title,desc,shareimg);//当需要动态加载的时候，就调用一下。 </script>
    
    
    
    
    </html>

[SouthEast]: /images/20220607/8085c37f69f149f987e4d0b8ccfcb00e.png
[Link 1]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432
[WEB]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140
[Link 2]: http://dldir1.qq.com/WechatWebDev/release/0.7.0/wechat_web_devtools_0.7.0_x64.exe
[Link 3]: http://dldir1.qq.com/WechatWebDev/release/0.7.0/wechat_web_devtools_0.7.0_ia32.exe
[Link 4]: https://mp.weixin.qq.com/debug/cgi-bin/webdebugger/download?from=mpwiki&os=darwin
[Link 5]: http://download.csdn.net/detail/ty_hf/9485731
[http_203.195.235.76_jssdk]: http://203.195.235.76/jssdk/
[http_demo.open.weixin.qq.com_jssdk_sample.zip]: http://demo.open.weixin.qq.com/jssdk/sample.zip
[https_mp.weixin.qq.com_debug_cgi-bin_sandbox_t_jsapisign]: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
[http_m.bbb.com_test_index.html]: http://m.bbb.com/test/index.html
[http_www.bbb.com_test_index.html_http_bbb.com_test_index.html]: http://www.bbb.com/test/index.html,http://bbb.com/test/index.html
[http_localhost_test_index.html_http_localhost_8080_test_index.html]: http://localhost/test/index.html,http://localhost:8080/test/index.html