uniapp微信公众号开放标签使用
公众号开发文档上,关于开放标签使用没有uniapp,参照vue的话并不完全适用
实现方式
- 注意事项
以下相关代码仅适用与uniapp,其他未测试,示例为订阅消息
相关代码效果,调起订阅,必须是线上环境
默认相关页面鉴权已成功.
- 实现思路
页面中放入容器view,负责显示的样式,注意不能用button,绑定v-html
在页面onReady,绘制完毕的时候,给v-html注入相关开放标签代码
开放标签透明,定位覆盖到容器view上
- 代码
<!-- #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