产品日常——动手写个App下载浮层

时间:2019-05-11 09:49来源:计算机教程
判断是否在小程序中 这个问题,网上一搜,答案很多,有说用UA的,有说用微信注入的JS对象的,有说用原生提供判断方法的。 UA的有一个很大的问题,iOS判断不了,它是没有miniProgra

判断是否在小程序中

这个问题,网上一搜,答案很多,有说用UA的,有说用微信注入的JS对象的,有说用原生提供判断方法的。
UA的有一个很大的问题,iOS判断不了,它是没有miniProgram这个字段的。在开发工具和Android中是可以的。
而__wxjs_environment这个对象,在测试的一台三星上也不行,Android6.0系统。
而微信提供的原生方法,wx.miniProgram.getEnv。在小程序和微信浏览器打开,是没有问题的。
但是在浏览器里面,回调不执行啊啊啊啊!!!
这就导致了一个问题,如果在浏览器中打开,因为回调没有执行,所以需要再执行一遍,不在小程序时的代码逻辑。
如果只是简单的显示隐藏,就还好,小程序里多走一遍也没有关系,但是,如果是一些对执行次数敏感的代码,就会有问题。
我们做了检测,虽然是回调,但是在小程序里,回调函数的执行总是排在前面。所以,前期决定先定义一个Flag,如果执行过一遍的代码,Flag置为false,就不再执行了。
在后续开发中,还是觉得这个方案不大稳妥,虽然不清楚微信的JS引擎如何解析JS代码,但是总归也是要回归标准的,回调的代码极有可能在后面才执行。
我提出一个方案,没有必要非要判断在小程序内,因为小程序的UA虽然在iOS中没有miniProgram的字段,但是却有microMessage的字段。
我们逆向思维一下,只要判断这个代码不在微信中即可,根据microMessage这个字段。

if (ua.indexof('MicroMessage') == -1) {//说明不在微信中
    // 走不在小程序的逻辑
} else {
    wx.miniProgram.getEnv(function(res) {
        if (res.miniProgram) {
            // 走在小程序的逻辑
        } else {
            // 走不在小程序的逻辑
        }
    })
}

这样基本上可以解决上面提到的次数敏感代码执行的问题。

实现逻辑很简单,对用户浏览的文章页面判断:

一个小坑

提一个小坑,为了代码的健壮,我习惯性在调用方法时,写成下面的样子:

if(wx && wx.miniProgram && wx.mingProgram.getEnv) {
    wx.mingProgram.getEnv(function(){})
}

但是,这么写,在实际小程序里,wx一直都是undefined。
只能直接写里面的判断代码,就好使了。
这是什么黑科技??

不管怎样,微信是爸爸,小程序有坑也得忍着。我们做得H5页面,据说还不如小程序日活高。
真是要笑着活下去……
end

<script>
   var u = navigator.userAgent;
   var isiOS = !!u.match(/(i[^;] ;( U;)? CPU. Mac OS X/);
   if (navigator.userAgent.toLowerCase().match(/driverhelper/) == null && isiOS) {
      var banner = document.getElementById('aves-landing');
      banner.onload = function() {
      document.getElementsByTagName('body')[0].style.marginTop = banner.height   'px';
      };
   banner.style.display = 'inline';
   }
</script>

现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我……
whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成。
最后和产品商量之后的决定是:小程序中特有的营销推广的页面,用小程序编写,剩下的黄金流程,内嵌H5解决。
听起来好像很简单,but,没有想象中那么简单。

好了,现在Android用户不会在App中看到奇怪的下载提示了(通过isiOS判断后,只有iOS的用户可以看到这条下载浮层)。但是,一下子减少了70%的用户,求心理阴影面积。

  1. 是否在App的Web View中
  2. 如果是,则不显示下载浮层
  3. 如果不是,则在顶部显示一个下载浮层
  4. 用户点击浮层,下载安装包

为了增强工具型App的运营能力,我们在上个版本加强了产品的内容功能。由运营的同学每天筛选、编辑一些高质量的用车文章或交通信息推送给用户。上线运营一段时间后发现,虽然文章List的整体位置处于首页中下屏,部分小屏机型(如iPhone4s、iPhone5)甚至需要滑屏才能看到,但PV还是很可观的。页面的分享率(分享次数/PV),在1%~2%左右。虽然不是很高,但是考虑到近期App的推广预算缩水,我想在分享的文章页上加一个推广浮层,顺便带一点下载。

<small>注:以上代码的部分变量名和url做了替换,仅作参考示例。</small>

最后,测试效果如下图。

我不生产代码,我只是代码的搬运工。

一问Android的工程湿才知道,他当初并没有单独为这个Web View设置自定义UA!当我默默地把这条"bug"提交jira后,陷入了沉思···

第一步,首先判断用户是在App中浏览文章,还是通过分享的链接打开的。方法就是对当前浏览器(广义)的UA([User Agent](User Agent))做标识符匹配。因为,为了便于后台的统计分析,开发者一般会修改默认的UA,添加一些自定义的标记(比如,比如UA 版本号、项目名称等)。我们通过正则表达式来匹配这些特殊标记,就可以判断出来是不是自己人。

本来到这里就应该结束了,我可以满怀期待地等待后台统计结果。谁知道打开Android测试机一看,App中的文章居然也带着下载浮层 !天了噜,为什么第2个JS中的判断代码在Android机上失效了?

编辑:计算机教程 本文来源:产品日常——动手写个App下载浮层

关键词: