常见知识点

维护人:戴荔春 (6016)

说明

整理一些微信开发中经常用到的知识点

网页授权用户信息流程和原理

需要注意的是,只有认证后的服务号(或者企业号)才有权限获取用户授权信息

前置要求为已经做好公众号的前期准备, 参考微信公众号的前期准备

网页授权原理

授权原理流程如图

微信授权有两种scope,这里示例是snsapi_userinfo类型(即获取用户基本信息)

注意,这里是微信最原始的授权流程,公司的授权流程请参考微信网页开发指南

订阅号网页授权

订阅号由于自身没有网页授权权限,所以统一采用公司的服务号进行授权

step1:获取公司的网页授权API地址

参考获取公司的网页授权API地址

请注意,订阅号的API地址可以不传identify(会默认使用公司服务号)

step2:正式开发

参考项目页面拿到授权信息

服务号网页授权

step1:配置网页授权回调地址

服务号(认证后)使用自身的授权回调时,需要手动配置页面授权回调的地址

正式开发时,回调域名只能使用通过ICP备案的域名,不能是ip地址

请注意,如果服务号的授权后台需要部署到对应的项目服务器,那么授权地址也应该换为对应的项目服务器地址(需备案),下面的授权API地址也需进行对应更改

step2:获取公司的网页授权API地址

服务号进行授权时,需要将identify换为自己服务号对应的,比如地址如下

http://app.epoint.com.cn/Epoint_Weichat_Platform/redirectToEpointWeichatOauthOpenId.do?identify=IDENTIFY&targetUrl=TARGETURL

如何获取服务号的identify参考如何获取公众号Identify。更多公司网页授权API参考微信网页开发指南

step3:项目页面拿到授权信息

只需要将上述的TARGETURL 换位最终的项目页面地址,即可在改地址内部拿到对应的授权信息。

接下来在目标页面中,按如下步骤可以获取到授权信息(信息在页面的href中)

具体不同API获取到的信息请参考微信网页开发指南

step1:获取参数
使用 value = WindowTools.getExtraDataByKey(key)可以获取href参数
step2:参数范围
用户信息的key分别为:openId,nickName,sex,country,province,city,headImgUrl(基本信息) ,code,identify(code信息)
step3:注意
其中nickName是b64-utf8加密,再urlencode的,需要按如下方法取出 var nickName = CharsetTools.Base64.decodeUtf8(decodeURI(nickName));

企业号网页授权

企业号比较特殊,不用认证也能授权,但是只能拿到userid或openid,其它信息需要自己去后台换取

step1:配置可信域名

应用中心->对应的应用->可信域名->设置域名

请注意,企业号的应用中,业务域名和JSSDK域名设置是同一个,另外每一个企业号的应用都可以配置自己的可信域名。但必须为域名(不能为ip)

请注意,如果授权后台需要部署到对应的项目服务器,那么授权地址也应该换为对应的项目服务器地址(需备案),下面的授权API地址也需进行对应更改

step2:获取公司的网页授权API地址

如: http://app.epoint.com.cn/Epoint_Weichat_Platform/redirectToEpointWeichatOauthEnterprise.do?identify=IDENTIFY&targetUrl=TARGETURL

step3:实际项目开发

参考: 项目页面拿到授权信息

如何获取公众号Identify

公众号identify是目前公司通用后台中的标识,通过identify来区分不同的公众号。

identify生成流程

如图:

如何给对应公众号生成identify

每一个公众号项目开始开发之前,先需要生成对应的identify并录入,具体步骤如下

后台生成一个新的identify
使用的Java代码为: String uuid = UUID.randomUUID();
将identify和对应的公众号信息插入数据库
如果用的是公司统一后台,目前是由对应的负责人去公司服务器上新增数据；如果是部署到的项目服务器,则在对应的项目服务器上添加数据

其中type是公众号类型,0为订阅号,1为服务号,2为企业号

部署到自己服务器时,记得将里面一些其它类型的公众号数据删除掉

具体流程请参考部署公司后台到项目服务器

微信JSSDK使用流程和原理

前置要求为已经做好公众号的前期准备, 参考微信公众号的前期准备

微信JSSDK原理

微信JSSDK实现原理如图

订阅,服务号网页使用JSSDK

step1:配置可信域名和JSSDK回调地址

页面如果需要使用JSSDK,必须配置可信域名

业务域名配置
公众号设置->功能设置->业务域名 ->设置业务域名

必须是备案域名,业务域名的作用是该域名内不会重排,不会有输入法安全提示
JSSDK安全回调域名配置
公众号设置->功能设置->JSS接口安全域名 ->设置JSSDK回调域名

必须是备案域名,JS安全域名下的页面才能使用JSSDK

如果你使用了支付类接口，请确保支付目录在该安全域名下，否则将无法完成支付
注意
以上两者都是每月只有三次保存的机会,请勿滥用。另外登录后可在“开发者中心”查看对应的接口权限。

step2:获取JSSDK配置信息的API

公司后台封装了一个API来统一获取对应公众号页面的JSSDK配置信息

如 http://app.epoint.com.cn/Epoint_Weichat_Platform/getJssdkConfigParams.do?identify=IDENTIFY&pageUrl=PAGEURL

其中,PAGEURL即对应页面的地址,去除#后面的数据,必须属于JSSDK回调域名之内

step3:实际的项目开发

这一步中,页面引入JSSDK脚本,配置等等,之后即可使用JSSDK,如下

step1:引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https） http://res.wx.qq.com/open/js/jweixin-1.0.0.js

请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK

如需使用摇一摇周边功能，请引入 jweixin-1.1.0.js
备注：支持使用 AMD/CMD 标准模块加载方法加载

请注意,如果使用seajs开发的项目,jssdk脚本请用require引入,否则不起作用如: var wx = require('https://res.wx.qq.com/open/js/jweixin-1.0.0.js');

step2:从公司统一微信后台请求JSSDK配置参数

代码如下:

	/**
	 * @description 从服务器上获取jssdk所需参数接口
	 */
	function getJssdkConfigParamsOnServer() {
		showTips('准备通过接口请求JSSdk所需参数!');
		var url = 'http://app.epoint.com.cn/Epoint_Weichat_Platform/getJssdkConfigParams.do';
		var pageUrl = window.location.href;
		//截取掉?号后面的
		pageUrl = pageUrl.split('#')[0];
		mui.ajax(url, {
			data: {
				//身份认证-新点服务号
				//具体项目可以换为对应公众号的identify和服务后台地址
				identify: '6779e436-b76f-4091-a700-8eae1fbd07f4',
				pageUrl: pageUrl
			},
			dataType: "json",
			type: "POST",
			success: function(response) {
				if(response && response.code == '1') {
					var jsapiTicketSign = {
						nonceStr: response.nonceStr,
						timestamp: response.timestamp,
						signature: response.signature,
						appId: response.appId,
						pageUrl: pageUrl
					};
					showTips('请求JSSdk所需参数成功,正在进行JSSdk配置...\n' + JSON.stringify(jsapiTicketSign));
					configJSSdk(jsapiTicketSign);
				} else {
					showTips('请求JSSdk所需参数失败,返回数据错误...');
				}
			},
			timeout: 9000,
			error: function(xhr, status) {
				var msg = '请求JSSdk config所需参数接口出错,status:' + status + ',xhr:' + JSON.stringify(xhr);
				console.log(msg);
				showTips(msg);
			}
		});
	}

请注意,实际项目中请将identify换位对应的公众号。将地址换为对应后台服务器地址

step4:通过config接口注入权限验证配置

代码如下:

	function configJSSdk(jsapiTicketSign) {
		wx.config({
			debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: jsapiTicketSign.appId, // 必填，公众号的唯一标识
			timestamp: jsapiTicketSign.timestamp, // 必填，生成签名的时间戳
			nonceStr: jsapiTicketSign.nonceStr, // 必填，生成签名的随机串
			signature: jsapiTicketSign.signature, // 必填，签名，见附录1
			jsApiList: ['chooseImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见微信开发者文档,这里只用到选择图片
		});
	}

step5:通过ready接口处理成功验证

config信息验证成功后会触发ready方法,代码如下:

wx.ready(function(){

    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

step6:通过error接口处理失败验证

config信息验证失败后会触发error方法,代码如下:

wx.error(function(res){

    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

});

step7:调用对应的JSSDK接口

JSSDK配置成功后即可使用对应接口(需要公众号有对应权限才行),比如调用图片接口

			wx.chooseImage({
				count: 1, // 默认9
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function(res) {
					var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
					showTips('选择图片成功,localIds:' + localIds);
					document.getElementById('TestImgSelect').setAttribute('src', localIds);
				}
			});

更多接口调用说明
请参考微信JSSDK说明文档

企业号网页使用JSSDK

step1:配置可信域名

参考配置可信域名

企业号中,业务域名和JSSDK域名都统一成了一个可信域名

step2:获取JSSDK配置信息的API

参考获取JSSDK配置信息的API

企业号和服务号获取JSSDK API一致,只是各自identify不同而已(内部实现有所区别)

step3:实际的项目开发

参考实际的项目开发

部署公司后台到项目服务器

有时候服务号开发时要求需要将后台程序部署到对应项目的服务器上。这时候需要了解以下知识。

部署后台到项目服务器和使用统一接口的区别

部署到具体项目服务器后,接口的地址会有变化,如"app.epoint.com.cn"会变为"对应的域名"
具体的项目服务器的数据库中,只允许存储对应公众号的信息,不允许有其它项目的公众号信息
一般服务号开发建议部署在项目的服务器上,这样可以减少公司服务器的压力,同时如果公司服务器崩溃了也不会影响对应项目

如何部署后台到对应项目服务器

部署到对应项目服务器,后台+数据库

后台使用Java Spring mvc编写,需要放到tomcat服务器
数据库用的mysql,需要安装mysql并执行对应sql脚本导入数据
后台项目源码地址: svn://192.168.0.51/2014/T10/新点微门户平台/trunk/dcloud/微信开发/微信后台源码
请注意,部署之前请先将tomcat,mysql安装好,之后执行项目源码中的sql文件,导入数据库,之后请将自己的公众号信息(APPID和SECRET以及IDENTIFY标识)添加进入对应数据库(identify是一个唯一guid)
Java uuid生成方法: String uuid = UUID.randomUUID();

其中type是公众号类型,0为订阅号,1为服务号,2为企业号

部署到自己服务器时,记得将里面一些其它类型的公众号数据删除掉

部署tomcat可以参考 tomcat部署

部署mysql可以参考 mysql部署
如果需要将后台部署到本机测试或者自定义服务器上,请做到如下几处
- 将数据库链接密码修改为自己的密码
- 将serverUrl换为自己后台的网络地址(这个在网页授权重定向时用到)
- 修改完毕后将项目可以打包成.war包,部署到对应的tomcat中,另外本机调试微信公众号请参考微信开发必看
- 部署完毕后,通过调用http://域名/Epoint_Weichat_Platform/getWeichatToken.do?identify=你的公众号的identify即可测试是否正确部署,正确部署的效果是:
  
  公司后台换取测试号token:http://app.epoint.com.cn/Epoint_Weichat_Platform/getWeichatToken.do?identify=a59791a7-3245-4d0a-9d07-e5ae9347d98d

微信模板消息

什么是模板消息

模板消息是微信公告平台为微信公众号提供的一种消息类型,主要用于帮助公众号进行业务通知

更多参考微信模板消息运营规范

模板消息主要用途

简单的说,模板消息的用途就是手动通知对应的微信用户,有如下特点

模板消息为公众号后台向某个单一微信用户一对一发送通知
通知由后台手动发出,需要后台拿到APPID和APPSECRET,并且知晓对应用户的OpenId
具体代码由对应开发人员根据文档和开发指南执行
通知发送成功后,会在对应目标用户的微信通知栏中提示,并且在公众号的推送消息中,如图
通知详情可以自定义传入一个网页url,点击后会自定打开url

模板消息使用限制

模板消息并不能自如的发送,有如下限制

模板消息只能是 已认证的服务号才能使用
其它公众号没有这个功能
当前每个账号的模板消息的日调用上限为10万次，单个模板没有特殊限制。
当账号粉丝数超过10W/100W/1000W时，模板消息的日调用上限会相应提升，以公众号MP后台开发者中心页面中标明的数字为准。
模板消息必须从微信的模板库中选择,不能自定义模板

其中{{}}中的数据是可以自定义的,其它的是不能变动的
每个账号只能使用25个模板
微信模板库有6000多个,但是每个账号最多只能从其中选择25个模板
模板消息只能向关注本公众号的用户发送
而且关注后才能拿到用户的openId
不能发送广告和骚扰信息
虽然说模板消息定义好后,可以向用户推送消息,但是根据微信官方要求,如果私自发送骚扰信息,并且用户不同意,被举报后是会封停账号的。

所以使用这个功能是最好需要用户签署接受对应的模板消息功能的条约。由用户决定是否启用对应功能

如何使用模板消息

模板消息使用需要遵循如下步骤

前期准备

申请开通模板消息功能,如图
模板消息开通成功后,如下

使用模板库

在正式开发前,需要先选择对应的微信模板库
之后从模板库中选择一个符合要求的模板

代码开发

这一步主要作用为,通过代码,向制定用户推送模板消息

可参考如下示例
更多参考模板消息接口
注意
获取对应用户的openId,通过调用对应的微信后台API来查看,需要后台人员根据文档进行开发

FAQ

关于“非官方网页...”安全提示

部署微信网页的服务器必须是一台备案服务器,否则请求页面时会有安全提示,并且无法去除
jssdk配置参数中的页面地址

微信JSSDK是每一个URL就必须配置一次,因为它是按照URL进行签名的(可以去除hash)
配置安全域名次数限制

需要使用微信JSSDK的页面,需要在对应公众号里面设置JSSDK安全回调域名,每一个公众号只能配置三个域名
JSSDK配置失败问题

公司后台的JSSDK配置是可以正常运作的,所以如果出现配置失败的情况,可能是如下原因
- 使用JSSDK页面没有在对应公众号中配置为JSSDK安全域名
- 请求配置参数接口时,当前页面参数不对, 请注意,当前页面的参数包括url后面的参数部分,但是不包含#号后面的hash
- 配置JSSDK页面时,页面地址大小写不一致
- 请特别注意url转义的情况,如果签名时如果url未转义了,但是模板页面的url转义了,会导致签名算法不匹配,签名配置失败
  
  如这种情况就是某些手机浏览器中,默认将页面中的url参数转义了,导致签名时是未转义的url,但是页面中是转义的url,所以微信验证的时候签名校验失败
  
  正确做法是,签名前将整个url进行encodeURIComponent编码,防止错误,如
创建企业会话框失败

企业号中必须使用用户是企业成员才能调用企业回话功能。否则会提示 openEnterprise:failed...
如何获取企业员工的userid

员工的userid在,企业号->通讯录->某用户->账号
微信企业号官方文档

参考 http://qydev.weixin.qq.com/wiki/index.php?title=%E9%A6%96%E9%A1%B5
微信订阅号,服务号官方文档

参考 https://mp.weixin.qq.com/wiki/home/index.html

常见知识点

说明

目录

网页授权用户信息流程和原理

网页授权原理

订阅号网页授权

step1:获取公司的网页授权API地址

step2:正式开发

服务号网页授权

step1:配置网页授权回调地址

step2:获取公司的网页授权API地址

step3:项目页面拿到授权信息

企业号网页授权

step1:配置可信域名

step2:获取公司的网页授权API地址

step3:实际项目开发

如何获取公众号Identify

identify生成流程

如何给对应公众号生成identify

微信JSSDK使用流程和原理

微信JSSDK原理

订阅,服务号网页使用JSSDK

step1:配置可信域名和JSSDK回调地址

step2:获取JSSDK配置信息的API

step3:实际的项目开发

企业号网页使用JSSDK

step1:配置可信域名

step2:获取JSSDK配置信息的API

step3:实际的项目开发

部署公司后台到项目服务器

部署后台到项目服务器和使用统一接口的区别

如何部署后台到对应项目服务器

微信模板消息

什么是模板消息

模板消息主要用途

模板消息使用限制

如何使用模板消息

前期准备

使用模板库

代码开发

FAQ