混合App开发实现页面跳转

tool.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=123
    let 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内
export function isInApp () {
        let userAgent = navigator.userAgent.toLocaleLowerCase();
        if (userAgent.indexOf('xxxxx') > -1) {//移动端浏览器通常提供了更灵活的方式来修改 User Agent 字符串
            return true;
        }
        return false;
    };

 demo.js（工具函数说明）

import { setUrlQuery,getUrlQuery } from './util.js';

const params = {
  param2: 'new-value2',
  param3: 'value3',
};
const url='https://example.com/page?param1=value1&param2=value2';
const updatedURL = setUrlQuery(params,url);
console.log(updatedURL);
//https://example.com/page?param1=value1&param2=new-value2&param3=value3

const getUrl = getUrlQuery('https://example.com/?foo=bar&baz=123');
console.log(getUrl);
//{ foo: 'bar', baz: '123' }

adapter.js（封装跳转方法）

   import router from '../router/index';
   import { setUrlQuery, getUrlQuery } from '@utils/tools';
   const BASE_URL = '/xxxmobileweb';
   /**
     *
     * @param {*} params 跳转参数，router所需参数
     * @param {*} appOptions APP内跳转需要额外设置的参数
     */
    function openNewWebPage (params, appOptions = {}, isOuterPage = false) => {
        console.log(params);
        if (isInApp()) {// app中
            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', {// 和app交互
                isHideNav: false,
                titleColor: 'ffffff',
                barTintColor: '5d3eff',
                tintColor: '5d3eff',
                isScrollGradient: false,
                url: sUrl,
                ...appOptions,
            });
        } else {// H5页面中
            if (isOuterPage) {// 外部链接:window.location.href
                let sUrl = params.path;
                sUrl = setUrlQuery({ ...getUrlQuery(sUrl), ...params.query }, sUrl);
                window.location.href = sUrl;
            } else {// 内部页面:router.push()
                let sUrl = params.path;
                params.query = { ...getUrlQuery(sUrl), ...params.query };
                router.push(params);
            }
        }
    };

page.js（页面中调用）

import { openNewWebPage } from '@utils/adapter.js';  
              openNewWebPage({
                    path: '/product/productDetail',
                    query: {
                        productCode: val.skAgency,
                        fundType: 0,
                        isProductM: 0,
                    },
                });