uniapp + vue3模板 使用微信 JSSDK的开放标签

JSSDK开放标签使用 - 官方文档

问题描述

1.vue3模板无法渲染script标签，报错
2.开放标签不显示问题
3.报错-config:fail,invalid signature
4.报错-config:fail,invalid url domai

项目场景：

框架：使用uni-app + vue3的模板项目
实现功能：在微信公众号中嵌入H5页面，需要在H5页面中唤起模板通知消息弹窗

使用步骤

1. 在公众后台配置安全域名，例如：aa.yuming.com
2. 引入JS文件(jssdk文件)，支持http和https两种模式，这里直接使用https，否则在微信开发者工具中调试的时候会报错，无法加载jssdk文件。

(1) 由于我是使用模板开发，而不是CLI,所以直接在index.html文件直接应用script,代码如下：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js " />
<script>
	window.jWeixin = window.wx;
	delete window.wx;
</script>

(2) 使用CLI的项目可以使用npm来下载文件

3. 配置jssdk的config注册开发标签的权限，官方文档有句话很重要，就是 “ 签名算法见JS-SDK说明文档的附录 ” ，后端工程师需要在附录中按照文档描述生成签名数据返回给前端。根据文档需要前端传递url给后端生成数据，具体看签名文档说明

// 后端提供生成签名的接口
getWxConfig({ url: encodeURIComponent(location.href.split('#')[0]) }).then((result: any) => {
		const { data } = result;
		// jWeixin 是在第二步中全局赋值的参数
		jWeixin.config({
			debug: false,
			appId: data.appid, // 后端返回公众号appId
			timestamp: data.timestamp, // 后端返回用于生成签名的时间戳
			nonceStr: data.nonceStr, // 后端返回用于生成签名的随机字符串
			signature: data.signature, // 后端返回的签名
			jsApiList: [], // 这里我没有注册api，所以留了空数组，如果有需要的api就添加，文档有提供可注册的api列表
			openTagList: ['wx-open-subscribe'] // 注册需要用的开发标签，文档有提供可注册的标签列表
		});
		console.log(jWeixin);
		document.addEventListener('WeixinOpenTagsError', function(e) {
			console.error('开放标签的错误原因:', e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
		});
	});

4. 使用开放标签,这里使用与官方的不同

<template>
	<wx-open-subscribe template="这里填你需要推送的模板id" id="subscribe-btn">
		<component is="style">.subscribe-btn { color: #fff; background-color: #07c160; }</component>
		<component is="script">
			<button class="subscribe-btn">一次性模版消息订阅</button>
		</component>
	</wx-open-subscribe>
</template>

解决方案：

1. 解决问题一（script无法渲染）：根据官方案例使用案例，代码如下：

<wx-open-subscribe template="这里填你需要推送的模板id" id="subscribe-btn">
  <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>

vue3的模板下，script无法被渲染，使用vue的动态组件component来替换script,替换如下：

	<wx-open-subscribe template="这里填你需要推送的模板id" id="subscribe-btn">
		<component is="style">.subscribe-btn { color: #fff; background-color: #07c160; }</component>
		<component is="script">
			<button class="subscribe-btn">一次性模版消息订阅</button>
		</component>
	</wx-open-subscribe>

• 解决问题二（开放标签不显示问题）：只有开放标签注册成功后，才会显示开放标签中的内容
• 解决问题三（config:fail,invalid signature）：开放标签注册的签名不对，无法匹配，仔细核对签名附录，是否有严格按照要求来生成
• 解决问题四（config:fail,invalid url domai）：
  原因：由于本地项目启动的是localhost：8080地址，与第一步配置的安全域名不一致，导致了这个报错
  解决方案：后端配置nginx反向代理，指向本地的开发环境 http://127.0.0.1:8080 （这也是测试环境调试的一种方式）
  例子:
• hbuider X 运行项目到浏览器，生成本地项目 http://127.0.0.1:8080,
• 微信开发者工具的公众号网页开发，访问测试环境地址 https:// aa.yuming.com,这样就相当于访问本地项目