feat: 🚀 对接app容器

添加nativeMethods对象 提供原生方法调用

.vscode/settings.json

@@ -7,6 +7,7 @@
   "cSpell.words": [
     "chahao",
     "columer",
+    "csobj",
     "perc"
   ]
 }

public/static/offline/JSON/config.json

@@ -1 +1,10 @@
-{"code":200,"msg":"操作成功","data":{"sourceUrl":"/static/offline","debug":false,"interfaceUrl":"https://project-iot.test.1000my.com/api","mobileNav":"https://1000my.obs.cn-east-2.myhuaweicloud.com/mobileqmgo/index.html#/","handWriteUrl":"http://saas.1000my.com:8014/words","fileUrl":"https://test-598d.obs.cn-east-2.myhuaweicloud.com","backSocket":"ws://127.0.0.1:7181","clickUploadUrl":"/analysis/v1/web/deviceUseClickDataUpload"}}
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": {
+    "sourceUrl": "/static/offline",
+    "interfaceUrl": "https://project-iot.test.1000my.com/api",
+    "mobileNav": "https://1000my.obs.cn-east-2.myhuaweicloud.com/mobileqmgo/index.html#/",
+    "handWriteUrl": "http://saas.1000my.com:8014/words"
+  }
+}

src/components/PublicComponent/PublicComponent.vue

@@ -27,7 +27,7 @@ const AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackN
 const router = useRouter()
 const route = useRoute()
 const store = useRootStore()
-const { language, showSearch, showDetail, mapStatus } = storeToRefs(store)
+const { language, showSearch, showDetail, mapStatus, nativeMethods } = storeToRefs(store)
 const {
   checkHandleScreen,
   showCountDownDialog,
@@ -64,10 +64,14 @@ onBeforeUnmount(() => {
   window.removeEventListener('touchend', checkHandleScreen)
 })
 
-watch(mapStatus, newVal => {
+watch(mapStatus, async newVal => {
   //当地图加载成功之后自动触发一次屏保弹框以便能进入屏保
   if (newVal) {
-    sleepToWallpaper()
+    if (!nativeMethods.value?.hasProgram()) {
+      return
+    }
+    await sleepToWallpaper()
+    nativeMethods.value?.goScreenSave()
   }
 })
 

src/composables/useHandleScreen.ts

@@ -1,17 +1,19 @@
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch, toRefs } from 'vue'
+import { useRootStore } from '@/store/root'
 import { useRouter } from 'vue-router'
 import { getBackTime } from '@/http/api/base'
 import { useLogout } from '@/composables/useLogout'
-import { isAndroid } from '@/utils/utils'
 
 export const useHandleScreen = (callback: () => void) => {
   const MIN_TIME = 0
   const MAX_TIME = 5
   const CHECK_TIME = 1000
   const DELAY_CHECK_TIME = 400
-  const _isAndroid = isAndroid()
 
   const router = useRouter()
+  const store = useRootStore()
+  const { isAndroid, nativeMethods } = toRefs(store)
+
   const { logout, resetClickNumber, setLogout, addTotalClick } = useLogout()
 
   const totalTime = ref<[number, number]>([60, 60]) //总时间
@@ -53,8 +55,11 @@ export const useHandleScreen = (callback: () => void) => {
     })
   }
 
+  //跳转屏保挂载到全局 供app使用
+  window.sleepToWallpaper = sleepToWallpaper
+
   async function checkHandleScreen(e: TouchEvent) {
-    !_isAndroid && addTotalClick(e)
+    !isAndroid && addTotalClick(e)
     toIndexTime.value = totalTime.value[0]
     toWallpaperTime.value = totalTime.value[1]
 
@@ -68,12 +73,13 @@ export const useHandleScreen = (callback: () => void) => {
         callback()
       }
 
-      //时间为-1时的话不允许弹出屏保弹框 TODO:后期由容器通知
-      if (toWallpaperTime.value === -1) {
+      //调用原生方法 判断有无节目
+      if (!nativeMethods.value?.hasProgram()) {
         return
       }
       await sleepToWallpaper()
       callback()
+      nativeMethods.value?.goScreenSave()
     }, DELAY_CHECK_TIME)
   }
 

src/enums/index.ts

@@ -22,6 +22,6 @@ export enum HTTP_CODE {
   ERR_OK = 200, //数据请求成功(可用于语音状态码)
   ERR_DATA_NULL = 500, //语音无查询信息
   ERR_OVER = 100, //语音播报完毕
-  ERR_NULL = 401, //未识别到语音
+  ERR_NULL = '401', //未识别到语音
   ERR_DISCERNING = 201 //语音识别中
 }

src/store/root/getters.ts

@@ -7,11 +7,18 @@ export type GettersMap = {
   recommendList(): PickRecommendShop[]
   brandFloorList(): Floor[]
   industryList(): Industry[]
+  nativeMethods(): NativeMethods
 }
 
 export type GenGetters = CreateGetters<State, GettersMap>
 
 export const getters: GenGetters = {
+  nativeMethods() {
+    if (this.isAndroid) {
+      return window.android
+    }
+    return window.chrome?.webview?.hostObjects?.sync?.csobj
+  },
   currentBuildingFloorsList() {
     const currentBuilding = this.buildingList.find(building => building.buildingCode === this.device.buildingCode)
     return currentBuilding?.floorList ?? []

src/store/root/state.ts

@@ -1,4 +1,5 @@
 import type { GroupList, BrandRes } from '@/http/api/brand/types'
+import { isAndroid } from '@/utils/utils'
 
 export interface State {
   shopList: Readonly<Shop[]> //店铺列表
@@ -15,6 +16,7 @@ export interface State {
   mapStatus: boolean //地图加载是否成功
   device: Device //当前设备信息
   shop: Shop //店铺信息
+  isAndroid: boolean
 }
 
 export const state = (): State => ({
@@ -31,5 +33,6 @@ export const state = (): State => ({
   config: {} as Config,
   mapStatus: false,
   device: {} as Device,
-  shop: {} as Shop
+  shop: {} as Shop,
+  isAndroid: isAndroid()
 })

src/types/native.d.ts

@@ -0,0 +1,57 @@
+export declare global {
+  type VideoStream = {
+    age: 23
+    genderMale: '女' | '男'
+    faceID: string
+    faceImage: string //人脸图片base64格式 需自行拼接前缀 data:image/jpg;base64,
+  }
+
+  type HardwareInfo = {
+    width: string
+    height: string
+    ip: string
+    code: string
+    mac: string
+    serverIP: string
+  }
+
+  type VoiceContent = {
+    code: number | string
+    msg: string | null
+    data: {
+      modelType: string
+      actionType: string
+      query: string
+      ttsMsg?: string
+      word?: string
+      reply?: string[]
+    }
+  }
+
+  interface NativeMethods {
+    startFace(): boolean //通知APP开启摄像头，开始采集
+    stopFace(): boolean //通知APP结束识别
+    pushFaceBase(): VideoStream //APP推送视频流给应用
+    pushFaceAttribute(): VideoStream //APP获取人脸属性推送给应用
+    takePhoto(): string //应用通知APP拍照 返回Base64
+    startVoice(): boolean //应用通知APP开始语音识别
+    stopVoice(): boolean //应用通知APP开始语音识别
+    voiceContent(): VoiceContent //语音返回数据
+    deviceInfo(): HardwareInfo //设备信息
+    goScreenSave(): void // 针对导视应用与app之间屏保跳转进行通讯
+    hasProgram(): boolean //是否有节目列表 用于前端导视是否弹起屏保弹框
+  }
+  interface Window {
+    sleepToWallpaper(): Promise<void>
+    android: NativeMethods
+    chrome: {
+      webview: {
+        hostObjects: {
+          sync: {
+            csobj: NativeMethods
+          }
+        }
+      }
+    }
+  }
+}