公众号开放标签

洛塔服务号回复016获取代码。

前置条件

公众号设置 ==> 功能设置 ==> 填写“JS接口安全域名”

前端引入微信的js

为了方便发送post请求，测试代码还引入了jquery

后台配置config

前端的config各个参数，特别是签名，需要从后台获取。最好的方式是请求一个url，然后后台将所有config对应数据都返回。本例为了方便，连同url的所有参数，都固定到后台了。真实业务可根据需要调整。
引入用到了部分加密包和获取随机字符串，需要maven引入

        
			org.apache.commons
			commons-lang3
		
		
			commons-codec
			commons-codec
		

后台Java代码如下

	/**
	 * 完整项目源码可关注公众号"lootaayun"（洛塔），回复016获取
	 */
	@PostMapping("wx16")
	public JSONObject jssdkParam() throws Exception {
		// 先获取access_token，这部分正式环境需要配置定时获取，每天2000次调用限制
		String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + APPID + "&secret=" + SECRET;
		String result = Jsoup.connect(url).ignoreContentType(true).method(Method.GET).execute().body();
		System.out.println(result);
		String accessToken = JSON.parseObject(result).getString("access_token");	
		
		// 获取jsapi_ticket，这部分需要正式环境定时获取，7200秒内有效
		url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accessToken + "&type=jsapi";
		result = Jsoup.connect(url).ignoreContentType(true).method(Method.GET).execute().body();
		System.out.println(result);
		String ticket = JSON.parseObject(result).getString("ticket");	
		
		// 签名
		String noncestr = RandomStringUtils.randomAlphanumeric(8);
		long timestamp = System.currentTimeMillis()/1000;
		String signurl = "http://test.lootaa.com/wx16.html"; //如果signurl带有#，则只取#之前的部分
		String param = "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url=" + signurl;
		System.out.println(param);
		String signature = DigestUtils.sha1Hex(param);
		System.out.println(signature);
		
		JSONObject data = new JSONObject();
		data.put("appId", APPID);
		data.put("timestamp", timestamp);
		data.put("nonceStr", noncestr); //这个参数比较特殊，后台用的是noncestr，前端S要大写，用的nonceStr
		data.put("signature", signature);
		
		return data;
	}

前端config配置

前端直接调用上面后台写好的接口，将数据放到config中。
其中，jsApiList放入的是JS-SDK中需要的，openTagList是开放标签，本例中把4个全放入了。

	$.post("http://test.lootaa.com/lootaa-wechat/wx16", {}, function(info) {
		wx.config({
			debug : true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
			appId : info.appId, // 必填，公众号的唯一标识
			timestamp : info.timestamp, // 必填，生成签名的时间戳
			nonceStr : info.nonceStr, // 必填，生成签名的随机串
			signature : info.signature,// 必填，签名
			jsApiList : [], // 必填，需要使用的 JS 接口列表
			openTagList : [ "wx-open-launch-weapp", "wx-open-launch-app", "wx-open-subscribe", "wx-open-audio" ]
		});
	}, "json");

跳转小程序 wx-open-launch-weapp

直接将下面的wx-open-launch-weapp放入自己的网页中即可。
id：任意唯一值，可以使用做跳转成功或者失败的监听。
username：小程序的唯一值，后台可以看到，gh_开头的那个。
path：进入小程序的路径。一般为pages/index/index

跳转APP wx-open-launch-app

这个地方略微麻烦点，因为我没有上架到市场的APP，所以只能按照官方文档记录，没有完整测试。

• 注册开放平台账号
  网址是：https://open.weixin.qq.com/
  进行认证，认证费用是300大洋。
• 创建移动应用
  开发平台后台–管理中心–移动应用–创建移动应用
  完整填写应用和平台信息，就能得到appid了，这个后面要用
• 公众号或小程序设置
  管理中心–公众号–详情–接口信息–网页跳转移动应用–关联设置中绑定所需要跳转的App
  也就是这里用到上面的appid

服务号订阅通知按钮 wx-open-subscribe

前面介绍过如何使用网页实现订阅通知，文章标题是《公众号订阅通知》，所以这里只介绍如何订阅，至于订阅之后如何下发可以看前面的文章。
参数template是公众号后台选择好的模板id

音频播放：wx-open-audio

扩展音频标签，用于接入微信浮窗播放器。直接加入就能用。
src是mp3文件路径，cover是封面图片。

官方文档还介绍到了插槽形式。鉴于本人是个后端开发，前端基础实在薄弱，就不尝试了。

后端Java全部代码

import org.apache.commons.codec.digest.DigestUtils;
import org.apache.commons.lang3.RandomStringUtils;
import org.jsoup.Connection.Method;
import org.jsoup.Jsoup;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

/**
 * 公众号开放标签的使用
 * 前置条件：设置与开发-->功能设置-->JS接口安全域名
 */
@RestController
public class Test016 {

	public static final String APPID = "wx276049d6a7551dca";
	public static final String SECRET = "cbe109fdf6f399bd72ed3a4afafa21b1";
	
	/**
	 * 完整项目源码可关注公众号"lootaayun"（洛塔），回复016获取
	 */
	@PostMapping("wx16")
	public JSONObject jssdkParam() throws Exception {
		// 先获取access_token，这部分正式环境需要配置定时获取，每天2000次调用限制
		String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + APPID + "&secret=" + SECRET;
		String result = Jsoup.connect(url).ignoreContentType(true).method(Method.GET).execute().body();
		System.out.println(result);
		String accessToken = JSON.parseObject(result).getString("access_token");	
		
		// 获取jsapi_ticket，这部分需要正式环境定时获取，7200秒内有效
		url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accessToken + "&type=jsapi";
		result = Jsoup.connect(url).ignoreContentType(true).method(Method.GET).execute().body();
		System.out.println(result);
		String ticket = JSON.parseObject(result).getString("ticket");	
		
		// 签名
		String noncestr = RandomStringUtils.randomAlphanumeric(8);
		long timestamp = System.currentTimeMillis()/1000;
		String signurl = "http://test.lootaa.com/wx16.html"; //如果signurl带有#，则只取#之前的部分
		String param = "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url=" + signurl;
		System.out.println(param);
		String signature = DigestUtils.sha1Hex(param);
		System.out.println(signature);
		
		JSONObject data = new JSONObject();
		data.put("appId", APPID);
		data.put("timestamp", timestamp);
		data.put("nonceStr", noncestr); //这个参数比较特殊，后台用的是noncestr，前端S要大写，用的nonceStr
		data.put("signature", signature);
		
		return data;
	}
	
}

前端html全部代码