• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

当h5的代码嵌套到app或者微信或者小程序的判断公用方法

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1. 原理: 使用浏览器的userAgent和微信环境的标识

2. 微信的判断为什么放在sessionStorage而不是localStorage

    1. 新版本的微信中, 关闭小程序localStorage不会清除, 导致h5的代码既在可以在小程序使用又可以在微信浏览器中使用判断会有问题

    2. sessionStorage在新版小程序中跳转小程序页面就会清除

3. 代码如下:

var sessionStorage = {

    sessionStorage: window.sessionStorage || {},

    contains: function(key) {

        return this.sessionStorage.hasOwnProperty(key);

    },

    //获取指定key的数据

    getItem: function(key) {

        if (this.contains(key)) {

            return JSON.parse(this.sessionStorage[key]);

        }

        return null;

    },

    //存储数据

    setItem: function(key, value) {

        this.sessionStorage[key] = JSON.stringify(value);

    },

};

var browser = {

    userAgent: navigator.userAgent,

    //是否是iphone

    iPhone: function () {

        return this.userAgent.indexOf('iPhone') > -1;

    },

    //是否是iPad

    iPad: function () {

        return this.userAgent.indexOf('iPad') > -1;

    },

    //ios的手机

    ios: function () {

        return this.iPhone() || this.iPad();

    },

    //android的手机

    android: function () {

        return this.userAgent.indexOf('Android') > -1 || this.userAgent.indexOf('Linux') > -1;

    },

    //QQ浏览器

    qqBrowser: function () {

        return this.userAgent.indexOf('QQBrowser') > -1;

    },

    //是不是在微信环境打开, 是微信环境可能会调取一些跟微信公众号有关的接口

    weixin: function () {

        return this.userAgent.indexOf('MicroMessenger') > -1;

    },

    //是不是小程序

    miniProgram:function(){

        if(window.__wxjs_environment === 'miniprogram'){//ios 可以取值

            sessionStorage.setItem('isMiniProgram', true);

            return true;

        }else if(/miniprogram/ig.test(this.userAgent.toLowerCase())){//低版本的微信可能拿不到

            sessionStorage.setItem('isMiniProgram', true);

            return true;

        }else if(sessionStorage.getItem('isMiniProgram')){//异步存储过

            return true;

        }else{//todo

            //没有weixin对象有2种情况:1微信没初始化好,2不是微信浏览器

            if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {//异步

                //非微信浏览器环境先把小程序设置成false,如果是微信再异步设置成true

                sessionStorage.setItem('isMiniProgram', false);

                document.addEventListener('WeixinJSBridgeReady', function(){

                    if(window.__wxjs_environment === 'miniprogram'){

                        sessionStorage.setItem('isMiniProgram', true);

                        return true;

                    }else{

                        sessionStorage.setItem('isMiniProgram', false);

                    }

                }, false)

            } else {

                if(window.__wxjs_environment === 'miniprogram'){

                    sessionStorage.setItem('isMiniProgram', true);

                    return true;

                }else{

                    sessionStorage.setItem('isMiniProgram', false);

                }

            }

        }

    },

    //是否嵌套的自己的app

    isApp: function () {

        return this.ua.indexOf('app商定的值') > -1;

    },

    //获取userAgent塞入的一些对象值, 一般是嵌套app, app包的浏览器塞一些值跟h5交互

    getUaParams: function () {

        var matchers = this.userAgent.match(/\-\-\[([\s\S]+?)\]\-\-/i);

        if (matchers && matchers.length>1) {

            var uaObj = JSON.parse(matchers[1]);

            return uaObj;

        }

        return {};

    }

}

4. chrom模拟微信小程序app内核浏览器的方法;注意:模拟小程序时WeixinJSBridgeReady不会有callback,建议在session加入isMiniProgram:true

  

 

    1.模拟微信: 选中 Mobile, 填入:Chrome/33.0.0.0 Mobile Safari/537.36 MicroMessenger/6.0.0.54_r849063.501 NetType/WIFI

    2.模拟小程序: 先模拟出微信再在session中添加isMiniProgram:true

    3.模拟app:选中Mobile,填入:跟app商定的一些值,

        比如格式:app商定的值--[{"XXX":"XXX","XXX":"XXX",...}]--

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序中如何获取for循环的item相关值到JS页面的问题发布时间:2022-07-18
下一篇:
微信小程序之组件的集合(六)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap