继上次写完h5跳转小程序后,又有需求,需要通过h5跳转app,为App引流,于是乎又来了!本以为有了之前的经验会蛮顺利的,结果还是有意想不到的问题。就记录一下吧。

首先还是和小程序一样的步骤,配置安全域名等,这次问到了相关的配置内容,

公司的app是ios和Android两个版本,共同隶属一个公众号(服务号),这里很重要,一定要和运营的同事搞清楚,你们的两个版本App的Appid绑在那个公众号下(下面会有图说明),这次的主要问题就是这里,对接的同事没有沟通好,导致很长时间无法通过config验证。浪费了好几天时间。

wx.config验证

ios h5唤醒app 微信h5唤起app_微信

上述图中的红框内的appid为公众号的appid(如下图所示的公众号的appid),是微信分给公众号的,而不是公众号分给两个版本的App的appid,懂得应该知道我在说啥。一般来说和小程序的公众号是一个。

绿色框框的是必填,只要有就行

ios h5唤醒app 微信h5唤起app_公众号_02

因为我们有两个平台,所以对接的同事搞混了,搞了好久,气死。上个appid说完就可以说下个appid了,真的是好多appid无语死了。。。是个东西都叫appid算了开放标签的html部分

ios h5唤醒app 微信h5唤起app_公众号_03

上述代码是开放标签的html,这个appid,顾名思义是需要跳转的App的appid,因为我不太了解app开发方面的东西,所以一直以为ios和Android有不同的appid,需要分手机环境判断【这个也我也在其他文章中看到需要判断】。但是我司的两个版本的app分别绑定在了微信公众号下,微信给了一个通用的appid,所以上述Appid直接写微信分配的appid就ok,开放标签会根据不同的手机型号,去调用app。给有相同情况的人一个参考。

ios h5唤醒app 微信h5唤起app_ios h5唤醒app_04

上图中的appid就是填入开放标签的appid。开放标签样式问题

ios h5唤醒app 微信h5唤起app_App_05

ios h5唤醒app 微信h5唤起app_公众号_06


下面说一下样式,还是之前的老办法,wx-open-launch-app采用透明,(上图是开放标签opacity:0.3,红色,mock标签蓝色,opacity:1,显示重叠)占位一个相同样式的button按钮,但是这次考虑到有时候wx-open-launch-app加载失败的情况,就把mock的button加了个事件,不过这样叠加可能会导致两个事件冲突,

解决办法有两种:

1.、是阻止冒泡向上,我没实践只是想了一种方法,有小伙伴用了可以告诉我行的通吗。

2、利用z-index,把wx-open-launch-app置于上层,这样就不会引起重叠事件冲突。很nice。

加载失败时候,mock标签的事件就通过url跳转到appstore或者安卓的下载页,手动下载了。

上述说的都是在微信浏览器中的情况。那普通浏览器中,ios用的就是scheme,不过会出现一个问题,就是如果手机没有安装app的话,就会弹出“Safari打不开该网页,因为网址无效。”如下图所示。

然后我自行写了定时器去跳到App Store页面。这个最好的解决办法据说是,ios端用Universal Links,但是ios app的小伙伴好像不想改,在沟通。。。如果有好的解决办法也可以留言告知。

ios h5唤醒app 微信h5唤起app_ios h5唤醒app_07


安卓就直接调至下载页下载。

或许有没有更好的方法判断手机是否装app,欢迎留言讨论。