固定栏微信码弹出

做的过程中认识的到问题 如果是设置postion值后  left是以父级的左上角定位,而right是以父级的右上角定位。关于小三角号,是利用了一个小方块然后让其旋转45度后,然后把左边和下边的边框去掉(小方块同时设置背景白色,z-index也要设置的比右边的大方框要高,因为要把大方框的一部分右边框遮住。)

css代码

* {
    margin: 0;
    padding: 0;
}
.container-info {
    position: relative;
    list-style: none;
    width: 42px;
    height: 164px;
}
.container{
    width: 42px;
    height: 164px;
    position: fixed;
    bottom: 70px;
    right: 10px;
    background-color: aqua;
}
.container li {
    width: 40px;
    height: 40px;
    padding:0;
}
.container-li1 , .container-li2 , .container-li4 ,.container-li3{
    border: 1px solid red;
}
.container-li2 , .container-li4 ,.container-li3 {
    margin-top: -1px;
}
.container-li3 {
    background-color: gray;
}
.container .i1 {
    width: 40px;
    height: 40px;
    display: inline-block;
    background-image: url(./ico-tphsop-index.png);
    background-position: -235px 0;
 
}
.container .i2 {
    width: 40px;
    height: 40px;
    display: inline-block;
    background-image: url(./ico-tphsop-index.png);
    background-position: -275px 0;
  
}
.container .i3 {
    width: 40px;
    height: 40px;
    display: inline-block;
    background-image: url(./ico-tphsop-index.png);
    background-position: -275px -40px;
    
}
.container .container-li3-inner {
    width: 40px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-weight: 700;
    color: #fff;
}
.container .container-li3-hidden {
    position: absolute;
    right: 57px;
    top: 0;
    width: 100px;
    padding: 0 5px;
    height: 167px;
    /* background-color: green; */
    border: 1px solid gray;
}
.container-li3-triangle {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 46px;
    top: 90.5px;
    background-color: white;
    transform: rotate(45deg);
    border: 1px solid grey;
    z-index: 1;
    border-left-color: white;
    border-bottom-color: white;
}
.container-li3-hidden img{
    width: 100px;
    height: 100px;
}
.container-li3-hidden-text {
   text-align: center;
    font-size: 14px;
}
.hidden {
    display: none;
}
.container-li3:hover .hidden {
    display: block;
}

 

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div class="container">
        <ul class="container-info">
            <li class="container-li1"><i class="i1"></i>
            </li>
            <li class="container-li2"><i class="i2"></i></li>
            <li class="container-li3">
                <div class="container-li3-text">
                    <div class="container-li3-inner">手机</div>
                    <div class="container-li3-inner">商城</div>
                </div>
                <div class="hidden">
                    <span class="container-li3-triangle"></span>
                    <div class="container-li3-hidden">
                        <img src=".\qrcode.png" alt="">
                        <div class="container-li3-hidden-text">扫码下载手机</div>
                        <div class="container-li3-hidden-text">商城随时随地</div>
                        <div class="container-li3-hidden-text">享受购物优惠</div>
                    </div>
                </div>    
            </li>
            <li class="container-li4"><i class="i3"></i></li>
        </ul>
    </div>
    
</body>
</html>

运行效果

hover之后

 

<think>好的,用户现在问的是在服务号网页中能否调起微信的服务号订阅弹窗。我需要先确定这个问题的背景和相关政策。 首先,微信的服务号订阅弹窗通常是用户主动关注服务号时出现的,或者通过某些官方渠道触发。根据微信的官方规定,自动调起关注弹窗可能会被限制,因为这可能被视为骚扰用户或诱导关注,违反微信平台规则。 接下来,我需要回忆微信的JS-SDK文档是否有相关接口。目前JS-SDK提供的功能主要集中在分享、图像、位置等,没有直接调起订阅弹窗的API。可能用户是想通过网页引导用户关注,但需要符合微信的规定。 用户可能实际需求是增加服务号的关注量,所以需要合法的方法。例如,在页面中放置二维,或者使用微信提供的关注按钮组件。这些方法需要手动触发,而不是自动弹窗。 另外,需要考虑到微信近期的政策变化。比如,以前可能有某些方法可以实现,但现在可能被封禁。因此,回答时需要强调遵守最新规定,避免用户采取违规操作导致账号被封。 用户可能误以为可以通过技术手段实现自动弹窗,但实际上微信不允许这样做。需要明确告知限制,并提供替代方案,比如引导用户手动点击关注按钮,或者通过优质内容吸引用户主动关注。 最后,总结回答时要确保准确,同时提供可行的建议,帮助用户在合规的前提下提升关注量。</think>在微信服务号网页开发中,**无法直接通过代调起服务号关注弹窗**。以下是关键要点和合规替代方案: --- ### **一、微信官方限制** 1. **禁止自动弹窗关注** 微信严格禁止通过`JS-SDK`或`URL参数`自动弹出关注窗口(防止骚扰用户) 2. **诱导关注会被封禁** 任何强制/诱导关注行为(如关注后查看内容)将触发平台处罚 --- ### **二、合规实现方案** #### **1. 手动引导关注(推荐)** ```html <!-- 在页面中放置公众号二维 --> <div class="qrcode-guide"> <img src="wechat-qr.png" alt="公众号二维"> <p>长按识别关注服务号</p> </div> <!-- 使用微信官方关注按钮组件(需企业认证) --> <wx-open-launch-weapp username="gh_xxxxxx" template="关注我们" ></wx-open-launch-weapp> ``` #### **2. 菜单固定入口** 在服务号底部菜单设置「关注我们」目,用户点击后跳转到包含二维的页面 #### **3. 图文消息引导** 通过推送的图文消息,在文章末尾添加带参数二维: `https://mp.weixin.qq.com/mp/qrcode?scene=10000004` --- ### **三、特殊场景说明** 1. **线下物料扫** 线下宣传物料可印刷带场景值参数的二维: `https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=URL&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect` 2. **支付后关注** 开通微信支付「支付即关注」功能(需满足商户资质要求) --- ### **四、违规风险案例** - ❌ 页面加载后自动弹出二维浮层 - ❌ 提示"关注后方可继续操作" - ❌ 用`window.location`跳转到公众号主页 - 以上行为可能导致网页被封禁/服务号功能受限 --- ### **五、最佳实践建议** 1. **自然流量引导** 通过优质内容吸引用户**主动扫关注** 2. **模板消息回流** 在服务通知模板消息中添加「查看详情」跳转链接 3. **数据分析优化** 通过`utm_source`参数跟踪不同渠道的关注转化率: `https://yourdomain.com?utm_source=offline_poster` --- 微信生态强调用户体验优先,建议通过提供有价值的服务引导用户自然关注,而非技术强制手段。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值