【uni-app】微信公众号开放标签使用

公众号开发文档上，关于开放标签使用没有uniapp，参照vue的话并不完全适用

实现方式

1. 注意事项

以下相关代码仅适用与uniapp，其他未测试，示例为订阅消息
相关代码效果，调起订阅，必须是线上环境
默认相关页面鉴权已成功.

2. 实现思路

页面中放入容器view，负责显示的样式，注意不能用button，绑定v-html
在页面onReady,绘制完毕的时候,给v-html注入相关开放标签代码
开放标签透明，定位覆盖到容器view上

3. 代码

<!-- #ifdef H5 -->
  //.suscribe-btn: 用来美化按钮样式
  // subscribeNode: 挂载开放标签代码
<view class=" subscribe-btn">
		微信订阅
	<view v-html="subscribeNode"></view>
</view>
<!-- #endif -->
<style>
.subscribe-btn {
	width: 100rpx;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #ffffff;
	backgrouond:green;
	position: relative;
	overflow: hidden;
}
</style>

// #ifdef H5
	async onReady() {
	  //定位需要写到开放标签上
	  // template与微信公众号上vue开发使用案例不同
	  // div单位不能用rpx
			let templateIds = '';
			this.subscribeNode = `
				<wx-open-subscribe template="${templateIds}" id="subscribe-btn" 
					style="position: absolute;left: 0;top: 0;width:100%;height:100%;">
					<template>
						<div style="width:750px;height:300px;"></div>
					</template>
				</wx-open-subscribe>
				`;
	},
	// #endif