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

淡淡的烟草味﹌ 2022-10-15 14:50 12阅读 0赞

### uniapp微信公众号开放标签使用 ###

*   *   *  实现方式

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

### 实现方式 ###

1.  注意事项

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

1.  实现思路

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

1.  代码

//.suscribe-btn: 用来美化按钮样式
      // subscribeNode: 挂载开放标签代码
    <view class=" subscribe-btn">
    		微信订阅
    	<view v-html="subscribeNode"></view>
    </view>
    
    <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

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp/微信扫码打开公众号（并且判断是否关注公众号）

1.将二维码下载下来 ![038c4f28973f4a6c99f97e9d222acba6.png][] 这个二维码微信扫的话，未关注会进入到公众号详情，关注的话，会进

Love The Way You Lie/ 2023年10月09日 14:52/ 0 赞/ 71 阅读

相关 uniapp实现微信公众号支付

1、申请企业服务号（必须企业认证） [https://mp.weixin.qq.com][https_mp.weixin.qq.com] 2、获取appid 和秘钥

╰+攻爆jí腚メ/ 2022年12月29日 14:27/ 0 赞/ 323 阅读

相关 uniapp实现微信公众号登录获取openid

下面是微信文档介绍后台开发参考官方文档：[https://mp.weixin.qq.com/wiki?t=resource/res\_main&id=mp1421

青旅半醒/ 2022年12月29日 14:25/ 0 赞/ 1367 阅读

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

uniapp微信公众号开放标签使用实现方式 > 公众号开发文档上，关于开放标签使用没有uniapp，参照vue的话并不完全适用实现方式 1

淡淡的烟草味﹌/ 2022年10月15日 14:50/ 0 赞/ 13 阅读

相关 uniapp开发微信公众号之网页授权

目录 > 公众号网页授权的步骤网页授权步骤献上官网地址参考：[公众号网页授权][Link 1] 1. 先要拥有`微信公众号`，注意此处的公众号是`服务号`

矫情吗；*/ 2022年09月04日 05:54/ 0 赞/ 442 阅读

相关【微信公众号】微信公众号开发——Werobot入门指南

本文目录 -------------------- 文章目录 Werobot简介申请公众号获取开发者ID 服

旧城等待，/ 2022年06月17日 07:13/ 0 赞/ 1636 阅读

相关如何在微信公众号的开放平台上运维微信公众号

本文介绍“如何在微信公众号的开放平台上运维微信公众号”，将介绍以下方面：（1）如何创建图文（2）如何创建一个“网页模版” （3）自动回复（4）自

妖狐艹你老母/ 2022年05月31日 13:58/ 0 赞/ 286 阅读

相关微信公众号

微信是腾讯提供的即时通讯的免费应用程序微信公众号：腾讯提供的一个第三方的服务平台，商家可以使用这些服务，可以开发自己的公众号，

客官°小女子只卖身不卖艺/ 2022年04月25日 09:52/ 0 赞/ 422 阅读

相关微信公众号开发——微信获取、操作公众号文章

微信获取，操作公众号文章项目地址：[https://gitee.com/wrzhxy/wx\_article][https_gitee.com_wrzhxy_wx_ar

比眉伴天荒/ 2022年03月16日 09:46/ 0 赞/ 809 阅读

相关微信公众号H5 - 使用vue开发微信公众号网页

应项目需求，最近我开始了我的第一次微信公众号网页的开发，第一次接触到公众号网页的我是很懵逼的。通过了解并实现了需求的我下面来进行讲解一下，希望可以帮助到有需要的朋友。ps：

小鱼儿/ 2021年09月07日 06:12/ 0 赞/ 946 阅读