混合App开发实现页面跳转(更新中)
util.js
/*** 这个函数被用来获取 URL 中的查询参数,并将它们以对象(键值对)的形式返回* @param {string} url* @returns {object} oParams*/
export function getUrlQuery(url = null) {let sUrl = url || window.location.href;let oParams = {};//创建一个空对象,用于存储解析后的查询参数let reg = /([^?&=]+)=([^?&=]+)/g;//([^?&=]+):这是第一个捕获组,匹配不包含 ?、& 和 = 的连续字符,该正则表达式可以匹配到两个键值对:foo=bar 和 baz=123let res = reg.exec(sUrl);while (res) {oParams[res[1]] = res[2];//将匹配结果中的第一个元素作为键,第二个元素作为值,添加到 oParams 对象中res = reg.exec(sUrl);//继续执行正则表达式匹配,查找下一个查询参数键值对}return oParams;
}/*** 这个函数用于设置 URL 的查询参数,并返回新的带有更新查询参数的 URL* @param {*object} oParamName 参数名和参数值* @param {*string} sURL*/
export function setUrlQuery(params, URL) {let preParams = getUrlQuery(URL);let oParamName = { ...preParams, ...params };//将原始查询参数和传入的新参数合并let oURL = URL || window.location.href;let sURL = oURL.split('?')[0];let sParam;//保存每个查询参数的字符串形式sURL.match(/\?/) ? (sURL += '&') : (sURL += '?');//检查 URL 是否已经包含问号(?),如果包含则在末尾添加 &,否则添加 ?for (let x in oParamName) {if (oParamName[x] !== 0 && !oParamName[x]) continue;//检查当前查询参数的值是否为非空或非零。如果为空或零,则跳过该查询参数sParam = String(x) + '=' + oParamName[x] + '&';//将当前查询参数拼接成字符串形式,格式为 键=值&sURL += sParam;//将当前查询参数字符串追加到 URL 的末尾}sURL = sURL ? sURL.slice(0, -1) : sURL;//如果 URL 不为空,则删除最后一个字符(即多余的 & 或 ?)console.log(sURL);return sURL;
}// 判断是否在APP内isInApp = () => {let userAgent = navigator.userAgent.toLocaleLowerCase();if (userAgent.indexOf('xxxxx') > -1) {//移动端浏览器通常提供了更灵活的方式来修改 User Agent 字符串return true;}return false;};
adapter.js
/**** @param {*} params 跳转参数,router所需参数* @param {*} appOptions APP内跳转需要额外设置的参数*/openNewWebPage = (params, appOptions = {}, isOuterPage = false) => {console.log(params);if (this.isInApp()) {let sUrl = '';if (isOuterPage) {sUrl = params.path;} else {sUrl = window.location.origin + BASE_URL + params.path;}sUrl = setUrlQuery(params.query, sUrl);window.BasilicaNativeJS.invoke('openNewWebPage', {isHideNav: false,titleColor: 'ffffff',barTintColor: '5d3eff',tintColor: '5d3eff',isScrollGradient: false,url: sUrl,...appOptions,});} else {if (isOuterPage) {let sUrl = params.path;sUrl = setUrlQuery({ ...getUrlQuery(sUrl), ...params.query }, sUrl);window.location.href = sUrl;} else {let sUrl = params.path;params.query = { ...getUrlQuery(sUrl), ...params.query };router.push(params);}}};
page.js
import { setUrlQuery,getUrlQuery } from './adapter.js';const params = {param2: 'new-value2',param3: 'value3',
};
const url='https://example.com/page?param1=value1¶m2=value2';
const updatedURL = setUrlQuery(params,url);
console.log(updatedURL);
//https://example.com/page?param1=value1¶m2=new-value2¶m3=value3const getUrl = getUrlQuery('https://example.com/?foo=bar&baz=123');
console.log(getUrl);
//{ foo: 'bar', baz: '123' }