关于js调桥的问题，js需要延迟几百毫秒才能调到桥的方法

ijoncc commented 4 years ago

在js端调用和android端约定好的桥方法，js端经常调用不到，延迟了500毫秒才能调用到，有时500毫秒都调用不到，请问这个问题有遇到过吗

pengwei1024 commented 4 years ago

没有遇到过，js得在回调里面调用端方法哈，得确保端上注入完成了。

没改的话默认是下面这样

window.onJsBridgeReady = function () {
    JsBridge.native.ajax({...});
}

// or
document.addEventListener('onJsBridgeReady', function(){
    JsBridge.native.ajax({...});
})

pengwei1024 commented 4 years ago

@ijoncc

ijoncc commented 4 years ago

没有遇到过，js得在回调里面调用端方法哈，得确保端上注入完成了。

没改的话默认是下面这样
window.onJsBridgeReady = function () {
    JsBridge.native.ajax({...});
}

// or
document.addEventListener('onJsBridgeReady', function(){
    JsBridge.native.ajax({...});
})

我们前端开发的同事按照你这种写法，可是走不这个监听里面，代码如下： import axios from 'axios'; import config from './base'; import { BASE_URL } from '../../../config/global'; import { Base64Decode, Base64Encode } from '../../plugin/util';

import { Toast } from 'vant';

// 网页是否加载完毕 let loaded = false; // function readyOk (callback) { // if (loaded) { // callback(); // } else { // console.log('定时 500ms'); // setTimeout(callback, 500); // } // }

// function callApp (cmd, params) { // return new Promise((res, rej) => { // readyOk(function () { // console.log('进入500ms回调'); // loaded = true; // try { // bridge.call(cmd, params, function (resp) { // console.log('数据回调返回'); // res(resp); // }); // } catch (e) { // rej(e); // } // }); // }); // } window.readyFn = function (callback) { if (window.onJsBridgeReady) { console.log('调用原生桥----2'); callback && callback(); } else { console.log('调用原生桥----3'); document.addEventListener('onJsBridgeReady', function () { alert(1); }, false); } }; const callApp = (method, params) => { console.log('调用原生桥----1'); return new Promise((res, rej) => { try { window.readyFn(() => { console.log('调用原生桥----4'); window.bridge.call(method, params, data => { console.log('调用原生桥----5'); res(data); }); }); } catch (e) { rej(e); } }); }; const NAME = 'user_app'; const localStorageHandler = { dataName: NAME, getItem: function (name) { let obj = getItemData(); if (obj && obj[name]) { return obj[name]; } else { return null; } }, setItem: function (name, value) { let obj = getItemData(); if (obj == null) obj = {}; obj[name] = value; setItemData(obj); }, delItem: function (name) { let obj = getItemData(); if (obj && obj[name]) { // 删除并重新赋值 delete obj[name]; setItemData(obj); } else { return false; } } };

// localStorage取值 function getItemData () { return JSON.parse(Base64Decode(window.localStorage.getItem(NAME))); } // localStorage赋值 function setItemData (obj) { window.localStorage.setItem(NAME, Base64Encode(JSON.stringify(obj))); }

const service = axios.create(config); const errorMessage = { 400: '发出的请求有错误，服务器没有进行新建或修改数据的操作', 401: '用户没有权限（令牌、用户名、密码错误）', 403: '访问是被禁止', 404: '发出的请求针对的是不存在的记录', 405: '不支持当前请求方法', 406: '请求的格式不可得', 410: '请求的资源被永久删除，且不会再得到的', 422: '当创建一个对象时，发生一个验证错误', 500: '服务器发生错误，请检查服务器', 502: '网关错误', 503: '服务不可用，服务器暂时过载或维护', 504: '网关超时' };

let resp = await callApp('ls_get_location', {}); config.headers.accessToken = JSON.parse(resp).data; // config.headers.accessToken = JSON.parse(resp).data;

// config.headers.accessToken = 'be746743ff9a4644874d36df2403c1a7';

return config; }, function (error) { console.log('请求失败,原因：' + error); });

/ 添加一个返回拦截器 / service.interceptors.response.use((response, b) => { // 下载Excel文件 if (response.headers && (response.headers['content-type'] === 'application/octet-stream')) { downloadUrl(response.request.responseURL); response.data = ''; response.headers['content-type'] = 'text/json'; return response; }

// resource/anon/userOperate/save if (!response.data.success && response.data.code === 9001) { // window.location.href='./login.html';

return Promise.reject('请求失败，请重试');

}

return response.data; }, function (error) { const status = error.response.data;

Toast.fail('系统忙，请稍后再试');

return Promise.reject('请求失败，请重试'); });

if (points.baseURL) { params.baseURL = points.baseURL; }

params[(points.method.toLowerCase() == 'get' || points.method.toLowerCase() == 'delete') ? 'params' : 'data'] = points.data || {};

return service(params); }; export default Ajax ;

pengwei1024 commented 4 years ago

看上去写法没什么问题。需要延迟500ms确实没有出现过，如果你是Android RD，可以打开JsBridge 日志看看。如果有能复现的小demo，也能发给我一起看看原因

pengwei1024 / JsBridge

关于js调桥的问题，js需要延迟几百毫秒才能调到桥的方法 #32