浅谈微信JS-SDK 微信分享接口开发(介绍版)


Posted in Javascript onAugust 15, 2018

本文主要是分享自己的开发过程,希望能给部分存在同样问题的朋友一点点帮助;

最近项目中的网页通过微信分享朋友或朋友圈等功能出现了无法显示分享图片等信息,后经过排查发现是微信版本升级导致,采用js-sdk完成分享接口,为了快速实现该功能效果,于是我打算通过前台js进行实现来看看分享效果。

通过查看微信公众平台文档,找到自己所需要的说明文档,明确开发步骤,说明文档截图如下:

浅谈微信JS-SDK 微信分享接口开发(介绍版)

开发步骤:

1、按照说明文档完成步骤1.1.1

浅谈微信JS-SDK 微信分享接口开发(介绍版)

浅谈微信JS-SDK 微信分享接口开发(介绍版)

浅谈微信JS-SDK 微信分享接口开发(介绍版)

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 微信分享接口开发(介绍版)

微信分享给朋友

浅谈微信JS-SDK 微信分享接口开发(介绍版)

至此完成想要的验证效果,接下来就可以在服务器带开发代码了!!!期待完整版微信分享

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 深拷贝函数
Dec 04 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 #Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 #Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 #Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 #jQuery
layui 监听表格复选框选中值的方法
Aug 15 #Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 #Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 #Javascript
You might like
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
python对XML文件的操作实现代码
2020/03/27 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
浙大毕业生自荐信
2014/01/26 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
考试诚信承诺书
2014/05/23 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL