# 在Android设备上运行

本文档将指导你通过必须的步骤在Android设备上运行 JsView App，为生产做准备。

提示

下文所指的设备包括 Android 盒子和电视

# 1. 代码加入notifyPageLoaded调用

请按照如下的说明在vue代码中加入调用，apk到收到此调用后才会结束启动过程，去掉启动图(否则会显示加载超时的界面)

<script setup>
import { onMounted } from "vue"
import { jJsvRuntimeBridge } from "jsview"

...(略)

onMounted(()=>{
  jJsvRuntimeBridge.notifyPageLoaded()
})
</script>

1
2
3
4
5
6
7
8
9
10

此接口的设计思路是: 界面刚启动时由于背景图、关键图标等内容需要加载时间，需要等待这些内容加载完后再去掉启动图，才能使界面切换不会太突兀，而需要等待多少加载内容是根据业务场景来定制的，JsView运行器并不好代劳，所以，此时间点控制交由js来控制(简单的场景在主界面的onMounted中调用即可，复杂场景可以配合JsvPreload组件对图片资源加载完成的回调中去调用)，对应下来就是 notifyPageLoaded 函数。

# 2. 追加代码, 防止返回键直接退出应用

请按照如下的说明在vue代码的根节点(一般在App.vue)中，按照如下代码追加处理返回键的逻辑，避免apk误判js处理返回键异常直接退出应用的场景。

<template>
  <jsv-focus-block autoFocus :onKeyDown="processKeyDown">
    <div>...主页(略)</div>
  </jsv-focus-block>
</template>
<script setup>
import { jJsvRuntimeBridge } from "jsview"

const processKeyDown = (ev) => {
  if (
    ev.keyCode == 10000 /* 盒子runtime的返回键值 */ ||
    ev.keyCode == 8 /* PC浏览器的返回键 */
  ) {
    // JsView体系下，和runtime端约定，如果js的根节点处理未处理返回键，或者处理了但是返回false
    // 则视作js出现了异常，此时runtime将自我退出，
    // 以规避用户无法通过返回键退出异常小程序的问题

    // 如有需要进行主动退出时, 处理如下:
    // jJsvRuntimeBridge.closePage();

    console.log("consume back key...");
    return true; // consume the key
  }
};

...(略)
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 3. 调整屏幕和设计图的尺寸映射

修改 src/appConfig/jsview.config.mjs 中的 default.vendorConfig.designedMap 其内容为:

export default {
  ...
  vendorConfig: {
    // (可选配置)设置屏幕坐标映射值，screenWidth为屏幕画布定义的宽度，displayScale为清晰度，
    // 默认值是画布宽度1280px, 清晰度为1.5
    designedMap: {
      screenWidth: 1280,
      displayScale: 1.5
    },      
    ...
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

如果设计图的标注尺寸是1920x1080, 则一般调整为1920 1.0,
如果设计图给的坐标标注是4K，则调整为 4096 0.5,
一般盒子设备的屏幕分辨率是1920x1080，所以清晰度以
displayScale(文字清晰度调整) = 1920 / vendorConfig.designedMap.screenWidth
为综合内存效率和用户视觉清晰度的平衡点

PS: 接受键值扩展也在此调整，默认接受 ASCII 的所有键值，外加菜单键和返回键，其他系统按键，例如音量键，都需要进行映射。

# 4. 开启 USB 调试

在默认情况下 Android 设备只能从应用市场来安装应用。你需要开启 USB 调试才能自由安装开发版本的 APP。首先，确定你已经打开设备的 USB 调试开关 (opens new window)。

# 5. 通过 USB 数据线连接设备

下面检查你的设备是否能正确连接到 ADB（Android Debug Bridge），使用adb devices命令：

$ adb devices
List of devices attached
14ed2fcc device         # Physical device

1
2
3

在右边那列看到device说明你的设备已经被正确连接了。注意，你每次只应当连接一个设备。

如果你连接了多个设备（包含模拟器在内），后续的一些操作可能会失败。如果你对adb命令不是特别熟悉，请拔掉不需要的设备，或者关掉模拟器，确保 adb devices 的输出只有一个是连接状态。

# 6. 安装[视九小程序之家]App

我们准备了一个已经编译好的测试App（视九JSV测试.apk），你可以点击下载apk (opens new window)到本地并安装到设备上。你可以使用adb install命令进行安装：

$ adb install jsview-runtime.apk # [jsview-demo.apk]需要替换成你下载后的apk路径

成功安装后，你的设备上会出现 jsview-demo 图标。

# 7. 运行[视九小程序之家]App

(1) 首先确保你的电脑和手机设备在同一个 Wi-Fi 环境下。

(2) 使用npm start/npm run dev运行你的JsView应用。

(3) 使用adb shell am start命令在设备上启动应用，例如：

[APP_HOMEPAGE_URL] 一般为：

基于Vue3：http://[电脑IP(不能用localhost)]:5173/js/main.jsv.mjs

基于React：http://电脑IP(不能用localhost):3000/static/js/bundle.js

← 安装依赖部署 →