文档章节

微信授权和朋友圈分享

娇娇jojo
 娇娇jojo
发布于 2016/10/09 14:20
字数 1683
阅读 1099
收藏 4

作者:汪娇娇

日期:2016.9.25

现在想想,微信这东西真是让人又爱又恨,刚接触的时候,简直毫无头绪,不过在后台的配合下,现在终于能八九不离十的将微信获取用户信息和分享朋友圈这两块弄得比较透彻,得空了,赶紧将这些东西记下来,怕哪天又忘了,哈哈哈。

1、公众号。

要想做微信这东西,首先你得有公众号(在微信公众平台申请注册即可),主要是在"公众号设置"—>"功能设置"里填写如下的JS接口安全域名(注:登录后可在“开发者中心”查看对应的接口权限。比如说只有企业号才有分享朋友圈的功能,订阅号没有这个权限)。

 

2、合理利用"开发者文档"。

既然有这些功能,那微信提供的文档就不容小觑,对我们开发者最重要的自然就是"开发者文档",而开发者文档最重要的则属于"微信网页开发","微信网页开发"的核心又在于"微信网页授权"、"微信JS-SDK说明文档"和"微信web开发者工具"。

 

(1)微信网页授权

其实这一块只需了解即可,因为这一部分是属于后台研究的东西。我们只需要知道网页授权包括2种:手动授权(scope为snsapi_userinfo)和静默授权(scope为snsapi_base)。是需要手动授权还是静默授权,和后台商量好就行。

 

(2)微信JS-SDK说明文档

这一块自然就是我们前端需要看的内容了,说多确实挺多,因为微信写的确实很详细,所用到的接口更是一一列举了出来,但我们只需要用哪个就复制哪一块就好了。那下面就开始具体说说JSSDK的使用步骤。

 

步骤一:引入JS文件。

在需要调用JS接口的页面引入下面的JS文件:

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

 

步骤二:获取微信授权。

有一个非常大的前提必须知道,在微信里打开的链接并不是我们普通的链接,而是加了很多前缀后缀的链接,比如说你的链接是:http://jojojojo.duapp.com/index.html?id=3

注:id=3是我要用的参数(因为个人项目需要,所以加了一个id),大家据具体情况而定,但必须注意的是后面只能加一个参数,无论你写几个,最后只留下第一个,如果有多个的话,可以用json的形式将2个合成一个,例如:param={id:3,scope:snsapi_userinfo}。

 

如果想你的链接能进行微信授权啥的,那就必须写成下面这个样子:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef51b342984c9a03&redirect_uri=http%3a%2f%2fjojojojo.duapp.com%2findex.html%3fid%3d3&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect

注:appid就是你微信公众号的appid,url是编码之后的url。

编码网址:http://tool.chinaz.com/tools/urlencode.aspx

 

在开发者工具打开这个链接后,会得到另外一个链接:

http://jojojojo.duapp.com/index.html?id=3&code=021v0NLa1mmCcr0g7IJa1bURLa1v0NLK&state=1

这个链接就是你真正要操作的链接,比如说我要通过ajax调用后台写好的获取微信授权的接口(例如:"../share"),ajax调用时需要传2个字段给后台:code和url。这两个字段都是必须的,因为后台需要用code换取网页授权的access_token。url是页面完整的url,在这里url就是:

http://jojojojo.duapp.com/index.html?id=3&code=021v0NLa1mmCcr0g7IJa1bURLa1v0NLK&state=1

 

这个链接,要用location.href.split('#')[0]动态获取,而且最好需要encodeURIComponent()函数encode一下(在这里我没encode),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。如果再需要其他的参数,可以再加。

 

以我自己的链接为例,代码如下:

(下面代码的location.href就是上面的那个url)

var code=location.href.split("?")[1].split("&")[1].split("=")[1],   //code
    url=location.href.split('#')[0],                               //url
    id=location.href.split("?")[1].split("&")[0].split("=")[1],   //id,我自己的参数,你们据自己情况而定
    appId,nonceStr,timestamp,signature;

$.ajax({
	type:"post",
	url:"../share",
	async:true,
	dataType:"json",
	data:{
		code:code, 
		url:url   
	},
	success:function(data){
		console.log(data);
        var sp = data.signPackage,
        appId = sp.appId,
        nonceStr = sp.nonceStr,
        timestamp = sp.timestamp,
        signature = sp.signature;
	}),
	error:function(){
		console.log("fail");
	})
})

调用完即可获得你想要的信息(比如appId等),也就是log出来的data,如下图所示:

注:appId、nonceStr、signature和timestamp这四个字段是做微信分享时必需的4个字段。userInfo里面的信息就更不用说了,拿到头像和用户名就可以做很多小game了。

 

步骤三:分享到朋友圈或分享给朋友

上面才说的appId、nonceStr、signature和timestamp这四个字段,在这里立马就能派上用场了。我自己把这一块封装成了一个函数,所以要用时直接调用即可:

function weixin(tit,des){
	var redirect_uri="http://jojojojo.duapp.com/index.html?"+id;
	wx.config({
		debug: true, 
        // 开启调试模式,调用的所有api的返回值会在客户端alert出来,在pc端时会打印出来,不需要的话可以将true改成false。
		appId: appId,  // 必填,公众号的唯一标识
		timestamp: timestamp,  // 必填,生成签名的时间戳
		nonceStr: nonceStr,  // 必填,生成签名的随机串
		signature: signature,  // 必填,签名
		jsApiList: [
            // 必填,需要使用的JS接口列表
			"onMenuShareTimeline",
			"onMenuShareAppMessage"
		]
	});
    //分享到朋友圈
	wx.ready(function () {
	    wx.onMenuShareTimeline({
		    title: tit,   // 分享时的标题
		    link: "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appId+"&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect",     // 分享时的链接
		    imgUrl: 'http://jojojojo.duapp.com/homepage/images/qr.png',    // 分享时的图标
		    success: function () {
			    console.log("分享成功");
		    },
		    cancel: function () {
			    console.log("取消分享");
		    }
	    });
        //分享给朋友
	    wx.onMenuShareAppMessage({
		    title: tit,
		    desc: des, 
		    link: "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appId+"&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect",
		    imgUrl: 'http://jojojojo.duapp.com/homepage/images/qr.png',
		    type: '',
		    dataUrl: '', 
		    success: function () {
			    console.log("分享成功");
		    },
		    cancel: function () {
			    console.log("取消分享");
		    }
	    });
    })
}

调用如下:

var tit="分享啦",des='啦啦啦';

weixin(tit,des);

 

(3)微信web开发者工具

临了,我得好好推荐一下这款工具,它通过模拟微信客户端的表现,使开发者可以更方便地在电脑上进行开发和调试。立即下载体验

具体操作:公众号登录管理后台,启用开发者中心,在开发者工具——web 开发者工具页面,向开发者微信号发送绑定邀请。

不会的可以去微信公众平台找步骤,偶了~

最后,如若哪里有问题,还请轻喷,但是欢迎指出大家一起交流(*^__^*) !

© 著作权归作者所有

娇娇jojo
粉丝 192
博文 59
码字总数 64429
作品 0
海淀
私信 提问
加载中

评论(2)

娇娇jojo
娇娇jojo 博主

引用来自“111p”的评论

怎么获取微信浏览器的点击分享按钮的事件

回复@111p :这个是没办法的哈,只能采取诱导分享了
111p
111p
怎么获取微信浏览器的点击分享按钮的事件
微信开放平台正式开放SDK文档和下载

近日,微信iPhone客户端4.0版本正式发布,除加入相册及朋友圈功能外,还开放微信接口,支持从第三方应用向微信通讯录里的朋友分享音乐、新闻、美食、摄影等消息内容。日前,微信开放平台正式...

红薯
2012/04/26
3.1K
10
微信商城吸粉利器-微信小游戏怎么整?

源码交易平台koahub干货分享-微信商城吸粉利器 微信游戏,微信小游戏,朋友圈游戏,微信互动小游戏;免注册,免登陆,可授权公众号,千款游戏在线畅玩,千万玩家倾情推荐。. 如今,几乎每天都...

wemall微信商城
2016/11/07
367
0
App在iOS9上不能分享至微信,提示微信没有安装

终于下定决心升级到iOS9.1了,升级完成后这才发现app里点分享时只显示微信收藏,分享至好友和分享至朋友圈都没有了。点击微信收藏,居然还提示微信没有安装——想都不用想,肯定是iOS9惹的祸...

yoyoso
2015/10/30
9K
0
有么有“分享到微信朋友圈”的功能?

不是分享生成二维码,而是类似UC浏览器分享的那种直接授权分享到“微信朋友圈”,求大神,,,

图图的通行证
2014/01/13
401
4
Android友盟社会化分享,那些我踩过的坑

按照sdk的demo进行集成后,碰到几个大坑。现在总结下这些坑同时给出我的解决方法。 1、点击qq或空间分享,出现应用无响应(ANR)的情况。 解决方法:查查是否分享的图片参数是否已经设置,没有...

mgic
2015/09/02
5K
4

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部