公众号开放标签

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

前置条件

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

前端引入微信的js

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

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

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

后台配置config

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

        <dependency>
			<groupId>org.apache.commons</groupId>
			<artifactId>commons-lang3</artifactId>
		</dependency>
		<dependency>
			<groupId>commons-codec</groupId>
			<artifactId>commons-codec</artifactId>
		</dependency>

后台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 + "&timestamp=" + 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

	<wx-open-launch-weapp 
		id="btn1" 
		username="gh_d6de0871b31c"
		path="pages/station/station"> 
		<script type="text/wxtag-template">
    		<style>.btn { padding: 12px }</style>
    		<button class="btn">打开小程序</button>
  		</script> 
  	</wx-open-launch-weapp>

跳转APP wx-open-launch-app

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

	<wx-open-launch-app id="btn2" appid="your-appid" extinfo="your-extinfo">
		<script type="text/wxtag-template">
    		<style>.btn { padding: 12px }</style>
   			 <button class="btn">App内查看</button>
  		 </script> 
  	</wx-open-launch-app>
  • 注册开放平台账号
    网址是：https://open.weixin.qq.com/
    进行认证，认证费用是300大洋。
  • 创建移动应用
    开发平台后台–管理中心–移动应用–创建移动应用
    完整填写应用和平台信息，就能得到appid了，这个后面要用
  • 公众号或小程序设置
    管理中心–公众号–详情–接口信息–网页跳转移动应用–关联设置中绑定所需要跳转的App
    也就是这里用到上面的appid

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

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

	<wx-open-subscribe template="dnemOr1oZ7XLQApxzBaZFtwYJxfdYzvbVS5hjZyW4KI" id="btn3">
		<script type="text/wxtag-template" slot="style">
    		<style>
      			.subscribe-btn {
        			color: #fff;
        			background-color: #07c160;
      			}
    		</style>
  		</script>
  		<script type="text/wxtag-template">
    		<button class="subscribe-btn">
     			 一次性模版消息订阅              
    		</button>
  		</script>
  	</wx-open-subscribe>

音频播放：wx-open-audio

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

	<wx-open-audio 
		title="这里是标题" 
		singer="这是演唱者" 
		episode="专辑名称"
		src="http://music.163.com/song/media/outer/url?id=447925558.mp3"
		cover="https://profile.csdnimg.cn/3/7/F/1_m0_58095675">
	</wx-open-audio>

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

后端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 + "&timestamp=" + 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全部代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,user-scalable=0">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
	$.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");

	$(function() {

		document.addEventListener('WeixinOpenTagsError', function(e) {
			console.error(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
		});

		wx.ready(function() {

		});

		$("#btn1").addEventListener('launch', function(e) {
			console.log('success');
		});
		$("#btn1").addEventListener('error', function(e) {
			console.log('fail', e.detail);
		});

		$("#btn2").addEventListener('launch', function(e) {
			console.log('success');
		});
		$("#btn2").addEventListener('error', function(e) {
			console.log('fail', e.detail);
		});

		$("#btn3").addEventListener('success', function(e) {
			console.log('success', e.detail);
		});
		$("#btn3").addEventListener('error', function(e) {
			console.log('fail', e.detail);
		});

	})
</script>
</head>
<body>

	<wx-open-launch-weapp 
		id="btn1" 
		username="gh_d6de0871b31c"
		path="pages/station/station"> 
		<script type="text/wxtag-template">
    		<style>.btn { padding: 12px }</style>
    		<button class="btn">打开小程序</button>
  		</script> 
  	</wx-open-launch-weapp>

	<wx-open-launch-app id="btn2" appid="your-appid" extinfo="your-extinfo">
		<script type="text/wxtag-template">
    		<style>.btn { padding: 12px }</style>
   			 <button class="btn">App内查看</button>
  		 </script> 
  	</wx-open-launch-app>

	<wx-open-subscribe template="dnemOr1oZ7XLQApxzBaZFtwYJxfdYzvbVS5hjZyW4KI" id="btn3">
		<script type="text/wxtag-template" slot="style">
    		<style>
      			.subscribe-btn {
        			color: #fff;
        			background-color: #07c160;
      			}
    		</style>
  		</script>
  		<script type="text/wxtag-template">
    		<button class="subscribe-btn">
     			 一次性模版消息订阅              
    		</button>
  		</script>
  	</wx-open-subscribe>

	<wx-open-audio 
		title="这里是标题" 
		singer="这是演唱者" 
		episode="专辑名称"
		src="http://music.163.com/song/media/outer/url?id=447925558.mp3"
		cover="https://profile.csdnimg.cn/3/7/F/1_m0_58095675">
	</wx-open-audio>


</body>
</html>

http://www.niftyadmin.cn/n/15696.html

相关文章

类设计7大原则

类设计7大原则

7大原则再区分 原则的原则&#xff1a;开放关闭原则&#xff08;OCP&#xff09; 设计的目标&#xff1a;开放关闭原则&#xff08;OCP&#xff09;、里氏替换原则&#xff08;LSP&#xff09;、迪米特原则&#xff08;LoD&#xff09; 设计的方法&#xff1a;单一职责原则&am…
阅读更多...
微服务框架 SpringCloud微服务架构 微服务保护 31 限流规则 31.4 流控效果【warm up】

微服务框架 SpringCloud微服务架构 微服务保护 31 限流规则 31.4 流控效果【warm up】

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 微服务保护 文章目录微服务框架微服务保护31 限流规则31.4 流控效果【warm up】31.4.1 流控效果31.4.2 流控效果 - warm up31.4.3 案例31 限…
阅读更多...
2022 计网复习应用题【太原理工大学】

2022 计网复习应用题【太原理工大学】

最后一道大题 —— 应用题&#xff0c;有以下几个考点&#xff0c;原理无需懂会算就行&#xff0c;15 分 拿 10 分不难&#xff0c;建议看一下。>_< 目录 1. 判断 IP 地址类型 2. 通过 IP 地址求子网掩码 3. 求网络地址和广播地址 4. 求主机号和可用 IP 5. 双绞线的…
阅读更多...
一文搞懂SSL/TLS

一文搞懂SSL/TLS

SSL/TLS1. 概述2. 协议组成2.1 握手协议&#xff08;Handshake protocol&#xff09;2.2 记录协议&#xff08;Record Protocol&#xff09;2.3 警报协议&#xff08;Alert Protocol&#xff09;3. 密码套件与密钥生成1. 概述 安全套接字层&#xff08;SSL&#xff0c;Secure …
阅读更多...
Docker网络配置

Docker网络配置

目录 一&#xff0c;网络模式 二&#xff0c;外部访问docker容器 1.bridge模式 2.host模式 四&#xff0c;自定义网络 一&#xff0c;网络模式 Docker在创建容器时有四种网络模式&#xff1a;bridge/host/container/none&#xff0c;bridge为默认不需要用--net去指定&#x…
阅读更多...
【单片机】矩阵键盘/定时器

【单片机】矩阵键盘/定时器

目录 一、矩阵键盘 1、矩阵按键原理 1.1工作方式 1.2工作原理 1.3单片机IO口 2、矩阵键盘数字显示代码 3、矩阵键盘密码锁 二、定时器&#xff08;工作模式1&#xff09; 1、定时器的原理 2、寄存器 2.1模式选择寄存器TMOD&#xff08;不可位寻址&#xff09; 2.2…
阅读更多...
java中的Collecions类

java中的Collecions类

java.util.Collections类提供了一些静态方法&#xff0c;这些方法能够对List集合实现常用的算法操作&#xff0c;这些算法是排序&#xff0c;填充&#xff0c;移位和查找等。 Collections的常用方法及其简单使用&#xff1a; 代码如下&#xff1a; package Collections; imp…
阅读更多...
Pinia基本使用

Pinia基本使用

目录 一.为什么要使用 Pinia&#xff1f; 二.安装 1.用你最喜欢的包管理器安装 pinia&#xff1a; 2.引用 三.定义一个 Store 四.添加数据到store 五.在页面上渲染 六.pinia的数据处理 6.将数据改变为响应式 6.1重置数据 6.2批量修改数据 6.3批量修改数据 6.4直接…
阅读更多...
最新文章

Copyright @ 2022~2023