cordova-plugin-themeablebrowser 应用内部打开已有应用（应用内部模拟一个可配置的浏览器）

GitHub - initialxy/cordova-plugin-themeablebrowser: Fork of org.apache.cordova.inappbrowser in an attempt to make it a bit more themeable and configurable to add some custom actions.https://github.com/initialxy/cordova-plugin-themeablebrowser

目录

1.介绍与安装

2.封装在应用内部打开已有应用的方法

3.实现在应用内部打开已有应用的示例

4.可能出现的问题及解决方案

4.1 打包后，ThemeableBrowser 插件无法正常显示（返回及关闭按钮）图片

---

1.介绍与安装

提供一个应用内浏览器，可配置自定义样式，使当前应用与内部嵌入的应用浑然一体

yarn add cordova-plugin-themeablebrowser

yarn add @ionic-native/themeable-browser@4

2.封装在应用内部打开已有应用的方法

const icons = {
  backButton: 'assets/img/back.png',
  closeButton: 'assets/img/close.png'
};

/**
 * 打开应用内部浏览器
 * @param url 页面地址
 * @param toolbarTitle 浏览器导航栏标题
 * @param successFunc 成功后的回调函数
 * @param failedFunc  失败后的回调函数
 */
export function openBrowserInApp(
  url: string, 
  toolbarTitle: string, 
  successFunc?: any, 
  failedFunc?: any
) {
  // console.log('页面地址', url);

  (window as any).cordova.ThemeableBrowser.open(url, '_blank', {
    title: {
      color: '#ffffff',
      fontSize: '16px',
      staticText: toolbarTitle,
    },
    statusbar: {
      color: '#008aff',
      fontFamily: 'PingFang-SC-Regular',
    },
    toolbar: {
      height: 44,
      color: '#008aff',
      fontFamily: 'PingFang-SC-Regular',
    },
    // 图片暂未生效
    backButton: {
      // image: icons.backButton,
      wwwImage: icons.backButton,
      wwwImagePressed: icons.backButton,
      align: 'left',
      event: 'backPressed',
    },
    // 图片暂未生效
    closeButton: {
      // image: icons.backButton,
      wwwImage: icons.closeButton,
      wwwImagePressed: icons.closeButton,
      align: 'right',
      event: 'closePressed',
    },
    backButtonCanClose: true,
  }).addEventListener('backPressed', function() {
    // alert('back pressed');
  });
}

3.实现在应用内部打开已有应用的示例

• IOS 不支持 TheameBrowser
• 因此 IOS 打包时，需要将 TheameBrowser 移除，否则报错
• IOS 使用 window.open(url) 代替 TheameBrowser 的使用

/**
 * 应用点击跳转
 * @param grid 应用信息
 */
const handleAppGridClick = async (grid: any) => {
  console.log('当前点击应用：', grid);

  // 应用模块访问上报
  moduleAccessReport(grid);

  if (grid.target === '无') {
    return;

  } else if (grid.target.substring(0, 4) == 'http') {

    // btoa() 方法从二进制字符串（即，字符串中的每个字符都被视为二进制数据字节的 String 对象）创建 Base64 编码的 ASCII 字符串。

    const userName = btoa(userInfos.loginName);
    const pwd = btoa(userInfos.password);
    let url = grid.target;

    if (grid.NAME === '项目跟踪') {
      url = `http://233.23.233.233:8888/cas/autoLogin?username=${userInfos.loginName}&password=${userInfos.password}&autoLoginFlag=999&service=http://233.23.233.233:8888/mpm/index.vm`;
    } else {
      url = grid.target + '?uid=' + userName + '&pwd=' + encodeURI(pwd);
    }

    // iOS 不支持 theameBrowser,iOS 打包时，需要将此插件移出，否则报错

    if (isPlatform('ios')) {
      Browser.open({ url });
    } else {
      // 打开应用内部浏览器
      openBrowserInApp(url, grid.NAME);
    }

  } else {
    // console.log('当前应用属于应用内部模块', grid);
    router.push({
      path: RouteConfig.CommonRoute.FunctionConstruction,
    });
  }
};

4.可能出现的问题及解决方案

4.1 打包后，ThemeableBrowser 插件无法正常显示（返回及关闭按钮）图片

每次使用 Android Studio 打包前

修改文件：android\capacitor-cordova-android-plugins\src\main\java\com\initialxy\cordova\themeablebrowser\ThemeableBrowser.java

涉及方法：getImage()

修改内容：File file = new File("www", altPath); 为File file = new File("public", altPath);【在大概1017行】