微信Web开发（一）分享到朋友圈按钮以及WeixinJSBridge

在做微信内嵌Web页面开发的时候 ，因为微信修改了一些系统浏览器的特性，所以会有一些坑，在此做一些简单总结。

1. 分享到朋友圈实现。

微信不能通过内置网页直接跳转到分享朋友圈的界面，所以如果要加入这个分享朋友圈的按钮，就要加一个提示图片，让用户点击右上角分享，之后用户点击屏幕再取消。

具体开发的时候，在HTML里面加入

<div id="mcover"  style="display: none;">
                 <img src="./assets/share.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: 380px;
        z-index: 999;
    }

         $('#sharebtn').on({ 'touchstart' : function(){
               document.getElementById('mcover').style.display='block';
          }


        $('#mcover').on({ 'touchstart' : function(){
                document.getElementById('mcover').style.display='';
            }
        });

也就是创建一个占满全屏，包含提示图片的Dom对象，点击分享按钮的时候呈现，再点击这个Dom消失。

这个方法参考了SegmentFault里的一篇文章，但是暂时找不到来源了。

WeixinJSBridge

微信通过Native和Web之间的通信，为浏览器注入了一些新的方法。这一块推荐大家去学习 WeixinApi
这个开源项目和它的源码：

功能有：

1、分享到微信朋友圈
2、分享给微信好友
3、分享到腾讯微博
4、新的分享接口，包含朋友圈、好友、微博的分享（for iOS）
5、隐藏/显示右上角的菜单入口
6、隐藏/显示底部浏览器工具栏
7、获取当前的网络状态
8、调起微信客户端的图片播放组件
9、关闭公众平台Web页面
10、判断当前网页是否在微信内置浏览器中打开
11、增加打开扫描二维码
12、支持WeixinApi的错误监控
13、检测应用程序是否已经安装（需要官方开通权限）
14、打开微信内置地图（认证号可测试）
15、发送电子邮件