在做微信内嵌Web页面开发的时候 ,因为微信修改了一些系统浏览器的特性,所以会有一些坑,在此做一些简单总结。
- 分享到朋友圈实现。
微信不能通过内置网页直接跳转到分享朋友圈的界面,所以如果要加入这个分享朋友圈的按钮,就要加一个提示图片,让用户点击右上角分享,之后用户点击屏幕再取消。
具体开发的时候,在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、发送电子邮件