uniapp中如何使用微信页面开发（H5）的开发标签能力

以服务号订阅通知：wx-open-subscribe为例，步骤如下

一、确保微信公众号已开通订阅通知，开通方式参考微信官方文档：功能介绍 | 微信开放文档

二、参考微信官方文档：目录 | 微信开放文档 在vue页面中集成开发标签wx-open-subscribe

三、踩坑之旅

1、vue必须应用jweixin.js，我引用的是1.6.0，低版本不支持开发标签

2、wx.config必须写到vue的生命周期onReady中，并通过wx.ready的回调方法为标签wx-open-subscribe绑定原生事件，确保用户授权后的后续执行

3、如果原vue页面的css比较复杂的话，需要注意标签wx-open-subscribe的css样式设计

四、VUE示例代码（本项目使用了graceUI5）

<template>
	<view>
		<view>{{title}}</view>
		
		<!-- 居中弹出 -->
		<gui-popup ref="wxOpenSubscribePopup">
			<view class="gui-relative gui-box-shadow gui-img-in">
				<wx-open-subscribe template="TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I" id="subscribe-btn" ref="subscribeBtn">
				  <script type="text/wxtag-template" slot="style">
						<style>
							.subscribe-btn {
								color: #fff;
								background-color: #07c160;
							}
					    </style>
				  </script>
				  <script type="text/wxtag-template">
						<image src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/5.png" 
										:width="750"></image>
				  </script>
				</wx-open-subscribe>
				<!-- 关闭按钮 -->
				<text class="gui-block-text demo-close gui-icons gui-color-white gui-absolute-rt"
				@tap.stop="closeWxOpenSubscribePopup">&#xe78a;</text>
			</view>
		</gui-popup>
	</view>
</template>

<script>
	import wxapi from '@/common/wxapi.js';
	var graceJS = require('@/GraceUI5/js/grace.js');
	export default {
		data() {
			return {
				fdShow: true,
				title: '测试'
			}
		},
		onReady() {
			wxapi.wxRegister(this.getInfo);
		},  
		onLoad() {
			graceJS.getRefs('wxOpenSubscribePopup', this, 0, (guipopupref)=>{
				guipopupref.open();
			});
		},
		methods: {
			closeWxOpenSubscribePopup(){
				this.$refs.wxOpenSubscribePopup.close()
			},
			getInfo(){
				console.log("==========getInfo")  
				
				// wx-open-subscribe 原生绑定点击事件
				this.$nextTick(() => {
					var btn = this.$refs.subscribeBtn;
					btn.addEventListener('success', ({
						e
					}) => {
						console.log('success', e);
						this.closeWxOpenSubscribePopup();
					});
					btn.addEventListener('error',function (e) {
					  console.log('fail', e);
					  this.closeWxOpenSubscribePopup();
					});
				}).catch(err => {
				  wx.showToast({
					title: err.message,
					icon: 'none'
				  })
				});
				
			}
		}
	}
</script>

<style>
	.demo-close{width:100rpx; height:100rpx; line-height:100rpx; opacity:0.88; text-align:center; font-size:58rpx;}
	
</style>