Explorar el Código

新增platform.js平台计算

cuiyalong hace 2 años
padre
commit
1a4b43e724

+ 9 - 0
jydocs-mobile/src/App.vue

@@ -11,6 +11,7 @@
 </template>
 <script>
 import layout from '@/components/layout.vue'
+import { iosBackRefresh } from '@/utils/globalFunctions'
 import { hiddenBottomBar } from '@/utils/globalFunctionsForApp'
 export default {
   name: 'App',
@@ -34,6 +35,14 @@ export default {
   },
   mounted () {
     hiddenBottomBar()
+    this.bindEventsForH5()
+  },
+  methods: {
+    bindEventsForH5 () {
+      if (this.$envs.inH5) {
+        iosBackRefresh()
+      }
+    }
   }
 }
 </script>

+ 11 - 3
jydocs-mobile/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" v-html="headerInfo.actionRightText"></span>
@@ -44,6 +44,9 @@ export default class Layout extends Vue {
   protected clearLayoutConfig!: any
 
   useConf = false
+  $route: any
+  $router: any
+  $envs: any
 
   @Watch('$route.path')
   onRouterChange () {
@@ -52,8 +55,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 () {
@@ -129,6 +133,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 {

+ 20 - 5
jydocs-mobile/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()
@@ -420,3 +415,23 @@ export function replaceKeyword (value: any | undefined, oldChar: any, newChar: a
   }
   return value
 }
+
+// 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()
+  })
+}

+ 4 - 8
jydocs-mobile/src/utils/globalFunctionsForApp.ts

@@ -1,15 +1,13 @@
-import {
-  isWeiXinBrowser
-} from './globalFunctions'
+import { envs } from '@/utils/platform'
 declare const JyObj: 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) {
@@ -20,9 +18,7 @@ export function hiddenBottomBar (params = 0) {
 
 // 分享封装
 export function shareToOthers (options: any = {}) {
-  if (inWeiXinBrowser) {
-    // 微信分享
-  } else {
+  if (inApp) {
     // app分享
     try {
       // options.type--1微信分享,2qq分享,3朋友圈分享

+ 9 - 9
jydocs-mobile/src/utils/index.ts

@@ -1,17 +1,17 @@
 import Vue from 'vue'
 import './globalDirectives'
 import './globalFilters'
-import { isWeiXinBrowser, androidOrIOS } from '@/utils/globalFunctions'
+import { env, envs } from './platform'
 
-const inWeiXinBrowser = isWeiXinBrowser()
-const isAndroidOrIos = androidOrIOS()
-
-Vue.prototype.$env = {
-  isWeiXinBrowser: inWeiXinBrowser,
-  platform: inWeiXinBrowser ? 'wx' : 'app',
-  isAndroid: isAndroidOrIos === 'android',
-  isIOS: isAndroidOrIos === 'ios'
+declare module 'vue/types/vue' {
+  interface Vue {
+    $env: any;
+    $envs: any;
+  }
 }
+
+Vue.prototype.$env = env
+Vue.prototype.$envs = envs
 Vue.prototype.$firstUrl = location.href.split('#')[0]
 
 // 正式环境下屏蔽console.log

+ 90 - 0
jydocs-mobile/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

+ 4 - 3
jydocs-mobile/src/utils/wxShare.ts

@@ -1,17 +1,18 @@
 import Vue from 'vue'
 import WeiXinSDK from '@/utils/wx-js-sdk-register.ts'
-import { isWeiXinBrowser, androidOrIOS } from '@/utils/globalFunctions'
-import { getWxSdkSign } from '@/api/index.ts'
+import { androidOrIOS } from '@/utils/globalFunctions'
+import { inWeiXinBrowser } from '@/utils/platform'
+import { getWxSdkSign } from '@/api/'
 
 declare module 'vue/types/vue' {
   interface Vue {
     $env: any;
+    $envs: any;
     $registerWxSdk: any;
     $wxSdk: any;
   }
 }
 
-const inWeiXinBrowser = isWeiXinBrowser()
 const isAndroidOrIos = androidOrIOS()
 
 export async function getSdkSign (url: string) {

+ 4 - 4
jydocs-mobile/src/views/purchase/purchase.vue

@@ -101,7 +101,7 @@ export default class extends Vue {
   tel = ''
   regPhoneExg = /^1[3-9]\d{9}$/
   $router: any
-  $env: any
+  $envs: any
 
   response = {
     docName: '',
@@ -209,10 +209,10 @@ export default class extends Vue {
 
   // 剑鱼标讯产品与服务线上购买服务条款
   clause2 () {
-    if (this.$env.platform === 'app') {
-      location.href = '/jyapp/front/staticPage/dataExport_serviceterms.html'
-    } else {
+    if (this.$envs.inWX) {
       location.href = '/front/staticPage/wx-serviceterms.html'
+    } else {
+      location.href = '/jyapp/front/staticPage/dataExport_serviceterms.html'
     }
   }
 }