html demo
消息内容
路由生成器
数据来源于：xxx
项目路由结构：
项目路由结构值：
项目路由结构值介绍：
自己生成
1、应用标识：
scheme值：
scheme介绍：
2、应用路径
path值：
path介绍：
3、应用路径参数
argument值：
argument介绍：
直接地址
最终构成
最终路由地址：
下一步，请从下方选择你的测试方式：
跳转使用的js方法名
跳转的js方法传递url时候使用的参数名：
/* * @Author: dvlproad * @Date: 2023-03-03 13:59:55 * @LastEditors: dvlproad * @LastEditTime: 2023-03-03 14:00:07 * @Description: */ function updateElementValueById(id, value) { if (typeof value == 'string') { // } else { value = JSON.stringify(value); } document.getElementById(id).innerHTML = '' + `${value}`; } function getElementValueById(id) { return document.getElementById(id).value; }
/* * @Author: dvlproad * @Date: 2023-03-03 13:40:34 * @LastEditors: dvlproad * @LastEditTime: 2023-03-03 13:47:45 * @Description: */ // import * as common_object_util from './common_object_util.js'; // const common_object_util = require('./common_object_util.js'); /// 获取指定地址的主地址 function getRequestUrlMain(browserUrl) { if (browserUrl == null || browserUrl == "" || typeof browserUrl == "undefined") { var url = decodeURI(location.search); //获取url中"?"符后的字串 } else { var url = browserUrl; } var url_main; var paramStartIndex = url.indexOf("?"); if (paramStartIndex != -1) { // [js中截取字符串的三个方法 substring()、substr()、slice()](https://segmentfault.com/a/1190000016387899) url_main = url.substring(0, paramStartIndex); } else { url_main = url; } return url_main; } /// 获取指定地址的所有参数 function getRequestUrlParams(browserUrl, paramToObjectIfOK = false) { if (browserUrl == null || browserUrl == "" || typeof browserUrl == "undefined") { var url = decodeURI(location.search); //获取url中"?"符后的字串 } else { var url = browserUrl; } var theRequest = new Map(); var paramStartIndex = url.indexOf("?"); if (paramStartIndex != -1) { var str = url.substr(paramStartIndex + 1); strs = str.split("&"); debugger for (var i = 0; i < strs.length; i++) { var keyValueComponent = strs[i].split("="); var key = keyValueComponent[0]; var value = keyValueComponent[1]; var decodeValue = decodeURIComponent(value); // 不管要不要进行object转化的判断，都要先decode if (paramToObjectIfOK) { // 使用的是 common_object_util 的 isObject 的方法不准 decodeValue === Object(decodeValue) try { decodeValue = JSON.parse(decodeValue); } catch (error) { // } } theRequest[key] = decodeValue; } } return theRequest; } // [js获取url中的中文参数出现乱码解决](https://www.codeleading.com/article/87533774933/) // "http://localhost:4000/Architecture%E6%9E%B6%E6%9E%84/h5_native_interacte/h5js/dvlp_h5js_demo.json"; // url含中文示例 // "http://localhost/test/test.html?p=广东&c=珠海" function getValueByQueryKey(browserUrl, key) { // 获取参数 if (browserUrl == null || browserUrl == "" || typeof browserUrl == "undefined") { var url = decodeURI(location.search); //获取url中"?"符后的字串 // var url = window.location.search; // 在本地用file打开，而不是http打开的话，此值会为空 } else { var url = browserUrl; } // 正则筛选地址栏 var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)"); // 匹配目标参数 var result = url.substr(1).match(reg); //返回参数值 // return result ? unescape(result[2]) : null; // url中含中文时候，取值会出错 return result ? decodeURIComponent(result[2]) : null; } /// 获取本页面指定参数key的值 function getQueryString(key) { var url = window.location.search; // 在本地用file打开，而不是http打开的话，此值会为空 return getValueByQueryKey(url, key); }
/* * @Author: dvlproad * @Date: 2023-03-03 14:02:09 * @LastEditors: dvlproad * @LastEditTime: 2023-03-09 15:58:58 * @Description: 对url进行参数新增等操作的方法 */ /// 为 oldUrl 添加 newParams 参数，返回新url function addParamsForUrl(oldUrl, newParams) { if (newParams == null || newParams == {} || typeof newParams == "undefined") { return oldUrl; } var newParamsString = stringFromMap(newParams); var paramStartIndex = oldUrl.indexOf("?"); var connectorFlag; if (paramStartIndex != -1) { connectorFlag = '&'; } else { connectorFlag = '?'; } return `${oldUrl}${connectorFlag}${newParamsString}`; } function paramsStringFromMap(newParams) { debugger const params = new URLSearchParams(); // 遍历newParams对象的属性 for (const key in newParams) { if (newParams.hasOwnProperty(key)) { const value = newParams[key]; params.append(key, JSON.stringify(value)); } } // 将URL参数添加到URL中 const newParamsString = `${params.toString()}`; return newParamsString; } function stringFromMap(newParams) { return paramsStringFromMap(newParams); var keys = Object.keys(newParams); // 获取map的所有keys console.log(`keys=${keys}`); var count = keys.length; // var count = oldUrl.size; var newParamsString = ''; for (var i = 0; i < count; i++) { var key = keys[i]; var value = newParams[key]; var stringValue; if (typeof value === 'string') { stringValue = value; } else if (typeof value === 'number') { stringValue = value.toString(); } else if (typeof value === 'object') { // JavaScript 判断判断某个对象是Object还是一个Array if (value.constructor == Array) { // stringValue = value; stringValue = value.toString(); // stringValue = JSON.stringify(value); // continue } else { stringValue = stringFromMap(value); } } stringValue = encodeURIComponent(stringValue) if (i > 0) { newParamsString += '&'; } newParamsString += `${key}=${stringValue}`; } return newParamsString; }
/* * @Author: dvlproad * @Date: 2023-03-03 13:48:36 * @LastEditors: dvlproad * @LastEditTime: 2023-03-03 13:49:43 * @Description: */ function readJson(url) { return new Promise((resolve, reject) => { $.ajax({ url: url,//同文件夹下的json文件路径 type: "GET",//请求方式为get dataType: "json", //返回数据格式为json success: function (data) {//请求成功完成后要执行的方法 console.log(`读取${url}成功,数据data的值为\n${data}`); console.log(`读取${url}成功,数据data转字符串后的值为\n${JSON.stringify(data)}`); // var array = data; // for (let index = 0; index < array.length; index++) { //循环后台传过来的Json数组 // const element = array[index]; // console.log(`data${index}:` + element); // console.log(`data${index}:` + element.h5CallBridgeActionDes); // } resolve(data); }, error: function (err) { // debugger // 断点调试 resolve(null); } }) }) // $.get('./test_h5js_demo.json', function (data) { // //读进了data变量中 // //接下来用到data的代码必须全部在此函数内部进行 // console.log("data:" + data); // }); // d3.json('./test_h5js_demo.json', function (error, authordata) { // if (error) console.error(error); // //读进了authordata变量 // //接下来用到authordata的代码必须全部在此函数内部进行 // console.log("data:" + data); // }); // if (window.FileReader) { // let reader = new FileReader(); // let file = new File( // [blob], // url, // { // type: 'text/plain', // } // ); // reader.readAsText(file); // reader.onload = function () { // console.log('读取成功'); // var data = reader.result; //base64形式的文件内容 // }; // reader.onerror = function () { // console.log('读取失败'); // console.log(reader.error); // } // } else { // console.log('你的浏览器不支持读取文件'); // } }
/* * @Author: dvlproad * @Date: 2023-03-03 13:58:12 * @LastEditors: dvlproad * @LastEditTime: 2023-03-03 13:58:24 * @Description: */ // [js 删除Object中指定的key](https://blog.csdn.net/weixin_39501680/article/details/123110404) const isObject = (obj) => obj === Object(obj) const isNil = (val) => val === undefined || val === null const isEmpty = (val) => { return isString(val) || isObject(val) || Array.isArray(val) ? !Object.keys(val).length : isNil(val) } const isString = (val) => typeof val === 'string' const deleteObjectByKey = (obj = {}, arr = []) => { if (isEmpty(obj) || !isObject(obj)) return {} if (isEmpty(arr) || (!Array.isArray(arr) && !isString(arr))) return obj return Object.keys(obj) .filter((k) => !arr.includes(k)) .reduce((acc, key) => ((acc[key] = obj[key]), acc), {}) }
html demo
消息内容
app内的网页h5调用app的演示demo
数据来源于：xxx
H5到app的入参
1、app内的h5调用app的-桥接方法名信息：
桥接方法名的值：
桥接方法名的介绍：
2、app内的h5调用app桥接方法后，发送的参数信息：
参数值：
(注:如果key或value缺少引号",则一定是你入参的时候,json没有先转义)
参数值的介绍：
app给H5的回值
app内的h5调用app桥接方法后，app给H5的回值信息：
回值：
html demo
消息内容
app内的网页h5调用app的演示demo
数据来源于：xxx
H5到app的入参
1、app内的h5调用app的-桥接方法名信息：
桥接方法名的值：
桥接方法名的介绍：
2、app内的h5调用app桥接方法后，发送的参数信息：
参数值：
(注:如果key或value缺少引号",则一定是你入参的时候,json没有先转义)
参数值的介绍：
app给H5的回值
app内的h5调用app桥接方法后，app给H5的回值信息：
回值：
[{"sectionTitle":"只是测试方法，不再实际项目中使用","sectionDatas":[{"h5ActionDes":"测试 app 调用 h5 方法，并将返回值回调给 app","h5ActionName":"bridgeCallH5Action_test_appCallH5AndCallBackToApp","h5ActionArgs":{"callbackApp":{"method":"h5CallBridgeAction_showAppToast","args":{"message":"恭喜您分享成功3459"}}}}]},{"sectionTitle":"app调用H5-主动告知H5(声明周期等)，回调给app-声音控制","sectionDatas":[{"h5ActionDes":"接收app的声明周期-进入本页面:开始播放音乐","h5ActionName":"bridgeCallH5Action_receiveAppLifecycle","h5ActionArgs":{"callbackApp":{"method":"h5CallBridgeAction_audioPlayer","args":{"type":"play","url":"https://tape.xihuanwu.com/wish_dev/audio/640/1460136481476464640/2022-08/bgm.mp3"}}}},{"h5ActionDes":"接收app的声明周期-到其他页面(进入或返回):停止播放音乐","h5ActionName":"bridgeCallH5Action_receiveAppLifecycle","h5ActionArgs":{"callbackApp":{"method":"h5CallBridgeAction_audioPlayer","args":{"type":"stop"}}}},{"h5ActionDes":"接收app的声明周期-到后台:暂停播放音乐","h5ActionName":"bridgeCallH5Action_receiveAppLifecycle","h5ActionArgs":{"callbackApp":{"method":"h5CallBridgeAction_audioPlayer","args":{"type":"pause"}}}},{"h5ActionDes":"接收app的声明周期-到前台:继续播放音乐","h5ActionName":"bridgeCallH5Action_receiveAppLifecycle","h5ActionArgs":{"callbackApp":{"method":"h5CallBridgeAction_audioPlayer","args":{"type":"play","url":"https://tape.xihuanwu.com/wish_dev/audio/640/1460136481476464640/2022-08/bgm.mp3"}}}}]}]
html demo
Flutter发送过来的消息是：
我发送给Flutter的消息是：