如何让微信里的html应用弹出“点击右上角分享到朋友圈”的图片

阅读 29.1k
评论
    3 个回答
    • 152

    参考一下:

    一个分享按钮,一个隐藏的图片(这个图片绝对定位在右上角)然后就是点击显示,点击隐藏了...

    <a href="javascript:;" onclick="document.getElementById('mcover').style.display='block';">分享到朋友圈</a>
    
    <div id="mcover" onclick="document.getElementById('mcover').style.display='';" style="display: none;">
         <img src="/public/images/guide.png">
    </div>
    

    对应样式

    #mcover {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        display: none;
        z-index: 20000;
    }
    #mcover img {
        position: fixed;
        right: 18px;
        top: 5px;
        width: 260px;
        height: 180px;
        z-index: 999;
    }
    

      对楼上的思路很赞成..
      我看了一下题主提供的网址,发现可以直接查看源文件..

      我还提供另外的几种可以解决的方案:
      + 使用蒙板唐弹出层
      + 使用定时器(无点击效果) setTimeout
      + 直接使用网页

        思路:
        1.判断用户是否翻到当前网页尾部
        2.使用UserAgent判断用户是否时微信浏览器打开
        3.满足上面两条之后,使用1楼@文哥的回到即可。

        判断UserAgent,让网页在用户使用微信浏览器代开时自动弹出分享到朋友圈等。
        微信浏览器的UserAgent代码如下:

        在iPhone下,UA = 
        
        Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B176 MicroMessenger/4.3.2
        
        在Android下,UA = 
        
        Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5660 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 MicroMessenger/4.5.255
        

        可以看到微信中的UserAgent有个MicroMessenger。

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章