feat: 新增platform.js平台计算

src/App.vue

@@ -11,6 +11,7 @@
 </template>
 <script>
 import layout from '@/components/layout.vue'
+import { iosBackRefresh } from '@/utils/globalFunctions'
 export default {
   name: 'App',
   components: {
@@ -27,6 +28,16 @@ export default {
       cashViews: ['home'],
       env: this.$env
     }
+  },
+  mounted () {
+    this.bindEventsForH5()
+  },
+  methods: {
+    bindEventsForH5 () {
+      if (this.$envs.inH5) {
+        iosBackRefresh()
+      }
+    }
   }
 }
 </script>

src/components/layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="j-container" :class="{'transparent-header': headerInfo.transparentHeader}">
-    <div class="j-header jy-app-header" v-if="!weixinBrowser" :class="{hideBorder: headerInfo.hideBorder}">
+    <div class="j-header jy-app-header" v-if="showHeader" :class="{hideBorder: headerInfo.hideBorder, 'h5-header': $envs.inH5}">
       <van-icon class="header-left" :style="headerInfo.actionLeftStyle" :class="{ hide: headerInfo.actionLeftHide }" name="arrow-left" @click="goBack" />
       <span class="header-title" :style="headerInfo.titleStyle">{{ headerInfo.title }}</span>
       <span class="header-right" :style="headerInfo.actionRightStyle" @click="actionRight">{{ headerInfo.actionRightText }}</span>
@@ -44,6 +44,7 @@ export default class Layout extends Vue {
   protected clearLayoutConfig!: any
 
   useConf = false
+  $envs: any
 
   @Watch('$route.path')
   onRouterChange () {
@@ -51,8 +52,9 @@ export default class Layout extends Vue {
     // console.log('headerConfig', this.conf)
   }
 
-  get weixinBrowser () {
-    return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
+  get showHeader () {
+    const { inApp, inH5 } = (this.$envs) as any
+    return inApp || inH5
   }
 
   get conf () {
@@ -128,6 +130,10 @@ export default class Layout extends Vue {
     box-sizing: border-box;
     background: #fff;
     font-family: "Avenir", Helvetica, Arial, sans-serif;
+    &.h5-header {
+      height: 40px;
+      padding: 0 12px;
+    }
   }
   &.hideBorder {
     &::after {

src/utils/globalFunctions.ts

@@ -1,10 +1,5 @@
 import moment from 'moment'
 
-// 是否是微信浏览器 ------------>
-export function isWeiXinBrowser () {
-  return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
-}
-
 // 在安卓或者ios中
 export function androidOrIOS () {
   const u = navigator.userAgent.toLowerCase()
@@ -258,3 +253,23 @@ export function inputFocusHideFooter (inputs: Array<any>, footer: any) {
     }, false)
   }
 }
+
+// ios或者h5返回回调
+export function iosBackInvoke (callback: any) {
+  let isPageHide = false
+  window.addEventListener('pageshow', function () {
+    if (isPageHide) {
+      callback && callback()
+    }
+  })
+  window.addEventListener('pagehide', function () {
+    isPageHide = true
+  })
+}
+
+// ios或者h5返回刷新
+export function iosBackRefresh () {
+  iosBackInvoke(() => {
+    location.reload()
+  })
+}

src/utils/globalFunctionsForApp.ts

@@ -1,17 +1,15 @@
-import {
-  isWeiXinBrowser
-} from './globalFunctions'
+import { envs } from './platform'
 
 declare const JyObj: any
 declare const window: any
 
-const inWeiXinBrowser = isWeiXinBrowser()
+const inApp = envs.inApp
 
 // 是否是微信浏览器
 // 参数0隐藏底部导航，参数1，显示底部导航
 export function hiddenBottomBar (params = 0) {
   // 如果是app端，隐藏底部导航
-  if (!inWeiXinBrowser) {
+  if (inApp) {
     try {
       JyObj.hiddenBottom(params + '')
     } catch (error) {
@@ -34,7 +32,7 @@ export function registerPayCallBack (fns: any = {}) {
     '-1': '支付失败'
   }
   // 如果是app端，隐藏底部导航
-  if (inWeiXinBrowser) return
+  if (!inApp) return
   const empty = Object.keys(fns).length === 0
   if (!empty) {
     window.payCallBack = function (status) {

src/utils/globalVariable.ts

@@ -1,29 +1,23 @@
 import Vue from 'vue'
 import WeiXinSDK from '@/utils/wx-js-sdk-register.ts'
-import { isWeiXinBrowser, androidOrIOS } from '@/utils/globalFunctions.ts'
 import { getWxSdkSign } from '@/api/pay.ts'
+import { env, envs } from './platform'
 
 declare module 'vue/types/vue' {
   interface Vue {
     $env: any;
+    $envs: any;
     $registerWxSdk: any;
     $wxSdk: any;
   }
 }
 
-const inWeiXinBrowser = isWeiXinBrowser()
-const isAndroidOrIos = androidOrIOS()
-
 // 全局变量
-Vue.prototype.$env = {
-  isWeiXinBrowser: inWeiXinBrowser,
-  platform: inWeiXinBrowser ? 'wx' : 'app',
-  isAndroid: isAndroidOrIos === 'android',
-  isIOS: isAndroidOrIos === 'ios'
-}
+Vue.prototype.$env = env
+Vue.prototype.$envs = envs
 
 // 如果是微信浏览器, 注册一个微信SDK初始化函数
-if (inWeiXinBrowser) {
+if (envs.inWX) {
   Vue.prototype.$registerWxSdk = () => {
     getWxSdkSign({ url: location.href.split('#')[0] }).then(result => {
       const res = result.data

src/utils/platform.ts

@@ -0,0 +1,90 @@
+declare const window: any
+
+const ua = navigator.userAgent
+const hostname = location.hostname.toLowerCase()
+
+// 在安卓或者ios中
+export const androidOrIOS = function () {
+  const u = ua.toLowerCase()
+  let agent = ''
+  if (/iphone|ipod|ipad|ios/.test(u)) {
+    agent = 'ios'
+  } else {
+    agent = 'android'
+  }
+  return agent
+}
+
+/**
+ * 用于判断是否在APP容器内
+ * @returns {boolean}
+ */
+export const getIsInTheAppContainer = function () {
+  const u = ua.toLowerCase()
+  // 判断是否在app环境下
+  let inApp = false
+  // app调试ua
+  if (u.includes('jianyuapp')) {
+    inApp = true
+    return inApp
+  }
+  if (window.JyObj && window.JyObj.mock) {
+    return inApp
+  }
+  try {
+    if (androidOrIOS() === 'ios') {
+      const iniOSApp = typeof window.webkit.messageHandlers.skipAppointTab.postMessage === 'function'
+      inApp = iniOSApp
+    } else {
+      const inAndroidApp = typeof window.JyObj !== 'undefined'
+      inApp = inAndroidApp
+    }
+  } catch (e) {
+    console.warn(e)
+    inApp = false
+  }
+  return inApp
+}
+
+export const getIsH5HostName = () => {
+  return hostname.includes('h5')
+}
+
+// 判断是否是微信浏览器
+export const inWeiXinBrowser = ua.toLowerCase().indexOf('micromessenger') !== -1
+const platformOS = androidOrIOS()
+const inApp = getIsInTheAppContainer()
+
+export const getPlatform = () => {
+  const h5host = getIsH5HostName()
+  if (inApp) {
+    return 'app'
+  } else if (h5host) {
+    return 'h5'
+  } else if (inWeiXinBrowser) {
+    return 'wx'
+  } else {
+    return 'h5'
+  }
+}
+
+// 存放基本变量的集合
+const _env = {
+  ua,
+  platformOS,
+  platform: getPlatform()
+}
+
+// 对基本变量扩展计算的集合
+const inH5 = _env.platform === 'h5'
+const _envs = {
+  inWX: _env.platform === 'wx',
+  inH5,
+  inApp: inApp,
+  inAppOrH5: inApp || inH5,
+  inAndroid: _env.platformOS === 'android',
+  inIOS: _env.platformOS === 'ios'
+}
+
+export const env = _env
+export const envs = _envs

src/views/buy/Buy.vue

@@ -87,7 +87,7 @@
             <span>我已阅读，理解并接受</span>
             <a class="link highlight-text"
               @click.stop.prevent="toServiceTerms"
-              :href="$env.isWeiXinBrowser ? '/front/staticPage/wx-serviceterms.html' : '/jyapp/front/staticPage/dataExport_serviceterms.html'"
+              :href="$envs.inWX ? '/front/staticPage/wx-serviceterms.html' : '/jyapp/front/staticPage/dataExport_serviceterms.html'"
             >
             《剑鱼标讯线上购买与服务条款》
             </a>
@@ -276,7 +276,7 @@ export default class BuyReport extends Vue {
   mounted () {
     // 解决安卓微信，在支付页面无交互的情况下，popstate不会触发的问题
     // 此处使用变量控制
-    if (this.$env.isAndroid && this.$env.isWeiXinBrowser) {
+    if (this.$envs.inAndroid && this.$envs.inWX) {
       const t = sessionStorage.getItem('datareport-ordercode')
       if (t) {
         sessionStorage.removeItem('datareport-ordercode')
@@ -416,7 +416,7 @@ export default class BuyReport extends Vue {
       if (res.error_code === 0 && res.data.ordercode) {
         this.$toast.clear()
         this.saveState()
-        if (this.$env.isWeiXinBrowser) {
+        if (this.$envs.inWX) {
           location.href = `/weixin/pay/datareport?ordercode=${res.data.ordercode}`
         } else {
           this.$router.replace(`/pay?ordercode=${res.data.ordercode}&from=buy`)

src/views/order/detail.vue

@@ -326,7 +326,7 @@ export default class OrderDetail extends Vue {
     }
     if (this.orderInfo.state === 0) {
       // 去支付, 微信需要跳转到指定路径
-      if (this.$env.isWeiXinBrowser) {
+      if (this.$envs.inWX) {
         location.href = payUrl[this.$env.platform]
       } else {
         this.$router.push(payUrl[this.$env.platform])

src/views/pay/Pay.vue

@@ -115,7 +115,7 @@ export default class Pay extends Vue {
     const query: any = this.$route.query
     this.orderInfo.ordercode = query.ordercode
     sessionStorage.setItem('datareport-ordercode', query.ordercode)
-    if (this.env.isWeiXinBrowser) {
+    if (this.$envs.inWX) {
       // 微信端注册wxjsSdk
       this.$registerWxSdk()
     }
@@ -126,7 +126,7 @@ export default class Pay extends Vue {
     this.getInfo()
 
     // 微信下使用addEventListener监听返回 跳转订单详情
-    if (this.env.isWeiXinBrowser) {
+    if (this.$envs.inWX) {
       this.pushHistory()
 
       window.addEventListener('popstate', this.onpopstate)
@@ -186,7 +186,7 @@ export default class Pay extends Vue {
         this.$toast.clear()
         if (res.data && Object.keys(res.data).length !== 0) {
           // 获取参数成功，判断是微信h5还是非微信h5
-          if (this.env.isWeiXinBrowser) {
+          if (this.$envs.inWX) {
             this.wxPayCallBack(res.data.payStr)
           } else {
             this.appPayCallBack(res.data.payStr)