zoukankan      html  css  js  c++  java
  • 小程序内嵌H5——判断小程序环境的坑

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

    判断是否在小程序中

    这个问题,网上一搜,答案很多,有说用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

    经由评论区trigger-11提醒,在小程序开发时,需导入jweixin-1.3.2.js,jweixin-1.2.0.js是公众号开发的,不支持小程序相关调用。

  • 相关阅读:
    druid去掉广告
    nested exception is java.lang.NoClassDefFoundError: org/aspectj/util/Partial
    org.mybatis.spring.transaction.SpringManagedTransaction.getTimeout()Ljava/lang/Integer;
    @Transactional没起作用ssm框架
    Mac下Vim编辑快捷键小结(移动光标)
    埋点
    mysql 删除以某字符串开头的表
    idea去掉无效引用
    一个有用的正则表达式
    系统集成思维导图
  • 原文地址:https://www.cnblogs.com/liuyongjia/p/9102647.html
Copyright © 2011-2022 走看看