Communication (H5 articles) between -h5 pages with ios, Andrews mixed-use development

Communication (H5 articles) between -h5 pages with ios, Andrews mixed-use development

• WebView (network view) can load the page, it can be regarded as a browser. It uses the WebKit rendering engine load the page
• First you need to determine which end

• Use navigator.userAgent get browser properties

The following may be inaccurate in specific webView userAgent according ios Andrews dependent

// 可能不准确 具体的 webView的userAgent 根据ios 安卓而定

           var ua = navigator.userAgent;
            trident: ua.indexOf('Trident') > -1, // IE内核
            presto: ua.indexOf('Presto') > -1, // opera内核
            webKit: ua.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') == -1, // 火狐内核
            mobile: !!ua.match(/AppleWebKit.*Mobile.*/) || !!ua.match(/AppleWebKit/), // 是否为移动终端
            ios: !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // IOS终端
            android: ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1, // 安卓终端
            iPhone: ua.indexOf('iPhone') > -1, // 是否为iphone或QQHD浏览器
            iPad: ua.indexOf('iPad') > -1, // 是否为iPad
            webApp: ua.indexOf('Safari') == -1, // 是否web应用程序，没有头部与底部
            QQbrw: ua.indexOf('MQQBrowser') > -1, // QQ浏览器(手机上的)
            weiXin: ua.indexOf('MicroMessenger') > -1, // 微信
            QQ: ualower.match(/\sQQ/i) == " qq", // QQ App内置浏览器（需要配合使用）
            weiBo: ualower.match(/WeiBo/i) == "weibo", // 微博
            ucLowEnd: ua.indexOf('UCWEB7.') > -1, //
            ucSpecial: ua.indexOf('rv:1.2.3.4') > -1,
            webview: !(ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/)) && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/),
            ucweb: function () {
                try {
                    return parseFloat(ua.match(/ucweb\d+\.\d+/gi).toString().match(/\d+\.\d+/).toString()) >= 8.2
                } catch (e) {
                    if (ua.indexOf('UC') > -1) {
                        return true;
                    }
                    return false;
                }
            }(),
            Symbian: ua.indexOf('Symbian') > -1,
            ucSB: ua.indexOf('Firofox/1.') > -1

• navigator.userAgent.indexOf ( "Android")> -1 || navigator.userAgent.indexOf ( "Linux")> -1 for the Android phone webView

• navigator.userAgent.indexOf ( "iPhone")> -1 for Apple phone webView

By determination of iOS, Andrews codes for different services, for example:

//此代码为 关闭webView回到原生app
//处理交互 方法名要和 native app内定义的对应
 brak() {
      var u = navigator.userAgent;
      if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
        //安卓手机
        window.android.backToApp();
      } else if (u.indexOf("iPhone") > -1) {
        //苹果手机
        window.webkit.messageHandlers.backToApp.postMessage({});//{}内可传值
      }
    },

Development projects, such as the APP h5 page request data needs token, the page is not logged in, only to ios, andriod traffic to pass to the page

//  这里需要定义方法，让IOS、Andriod调用传入 html中
  window.obtainToken = function(token) {
        window.token = token;
        _this.$store.state.token = token;
        _this.$store.state.token = token;
        postData();// 进行接口请求等操作
      };

To be continued. . .