收藏
回答

服务号订阅通知, 调试&样式&事件问题

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E6%9C%8D%E5%8A%A1%E5%8F%B7%E8%AE%A2%E9%98%85%E9%80%9A%E7%9F%A5%E6%8C%89%E9%92%AE-wx-open-subscribe

样式调试问题:完全没办法调试,只能修改后放到测试服,部署,然后手机查看修改的地方,简直太痛苦了,这是为了搞开发者?没做好准备就别搞强制,等开发者工具的功能完善了再推广啊。


事件:现在只有成功和失败的事件通知,没有点击触发前的事件(回调方法可以选择是否继续触发订阅弹窗),没有这个对需要做数据校验的业务完全没办法做,要不用户体验就是每次做一次数据验证都需要点一次订阅,虽然这块的交互设计尽可能的避免数据验证,但是免不了一些特殊的业务需求,希望能考虑下。


样式:在现有的按钮代码样式使用 wx-open-subscribe 标签后部分样式失效,如下面的代码,btn的width=100% 的样式会失效,如果把 p 标签页包进来失效的样式更多,也可能因为我不擅长前端所以搞不定这个情况

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
  <p class="p4">
    <a class="per-real-name-btn">按钮</a>
	<!-- <wx-open-subscribe> <a class="btn">按钮</a> </wx-open-subscribe>  -->
  </p>
</div>
</body>
<style>
p {
    margin: 0px;
    padding: 0px;
    line-height: 20px;
    width: 100%;
    overflow: hidden;
}

.p4 {
    margin-top: 20px;
    text-align: center;
}
.per-real-name-btn {
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    background-image: linear-gradient(to right, rgb(72, 137, 251), rgb(63, 167, 249), rgb(102, 173, 229));
    background-size: cover;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border-radius: 40px;
}
</style>
</html>


回答关注问题邀请回答
收藏

2 个回答

  • 浪里小白龙
    浪里小白龙
    2021-04-27
    <wx-open-subscribe style="width: 100%;height:26px;" :template="templates.join(',')" @success="handleSuccess($event)" @error="handleError" key="template-subscribe-on">
    	<script type="text/wxtag-template">
    	  <style>
    	    .switch-btn{position:relative;width:50px;height:26px;border-radius:30px;float:right;appearance:none;}
    	    .switch-off {background-color:#f8f8f8;border:1px solid #f1f1f1;}
    	    .switch-off:after{position:absolute;left:2px;top:1px;content:""; height:22px;width:22px;border-radius:30px;background-color:#ffffff;}
    	    .switch-on {background-color:#4573ab;border:1px solid #35639b;}
    	    .switch-on:after{position:absolute;right:2px;top:1px;content:""; height:22px;width:22px;border-radius:30px;background-color:#ffffff;}
    	  </style>
    	  <button class="switch-btn switch-on"></button>
    	</script>
    </wx-open-subscribe>
    
    2021-04-27
    有用 1
    回复
  • 思源
    思源
    2021-04-27

    <wx-open-subscribe>里模版要用<template>包裹。

     


    这种写法。

    2021-04-27
    有用
    回复 1
登录 后发表内容