JsView

# 常见问题

# 1. 遇到"加载失败"提示框后, 如何排查问题?

首先，此提示框的出现的唯一条件是从apk启动后的45秒内，没收到从js端发送过来的 jJsvRuntimeBridge.notifyPageLoaded 调用。

错误码声明一览

  ERROR_CODE_APP_FAIL = 1;
  ERROR_CODE_CORE_LOAD_FAIL = 2;
  ERROR_CODE_GET_URL_ERROR = 3;
  ERROR_CODE_CORE_VERSION_MISMATCH = 4;
  ERROR_CODE_SYSTEM_JS_LOAD_TIMEOUT = 5;
  ERROR_CODE_ENGINE_JS_DOWNLOAD_TIMEOUT = 6;
  ERROR_CODE_ENGINE_JS_LOAD_TIMEOUT = 7;
  ERROR_CODE_MAIN_JS_DOWNLOAD_TIMEOUT = 8;
  ERROR_CODE_MAIN_JS_LOAD_TIMEOUT = 9;
  ERROR_CODE_APP_START_FAIL = 10;
  ERROR_CODE_APP_START_TIMEOUT = 11;
1
2
3
4
5
6
7
8
9
10
11

# 错误码 1: ERROR_CODE_APP_FAIL

不会遇到，这是预留的错误码

# 错误码 2: ERROR_CODE_CORE_LOAD_FAIL

错误原因是内核加载失败，小程序加载过程的第一步加载内核，这一步失败了。
请检查:
A. 启动参数的 CoreVersionRange 字段是否和开发环境 npm ci 中的 "Update revision to:" 的 "CORE:" 一致
B. 如果是局域网，公网不通的场景下，请检查启动参数中的 UpdateUrl 中的网址拼接上 "/"和CoreVersionRange的内容后的URL是否可访问

例如: 启动参数中UpdateUrl设置为 https://launcher.cluster.qcast.cn/jsview/version/, 内核版本为1021814
则可以尝试将PC的网络调整为与Android测试设备同样网络下，然后用浏览器去访问
https://launcher.cluster.qcast.cn/jsview/version/1021814
得到如下的信息则为正常，反之则异常

{
  "code": 0,
  "msg": "成功",
  "data": {
    "core": {
      "version": "1021814",
      ...其余内容省略...
    },
    "v8": {
      "version": "v8-1020",
      ...其余内容省略...
    },
    ...其余内容省略...
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 错误码 3: ERROR_CODE_GET_URL_ERROR

错误原因是启动参数中的url字段不是一个合法的url格式

# 错误码 4: ERROR_CODE_CORE_VERSION_MISMATCH

错误原因是本进程已经加载过了内核，并且这个内核和即将启动的小程序所需的内核不兼容。当APK不支持再开进程启动小程序，只允许本进程启动时会出现这个错误。
例如本进程已经加载了 102xxxx 系列的内核，然后目标小程序需要 81xxxx 系列的内核

# 错误码 5: ERROR_CODE_SYSTEM_JS_LOAD_TIMEOUT

错误原因是小程序加载过程的第二步，底板js(System js)加载不了。一般不会遇到，遇到就是JsView本身代码BUG，给JsView开发人员报BUG即可。

# 错误码 6, 7: ERROR_CODE_ENGINE_JS_DOWNLOAD_TIMEOUT, ERROR_CODE_ENGINE_JS_LOAD_TIMEOUT

错误原因是小程序加载过程的第三步，渲染引擎接口js下载不了，
请检查启动参数中 确认启动参数 engine(也称为 engineUrl 或 engineJs)对应的url，是否可以访问和下载。
到达这步后，devtools已经可以连接，可以devtools连接上查看是否有js错误，或者url访问不到的错误。

# 错误码 8, 9: ERROR_CODE_MAIN_JS_DOWNLOAD_TIMEOUT, ERROR_CODE_MAIN_JS_LOAD_TIMEOUT

错误原因是小程序加载过程的第四步，main.jsv.mjs 没加载上
请检查:
A. 启动地址中的 main.jsv.mjs(或者是 main.jsv.xxxxxx.mjs)的URL是否可以访问
B. 以.mjs结尾，不要是.js结尾，.js文件是PC模拟环境使用的文件，盒子运行时需求.mjs

到达这步后，devtools已经可以连接，可以devtools连接上查看是否有js错误，或者url访问不到的错误。

# 错误码 10,11: ERROR_CODE_APP_START_FAIL, ERROR_CODE_APP_START_TIMEOUT

错误原因是小程序加载过程的最后一步，main.tsx被执行，然后在45秒内 nofiyPageLoaded 没有被调用。
请检查:
devtools连上，或者查看android adb的 JSIConsole 关键字，检查是否有js报错导致 nofiyPageLoaded 逻辑没走到。
另外附上调用指南:
点击进入 notifyPageLoaded调用指南

# 2. 屏幕上不同的分辨率如何适配？

参看样例的index.js：

window.JsView.React.DesignMap = {width:1280, displayScale:1.0};
1

width的说明：此处写了1280，意思为将JsView的画布的宽分为1280分，在div进行布局时，其中所填的px值为此1280分之一的宽度。另外，高度不同填写，JsView自动保持横纵比。

所以，只要window.JsView.React.DesignMap固定好，在不同的分辨率下(1920x1080或者是4K)，界面的尺寸都是一样的。

displayScale说明：一般为1.0，width设定过低导致文字看起来清晰度不够时，可适当调大这个值，一般可调整为1.5或者2.0，调整后可提高文字清晰度，但是更消耗文字描画图层的内存占用。

# 3. 遥控器上的返回键和菜单键如何接受？

JsView中，已经将返回键映射为了键值10000，菜单键映射成了10001，在Fdiv的onKeyDown等按键接受函数中可以收到以上对应的按键值。

如果需要映射更多的按键值，请查看如下文档：

https://shimo.im/docs/Xc93D6rhR6hK8R3p (opens new window)

# 4. JS调用Java的办法（Java到Js的穿透）

参照如下石墨文档:https://shimo.im/docs/L3W1y6DxIHkJhCtY (opens new window)

# 5. Java调用JS的办法

# 方案1:(不推荐)evaluateJavascript

js在window上挂载函数, java通过evaluateJavascript执行js命令行

调用

JsView.evaluateJavascript(String js_code)。
1

例如：调用JS的函数：

首先在JS端声明一个window下的函数：

window.MySample = (str)=>{ console.log(str); }
1

然后在Java端可用如下语句进行调用：

JsView实例.evaluateJavascript("window.MySample(\"message\")")
1

即可在JS端看到"message"的打印信息

# 方案2:(推荐)emitEvent

js通过window.JsView.addEventListener订阅事件, java通过miniApp.getJsView().emitEvent发送事件

JavaScript样例

// 激活时
let callbackFunc = (data)=>{
  console.log("data params p1=" + data.p1 + " p2=" + data.p2);
};
window.JsView?.addEventListener("MyEventName", callbackFunc);

// 组件卸载不再需要回调时
window.JsView?.removeEventListener(callbackFunc); // 使用同注册时同一个句柄
1
2
3
4
5
6
7
8

Java样例

import com.qcode.jsview.EventPack;

class someClass {
  public void someFuncToSendEvent() {
    EventPack packedEvent = new EventPack();
    pack.put("p1", 123456);
    pack.put("p2", "someString");
    miniApp.getJsView().emitEvent("MyEventName", packedEvent);
  }
}
1
2
3
4
5
6
7
8
9
10

# 6. AJAX请求的方式

同步AJAX请求：


 







let xhr= new XMLHttpRequest();
xhr.open("GET", "http://url/to/some/data",false/* 同步请求 */);
xhr.send();
if (xhr.readyState != 4) {
  console.error("Failed to request status=" + xhr.status);
} else {
  console.log("Date=" + xhr.responseText)
}
1
2
3
4
5
6
7
8

异步AJAX请求


 










var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.timeout = 5000;
xhr.onreadystatechange = ()=>{
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {//request success
      console.log("Data=" + xhr.response);
    }
  }
}
xhr.send(null);
1
2
3
4
5
6
7
8
9
10
11

更多的XMLHttpRequest的设计规范基本参照浏览器，其余选项可以参考w3cSchool内容 (opens new window).

AJAX请求可选的第三方库：

whatwg-fetch(^3.6.2)

axios(^0.24.0)

# 7. 资源的DiskCache缓存策略

JS文件缓存策略：由JsView.loadUrl配置的一个url或者由JsView.loadUrl2配置的两个url，只要文件名符合以以下格式结尾：

XXXXXX.jsv.文件md5前8位.js

例如：http://cdn.release.qcast.cn/forge_js/master/JsViewES6_react_r648.jsv.ccc7199d.js (opens new window)

在JsView中就对该文件进行本地磁盘缓存，二次启动时直接从本地磁盘加载，此缓存的期限是永不过期。

**图片缓存策略：**磁盘上开辟10M的空间，对图片，以URL为关键字进行缓存，缓存时间同样为永不过期。

# 8. LocalStorage使用方法

在JsView中支持标准的LocalStorage用法，具体用法可分为两类：

第一类，通过接口访问和设置属性：

var str = localStorage.getItem(key)

localStorage.setItem(key, value)

第二类，直接通过localStorage对象的prop来访问内容：

var str = localStorage.key

localStorage.key = value

特别注意：

若使用第二类接口进行操作的话，在JsView系统中，需要预先配置一下要访问的key列表，配置方法为调用API，window.JsView.enableStorageNames。

例如，要配置"name"、"school"两个key时：

window.JsView.enableStorageNames("name", "school")
1
Last Updated: 8/6/2024, 10:15:29 AM

← JsView媒体播放的解决方法 →