客户端接入JS-SDK指南

以下为客户端使用银龄视界产品，所需要的标准功能接入指南，如果有功能未实现或实现错误，将导致银龄视界产品无法正常使用。例如：无法正常分享、无法正常登录等。

iOS接入

一、js代码注入

/**
 js代码注入
 */
- (void)injectJSString {
    NSString *jsString = "var JSBridgeNative = {};JSBridgeNative.invoke = function(p0,p1,p2){window.webkit.messageHandlers.JSBridgeNative.postMessage('JSBridgeNative.invoke('+JSON.stringify(p0)+','+JSON.stringify(p1)+','+JSON.stringify(p2)+');');};"
      WKUserScript* script = [[WKUserScript alloc] initWithSource:jsString injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
    [[(WKWebView*)_webView configuration].userContentController addUserScript:script];
    [[(WKWebView*)_webView configuration].userContentController removeScriptMessageHandlerForName:invocationKey];
    [[(WKWebView*)_webView configuration].userContentController addScriptMessageHandler:self name:invocationKey];
}

二、注册js-oc交互

注：所有的方法名都通过apiName返回去匹配

/**
 注册js-oc交互，前端传过来的参数
 apiName: 方法名
 parameters: 参数（JSON对象字符串）
 callBackMethod: callback名字(回传给h5，JSON对象字符串)
 */
- (void)registerZBJTJSBridge {
    zbcore_Weak(self);
    _jsContext[@"invoke"] = ^(JSValue* apiName, JSValue *parameters, JSValue *callBackMethod) {
        dispatch_async(dispatch_get_main_queue(), ^{
            [weak_self invokeJSSDKBridgeWithMethod:apiName
                                        parameters:parameters
                                          callback:callBackMethod];
        });
    };
    [_jsContext evaluateScript:@"JSBridgeNative.invoke = invoke"];
}

Android接入

JsProxy jsProxy = new JsProxy();
//第二个js对象名固定"JSBridgeNative"
webView.addJavascriptInterface(jsProxy, "JSBridgeNative");

// webView 调用本地方法 在JsProxy里添加
/**
 注册js-oc交互，前端传过来的参数
 methodKey: 方法名
 args: 参数（JSON对象字符串）
 callback: callback名字(回传给h5，JSON对象字符串)
 */
@JavascriptInterface
fun invoke(methodKey: String?, args: String?, callback: String?) {
      
}

// callback 回调给webView 
String result = 具体见上面方法返回给webView的参数格式（json格式）
String jsResult = String.format("%1s(JSON.stringify(%2s))", callback, result);
webView.evaluateJavascript(jsResult , new ValueCallback<String>() {
	@Override
	public void onReceiveValue(String s) {
                
	}
});

鸿蒙接入

鸿蒙使用系统Web的javaScriptProxy注入Js

// 1.创建 JsSdk对象
export class JsSdk {
  webController: WebviewController;
  namespace: string = 'JSBridgeNative'
  methodList: Array<string> = ['invoke']
  modules: Record<string, ESObject> = {}; //注册的js方法列表

  constructor(webController: WebviewController) {
    this.webController = webController;
    this.registerModule();
  }

  /**
   * 注册注入方法
   */
  registerModule() {
    this.modules.xxxx= new Xxx();
  }

  inject() {
    const injectModel: JavaScriptProxy = {
      object: this,
      name: this.namespace,
      methodList: ["invoke"],
      controller: this.webController
    }
    return injectModel;
  }

  /**
   * js调用时在此方法中回调
   * @param methodKey 方法名
   * @param args 参数（JSON对象字符串）
   * @param callback callback名字(回传给h5，JSON对象字符串)
   */
  async invoke(methodKey: string, args: string | Record<string, ESObject>, callBackName: string): Promise<ESObject> {
    // 若无对应方法，则返回失败状态
    if (!this.modules[methodKey]) {
      const result = formatResult<null>(null, JSResultCode.functionNotFound)
      this.invokeCallback(callBackName, result);
    }
    let jsonData: Record<string, ESObject> = {};

    if (args) {
      jsonData = JSON.parse(args as string) as Record<string, ESObject>
      //相应js的处理
      const data: ESObject = await this.modules[methodKey].execute(jsonData);
      this.invokeCallback(callBackName, data);
    }
  }

  /**
   * 执行web端的接受返回值的回调函数
   * @param callBackName
   * @param data
   */
  invokeCallback(callBackName: string, data: ESObject) {
    let para = JSON.stringify(data);
    const method = `window.${callBackName}(${JSON.stringify(para)})`
    this.webController.runJavaScript(method)
  }
}

// 2.在web实例中注入JsSdk
jsSdk: JsSdk = new JsSdk(this.webviewController)
Web({ src: this.mUrl, controller: this.webviewController, renderMode: RenderMode.SYNC_RENDER })
  .javaScriptProxy(this.jsSdk.inject())

需要实现的方法

打开登录弹窗

如无此功能，客户端将无法登录，没有用户信息，银龄H5页面中老友最爱等依赖用户相关模块内容无法展示，客户端播放时长任务无法进行

客户端实现方法名：login

功能实现细节请查看打开登录弹窗

获取用户信息

如无此功能，银龄H5页面中老友最爱等依赖用户相关模块内容无法展示，客户端任务功能无法使用

客户端实现方法名：getUserInfo

功能实现细节请查看获取用户信息

监听客户端事件

如无此功能，页面登录状态切换发生改变，页面状态无法更新，银龄H5列表不支持视频自动播放

客户端实现方法名：listenAppEvent

功能实现细节请查看监听客户端事件

关闭页面

如无此功能，如新开的客户端原生页面无法关闭，银龄H5返回按钮点击无响应

客户端实现方法名：closeWindow

功能实现细节请查看关闭页面

保存图片

如无此功能，银龄H5海报分享无保存图片按钮

客户端实现方法名：saveImage

功能实现细节请查看保存图片

分享弹窗

如无此功能，银龄H5页面将无法进行分享

客户端实现方法名：openAppShareMenu

功能实现细节请查看打开分享弹窗

获取客户端信息

如无此功能，银龄H5海报分享上无法显示客户端app名称等字段

客户端实现方法名：getAppInfo

功能实现细节请查看获取客户端信息

需要实现的其他功能

提供一个页面实现二次分享与唤端功能

页面中以iframe的形式加载url上的backUrl，也就是银龄H5页面；该页面同时实现唤起接入app与二次分享功能

功能实现细节请查看客户端唤起功能页

隐藏导航栏

通过链接参数实现

功能实现细节请查看隐藏导航gaze_control

或者通过js-oc交互实现

客户端实现方法名：defineMenu

功能实现细节请查看webview 视窗样式