内嵌在app里的h5页面实现分享

今天在做项目的时候，有一个功能是内嵌在app里的h5页上有一个按钮，点击按钮要呼起微信的通讯录，进行分享，分享完成之后调后端接口记录分享次数。
如下图，呼起微信通讯录的界面是这样子：

在app里h5页面实现分享，我们的实现方式是 h5调用原生的方法实现分享，为什么用这种方式，[点这里可以查看原因]

由于微信限制，首先可以确认的一点是，直接呼起微信通讯录，就记为分享成功（不管是选择联系人去分享还是直接点击页面上的关闭按钮都会识别为分享成功）。

实现分享，并且分享后有其他操作，所以app要提供一个协议供h5进行调用去设置分享的内容，另外h5要提供一个分享完之后的成功回调给app来调用。

踩坑
h5页面提供的回调方法要写成全局方法供app调用
刚开始直接定义了一个方法shareToWxSuccess供app调用

 function shareToWxSuccess() {alert('分享成功')// 分享成功的后续操作}

但是app一直调用不成功，后来把方法设成了全局的，app就调用成功了，这和h5调原生方法一样，都要从全局去取

    window.shareToWxSuccess = function () {alert('分享成功')// 分享成功的后续操作}

在调试分享成功回调的时候，写了一个alert，证明在调这个方法，但是在ios里虽然分享成功了但是alert没有弹，把应用程序关了之后再打开页面alert弹了,但alert弹窗关不了，并且页面假死了，过了一会app闪退。

出现这个问题的原因是因为app在调h5的方法，这是一个主线程，而且h5在调系统的alert弹窗，这又是一个主线程，所以同时出现2个主线程，页面就卡死了，解决办法是alert写个延迟就可以了。

到这里问题终于解决了。

分享到微信是这样子

内嵌在app里的h5页面实现分享相关推荐

APP里引用H5页面时，高度设置引起的底部白边等问题
H5页面在app里的常见问题: 1.当H5页面高度设置为100%,设置背景色时,发现高度有内容撑开,背景色没有铺满整个背景. 2.当H5页面高度设置为100vh,设置背景色时,背景设能铺满,但是上拉时 ...
客户端相关知识学习（一）之混合开发，为什么要在App中使用H5页面以及应用场景、注意事项...
混合开发随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
Hybrid App中原生页面 VS H5页面（分享）
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有" ...
app里面的h5的定位方式（夜神模拟器篇）
一.首先确定模拟器是否与电脑连接输入命令adb connect 127.0.0.1:62001(如图所示) 输入adb devices查看是否连接成功二.开发在打包代码时,让开发人员开启webvi ...
app 中嵌入H5页面，H5跳转H5页面的跳转实现
app 中嵌入H5页面,H5跳转H5页面的跳转实现模拟创建a标签,并将href给到a标签点击实现: 模拟创建a标签,并将href给到a标签点击实现: var a = document.createE ...
微信及企业微信内嵌浏览器内核信息及H5跑分数据-企业微信开发
加我微信li570467731,拉你进二百多人企业微信开发同行群(文末有二维码). 企业微信开发三部曲: <企业微信应用开发概述篇(免费)>已完结: <企业微信开发第三方应用开发篇& ...
微信 H5页面自定义分享link不起作用
微信 H5页面自定义分享link不起作用最近在做这么一个功能: H5页面在微信内打开并通过设置微信自定义分享来分享出指定的标题.图片.link 但是却遇到了问题,分享指定的link没起作用,正常通过 ...
h5页面生成图片分享到微信js_微信端h5页面如何调用分享页面的接口
这次给大家带来微信端h5页面如何调用分享页面的接口,微信端h5页面调用分享页面接口的注意事项有哪些,下面就是实战案例,一起来看一下. 最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加 ...
html怎么检测分享朋友圈没,微信中里如何判断页面被分享到朋友圈和微信号的成功，附代码...
微信中里如何判断页面被分享到朋友圈和微信号的成功,附代码其实微信已经给好了回调函数了. 见代码: /p> "http://www.w3.org/TR/html4/loose.dtd& ...

内嵌在app里的h5页面实现分享

内嵌在app里的h5页面实现分享相关推荐

最新文章

热门文章