微信JS分享
来源:互联网 发布:连环夺宝编程原理 编辑:程序博客网 时间:2024/05/16 16:57
概述
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项
准备工作
拥有自己的域名
绑定域名到公网服务器IP地址
拥有公司订阅号并认证成功
微信公众平台订阅号绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,可以按照提示进行填写,最多填写三个
比如你要部署并后面分享的路径域名都是 m.bbb.com
那么就填写m.bbb.com,其他都不要加,不要加端口号和http头参考资料和协助工具
1.微信开发者说明文档:点击查看
2.微信WEB开发者工具(需要该订阅号在开发者名单中授权使用者的微信账号,微信WEB开发者工具使用指导):
Windows 64位版本:下载地址
Windows 32位版本:下载地址
Mac版本:下载地址
3.微信JSSDK分享sample:点击下载
4.在线DEMO:http://203.195.235.76/jssdk/
服务器端提供js的授权token
服务器端Java版本和PHP版本基本没什么区别只需要把授权拿到就可以了
示例代码:
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
只要通过官网的验证最后的签名和官网一摸一样基本就没问题了。
前端js分享页面
最坑的地方就在这里了,往往也是这里拦住了很多人。
需要注意的几个点
- 分享的页面的URL必须是前面你公众号绑定的那个域名项目的地址并且不能带端口号比如:http://m.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 - 每次测试都需要把文件扔到服务器中,因为微信会检查你分享的页面的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="http://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>
- 微信分享 js
- js微信分享
- 微信分享JS
- 微信js分享
- 微信JS分享
- 微信完整分享js
- 微信分享 JS 失效
- 微信分享,js代码
- 微信隐藏分享js
- js自定义微信分享
- 微信分享-js代码
- js微信、qq分享
- 微信分享js-sdk
- 微信JS-SDK 微信分享
- 微信分享JS代码 WeixinApi.js
- 微信分享JS代码 WeixinApi.js
- 关于 js 微信分享 微博分享 新浪微博分享 易信分享
- 定制微信分享朋友圈JS代码
- Tomcat 虚拟主机配置
- Android Studio跨界面全局变量
- 2017年10月21日普及组 排名
- 第2章:生成、打包、部署和管理应用程序及类型
- java-接口interface
- 微信JS分享
- 【CTF】PHP漏洞(学习积累中)
- hadoop记录篇3-namenode水平拓展Federation+viewfs
- git笔记
- 到底是值传递还是引用,Java
- Log4j2 类名与行名不显示问题
- 新能源整车控制器开发心得
- Linux下程序的调试、库的创建
- Maven下用Eclipse新建第一个JavaWeb项目,太过详细了,会的人看都累 2017年