内嵌在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写个延迟就可以了。

到这里问题终于解决了。

分享到微信是这样子
在这里插入图片描述

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值