浅谈微信JS-SDK 微信分享接口开发（介绍版）
本文主要是分享自己的开发过程，希望能给部分存在同样问题的朋友一点点帮助；
最近项目中的网页通过微信分享朋友或朋友圈等功能出现了无法显示分享图片等信息，后经过排查发现是微信版本升级导致，采用js-sdk完成分享接口，为了快速实现该功能效果，于是我打算通过前台js进行实现来看看分享效果。
通过查看微信公众平台文档，找到自己所需要的说明文档，明确开发步骤，说明文档截图如下：
开发步骤：
1、按照说明文档完成步骤1.1.1
2、引入js文件
在分享的页面中添加js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 必须引入的文件--> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="/commonScripts/jquery-1.5.1.min.js"></script> <!-- sha1加密js文件--> <script src="/commonScripts/wxShare_sha1.js"></script> <!-- 组装微信配置信息js文件--> <script src="/commonScripts/wxShare_data.js"></script> <!-- 微信分享时调用对应的接口js文件--> <script src="/commonScripts/wxShare.js"></script> </head> <body id="weixinshare"> 微信分享开发 <img style="width:672px; height:345px; cursor:pointer" alt="banner01" src="/mobileimg/123.jpg"> </body> </html>
3、配置wxShare.js
var $wx_account = wxdata.wx_account, // 自定义数据，见wxShare_data.js
$wx_share = wxdata.wx_share; // 自定义数据 ，见wxShare_data.js
//配置微信信息
wx.config ({
debug : false, // true:调试时候弹窗
appId : $wx_account[0], // 微信appid
timestamp : $wx_account[1], // 时间戳
nonceStr : $wx_account[2], // 随机字符串
signature : $wx_account[3], // 签名
jsApiList : [
// 所有要调用的 API 都要加到这个列表中
'onMenuShareTimeline', // 分享到朋友圈接口
'onMenuShareAppMessage', // 分享到朋友接口
'onMenuShareQQ', // 分享到QQ接口
'onMenuShareWeibo' // 分享到微博接口
]
});
wx.ready (function () {
// 微信分享的数据
var shareData = {
"imgUrl" : $wx_share[0], // 分享显示的缩略图地址
"link" : $wx_share[1], // 分享地址
"desc" : $wx_share[2], // 分享描述
"title" : $wx_share[3], // 分享标题
success : function () {
// 分享成功可以做相应的数据处理
//alert("分享成功"); }
};
wx.onMenuShareTimeline (shareData);
wx.onMenuShareAppMessage (shareData);
wx.onMenuShareQQ (shareData);
wx.onMenuShareWeibo (shareData);
});
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，
// 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，
//对于SPA可以在这里更新签名。
alert("好像出错了！！");
});
4、组装微信的配置信息wxShare_data.js
var wxdata = {
wx_account : new Array(4),
wx_share : new Array(4),
wx_myuser : new Array("appid","appsecret"),
access_token : "", // 凭证
token_expires_in : "" , // 凭证过期时间 单位：s
jsapi_ticket : "", // 凭证
ticket_expires_in : "" , // 凭证过期时间 单位：s
url : "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + wxdata.wx_myuser[0] + "&secret=" + wxdata.wx_myuser[1],
// 获取access_token
// *注意* 经过实际开发测试，微信分享不支持跨域请求，因此获取access_token的请求必须从服务器发起，否则无法获取到access_token
get_access_token : function (){
$.ajax({
type : "GET",
url : wxdata.url
dataType : "jsonp", // 解决跨域问题，jsonp不支持同步操作
cache : false,
// jsonp :'callback',
success : function(msg) {
// 获取正常 {"access_token":"ACCESS_TOKEN","expires_in":7200}
// 获取失败 {"errcode":40013,"errmsg":"invalid appid"}
wxdata.access_token = msg.access_token; // 获取到的交互凭证 需要缓存，存活时间token_expires_in 默认为7200s
wxdata.token_expires_in = msg.expires_in; // 过期时间 单位：s
if (access_token != "" || access_token != null) {
console.log("get access_token success： " + wxdata.access_token);
} else {
console.log("get access_token fail " +wxdata.access_token);
}
},
error : function(msg){
alert("get access_token error!! ： ");
}
});
},
// 获取jsapi_ticket
// *注意* 经过实际开发测试，微信分享不支持跨域请求，因此获取jsapi_ticket的请求必须从服务器发起，否则无法获取到jsapi_ticket
get_jsapi_ticket : function(){
$.ajax({
type : "GET",
url : "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + wxdata.access_token +"&type=jsapi",
dataType : "jsonp",
cache : false,
async : false,
jsonp :'callback',
success : function(msg) {
/*
{
"errcode":0,
"errmsg":"ok",
"ticket":"e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}
*/
if(msg.errcode == 0){
wxdata.jsapi_ticket = msg.ticket; // 需要缓存，存活时间ticket_expires_in 默认为7200s
wxdata.ticket_expires_in = msg.expires_in; // 过期时间 单位：s
console.log("get jsapi_ticket success");
} else {
console.log("get jsapi_ticket fail");
}
},
error : function(msg){
alert("get jsapi_ticket error!!! ");
}
});
},
// 数据签名
create_signature : function(nocestr,ticket,timestamp,url){
var signature = "";
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
var s = "jsapi_ticket=" + ticket + "&noncestr=" + nocestr + "×tamp=" + timestamp + "&url=" + url;
return hex_sha1(s);
},
// 自定义创建随机串 自定义个数0 < ? < 32
create_noncestr : function () {
var str= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
var val = "";
for (var i = 0; i < 16; i++) {
val += str.substr(Math.round((Math.random() * 10)), 1);
}
return val;
},
// 自定义创建时间戳
create_timestamp : function () {
return new Date().getSeconds();
}
}
//wxdata.get_access_token(); // 1
wxdata.access_token = "B06fRIti5GDmvNLKsV5OkJ4fU1qd3YyyW0cgwenxhqI7XwmpTrpwY6Uc7nNtnumdJvnPJXcACAVPD"; //2
//wxdata.get_jsapi_ticket(); //3
wxdata.jsapi_ticket = "XGEs8VD-_kgoxt8jcijupT7j_EA-nP07ro_MmUNDVD0oR8unfqY4C_YIMXAQvhztlTk8j2A" //4
// ----- 5 开始 ------
var timestamp = wxdata.create_timestamp(); // timestamp
var noncestr = wxdata.create_noncestr(); // noncestr
var url = window.location.href;
wxdata.wx_account[0] = wxdata.wx_myuser[0]; // appid
wxdata.wx_account[1] = timestamp; // timestamp
wxdata.wx_account[2] = noncestr; // noncestr
wxdata.wx_account[3] = wxdata.create_signature(noncestr, wxdata.jsapi_ticket ,timestamp ,url);//signature
wxdata.wx_share[0] = "http://www.123456.com/img/123.jpg"; // share_img 分享缩略图图片
wxdata.wx_share[1] = window.location.href;// share_link 分享页面的url地址，如果地址无效，则分享失败
wxdata.wx_share[2] = "this is share_desc";// share_desc
wxdata.wx_share[3] = "this is share_title";// share_title
// -------- 5 结束 ----------
说明：
4.1 分享流程：
用户创建时间戳，随机字符串，当前需要分享的页面的url三个变量，接着将自己的appid和APPsecret作为请求参数获取access_token，再根据access_token获取jsapi_ticket, 然后将获取的jsapi_ticket，以及自己创建的三个变量进行签名，注意签名过程案按照 key 值 ASCII 码升序排序，具体参加程序，
4.2 请求后的响应程序无法处理 问题
get_access_token（）函数中对微信发起获取access_token的请求，存在跨域问题，设置dataType:"jsonp"无法解决，通过浏览器查看请求发现微信相应的数据并没有包装数据，猜测微信不支持这个请求的跨域，因为ajax程序无法通过程序正常获取access_token的值，但可以在浏览器调式获取access_token的值，这个值有7200s，足够去获取jsapi_ticket ，获取jsapi_ticket的请求过程存在同样的问题，因此获取access_token和jsapi_token必须从服务端后端代码。
这篇文章主要是想用js请求来完成分享的效果属于介绍篇，因而没有开发服务器端请求代码（勿喷），服务器篇代码见后续的应用篇
那么如何正常才能让程序跑起来，正常的分享页面呢？？
在wxShare_data.js 代码中，首先发起 wxdata.get_access_token(); 注释②③④⑤代码，将浏览器获取的access_token，手动的放到②变量处，
手动完成了access_token的赋值后，注释①，打开②③，开始 wxdata.get_jsapi_ticket(); 注释④⑤处代码
同样的操作 从浏览器获取 jsapi_ticket值将其赋值给④处变量，注释①③，打开②④⑤处代码，最终代码见wxShare_data.js
5、wxShare_sha1.js
对数据进行签名 sha1.js下载
6、此时页面可以正常运行并完成微信分享了，
成功页面展示
微信分享给朋友
至此完成想要的验证效果，接下来就可以在服务器带开发代码了！！！期待完整版微信分享
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
微信JS-SDK分享功能的.Net实现代码
JS-SDK接口是什么? 为了方便开发者实现微信内的网页(基于微信浏览器访问的网页)功能,比如拍照.选图.语音.位置等手机系统的能力,并方便开发者直接使用微信分享.扫一扫等微信特有的能力,微信推出了JS-SDK的整体开发包,供开发者方便使用. 分享功能 官方文档里提供了php.java.node.js以及python的示例代码,唯独没有c#版的,为了弥补广大.net用户的需求,我把php版本的示例代码逻辑照搬成了.net版,并在网页前端中加入了分享功能,希望对大家有用. 程序实现 流程图 程序里
-
关于微信jssdk实现多图片上传的一点心得分享
一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置 function signatureJSSDK() { var url = window.location.href.split('#')[0];//后台需要此页面的url来生成参数 $.ajax({ url:IPWeiXinJssdk,//调用后台接口,用后台返回的结果来进行微信接口的基础配置 type:"post", dataType:"json", data
-
微信分享调用jssdk实例
网页在微信中打开,进行分享,详细过程 1.问题说明 搞了半天,终于搞定.说下基本需求,很简单,网页在微信中打开,分享. 网页是html格式,原来分享时会一直显示链接,看了下代码中没有调用jssdk,调用的是一个第三方的平台的分享接口. 2.问题解析 根据微信官方给出的demo,可以看到核心就是获取四个参数,配置wx.config. 四个参数分别是appId.timestamp.nonceStr.signature appId不用说,后面三个都是根据微信的接口得到的,有兴趣的可以看下官方,不过也可
-
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
本文实例讲述了微信JS-SDK自定义分享功能.分享给大家供大家参考,具体如下: 分享出去的内容,可以通过jssdk进行修改. 1.配置jssdk Wx_config.html <?php import("@.ORG.jssdk"); $jssdk = new JSSDK(C('oauth_config.appid'), C('oauth_config.appsecret')); $signPackage = $jssdk->GetSignPackage(); ?> &
-
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
最近开发一个项目时,有微信H5网页自定义分享功能,使用了微信JS-SDK的分享到好友和分享到朋友圈功能. 微信开发文档这样写的 自定义"分享给朋友"及"分享到QQ"按钮的分享内容(1.4.0) wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.updateAppMessageShareData({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接,该链接域名或路径必
-
微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能详解
主要为以下实现步骤: 1.绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".(特别提示不需要加上http或者https,吃过亏) 2.页面引入js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="https://res.wx
-
解析微信JS-SDK配置授权，实现分享接口
微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑,后面看到"config:ok"的时候真的算是石头落地,瞬间感觉世界很美好.. 这篇文章是微信开发的很多前置条件,包括了服务端基于JAVA的获取和缓存全局的access_token,获取和缓存全局的jsapi_ticket,以及前端配置授权组件封装,调用分享组件封装. 配置授权思路:首先根据
-
微信js-sdk分享功能接口常用逻辑封装示例
本文实例讲述了微信js-sdk分享功能接口常用逻辑封装.分享给大家供大家参考,具体如下: 微信js-sdk 1.0,分享说明: 1.目前支持的分享接口5个,其中分享腾讯微博基本可以忽略 2.接口只是定义分享时的数据,没有提供触发分享功能 一.在ready事件使用使用示例 //分享对象使用 var shareData={ title:'分享标题', desc:'分享描述', link:'http://www.gongjuji.net', imgUrl:'http://www.gongjuji.ne
-
微信JSSDK分享功能图文实例详解
本文实例讲述了微信JSSDK分享功能.分享给大家供大家参考,具体如下: 这里以微信分享到朋友圈,分享给微信好友为例为参考,进行调用测试,想添加其他的功能,自行查看开发人员文档即可 工欲善其事,必先利其器,好好利用下边的帮助工具,都是腾讯给开发人员的工具 1.微信开发者说明文档:点击查看 2.微信WEB开发者工具: Windows 64位版本:下载地址 Windows 32位版本:下载地址 Mac版本:下载地址 3.微信JSSDK分享sample:点击下载 4.在线DEMO:http://203.
-
thinkPHP微信分享接口JSSDK用法实例
本文实例讲述了thinkPHP微信分享接口JSSDK用法.分享给大家供大家参考,具体如下: 首先在数据库中添加access_token表: SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for access_token -- ---------------------------- DROP TABLE IF EXISTS `access_token`; CREATE TABLE `acc