更新记录

1.0.9（2023-12-12）

• 使用SDK@3.98版本适配
• 导航栏打开第三方浏览器按钮 nav_out_link 不指定使用默认浏览器时，弹出选择浏览器列出手机内安装的浏览器列表。

1.0.8（2023-04-09）

• 使用SDK@3.7.9版本适配
• 对 type:"webview" 新增跳转后快速双击退出窗口的控制属性:double_exit

1.0.7（2022-11-25）

• 使用SDK@3.6.5版本适配
• 对 WebView 设置禁止保存密码和自动表单
  1. setSavePassword(false)
  2. setSaveFormData(false)

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

使用方式：

在 script 中引用插件，调用插件提供的函数即可。

App 平台支持网络网页和本地网页， 但必须放在 uni-app 项目根目录->hybrid->html 文件夹下

<script>
// 引入需要的插件
const cmdWebView = uni.requireNativePlugin('cmd-webview');

// 在代码如下使用
export default {
  mounted() {
    // 获取项目内静态网页及相关资源（js、css 等文件）
    console.log(`file:///android_asset/apps/${plus.runtime.appid}/www/hybrid/html/index.html`);
  },
  methods: {
    // 打开跳转窗口
    fnOpenActivity() {
      cmdWebView.openActivity({
        // 打开窗口类型必传 webview||browser||upgrade
        type: 'webview',
        // 打开页面链接, 必传
        // page_url: 'https://framework7.io/kitchen-sink/core/?theme=md',
        page_url: 'https://varlet.gitee.io/varlet-ui/mobile.html#/home?language=zh-CN',
        // 打开页面错误跳转链接，必传
        page_error: `file:///android_asset/apps/${plus.runtime.appid}/www/hybrid/html/index.html`,
        // 导航栏打开第三方浏览器按钮
        nav_out_link: false,
        // 导航栏打开第三方链接使用默认浏览器
        nav_out_browser: false,
        // 导航栏打开第三方链接跳转后销毁窗口
        nav_out_destroy: false,
        // 导航栏主页链接
        nav_home_link: 'https://www.baidu.com',
        // 导航栏背景颜色，默认白色#FFFFFF，支持格式（#RRGGBB #AARGGBB）
        nav_bg_color: '#FFFFFF',
        // 导航栏按钮颜色，默认黑色#000000，支持格式（#RRGGBB #AARGGBB）
        nav_btn_color: '#000000',
        // 窗口滚动条, 默认 false
        show_scroll_bar: false,
        // 状态栏填充，默认 false
        fits_status_bar: true,
        // 状态栏填充颜色，默认白色#FFFFFF，支持格式（#RRGGBB #AARGGBB）
        fits_status_color: '#FFFFFF',
        // 包名
        pkg_name: 'com.xunmeng.pinduoduo',
        // 包版本
        pkg_version: '5.7.0',
        // 包下载地址
        pkg_url: 'https://imtt.dd.qq.com/16891/apk/593200F314183B02A0DBBB73489CAB0F.apk?fsname=com.xunmeng.pinduoduo_5.7.0_50700.apk&csr=1bbd',
        // 跳转后销毁之前所有窗口
        destroy: false,
        // 跳转后快速双击退出窗口
        double_exit: false
      }, res => {
        // 响应结果
        console.log(JSON.stringify(res));
      });
    },
    // 复制文本到剪贴板
    fnCopyText() {
        // 需要复制的文本
        const text = "欢迎使用 cmd_webview 复制文本到剪贴板";
        const ok = cmdWebView.copyText(text);
        // 响应结果
        console.log(ok + " => " + text);
    },
    // DeepLink 跳转第三方应用APP
    fnLaunchActivity() {
        // 这些DeepLink下自己百度下，支持使用http跳转外部浏览器
        const url = "market://details?id=com.baidu.searchbox";
        const browser = false; // 打开第三方链接使用默认浏览器
        const destroy = false; // 打开第三方链接跳转后销毁当前窗口
        const ok = cmdWebView.launchActivity(url, browser, destroy);
        // 响应结果
        console.log(ok + " => " + url);
    },
    // Base64图片保存JPG到本地相册
    fnSaveBase64JPG() {
        const base64Data = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...`;
        // 去掉base编码头，只要逗号后面的编码字符
        const base64Str = base64Data.split(",")[1];
        const ok = cmdWebView.saveBase64JPG(base64Str);
        // 响应结果
        console.log(ok + " => " + base64Data.split(",")[0]);
    }
  }，
};
</script>

.openActivity 打开跳转窗口

webview 全屏浏览窗

纯浏览网页窗口，可根据手机状态栏透明条背景覆盖，状态栏文字白色

传入类型为：type:"webview"

browser 浏览窗带控制操作

带有底部导航栏（前进、后退、主页、刷新、关闭、外链）六项操作

传入类型为：type:"browser"

upgrade 更新下载窗口

包名和版本会检测手机内是否安装对应程序版本，存在一致则直接跳转打开，否则根据链接下载进行强制提示安装。下载目录为本地Download文件夹内（包名_包版本.apk），

传入类型为：type:"upgrade"

响应码说明

.copyText 复制文本到剪贴板

直接调用函数传入文本信息即可复制到手机剪贴板。

调用 .openActivity 打开跳转窗口，传入类型为：type:"webview" 和 type:"browser" 时支持页面内调用函数。

// 复制文本到剪贴板
function fnCopyText() {
  const text = "欢迎使用 cmd_webview 复制文本到剪贴板";
  const ok = window.cmd_webview.copyText(text); // 需要复制的文本
  console.log(ok, " => " + text);
  alert(ok + " => " + text);
}

.launchActivity 跳转第三方应用

DeepLink 跳转第三方应用 或 HTTP 跳转外部浏览器

调用 .openActivity 打开跳转窗口，传入类型为：type:"webview" 和 type:"browser" 时支持页面内调用函数。

// DeepLink 跳转第三方应用
function fnLaunchActivity() {
  // 这些DeepLink下自己百度下，支持使用http跳转外部浏览器
  const url = "market://details?id=com.baidu.searchbox";
  const browser = false; // 打开第三方链接使用默认浏览器
  const destroy = false; // 打开第三方链接跳转后销毁当前窗口
  const ok = window.cmd_webview.launchActivity(url, browser, destroy);
  console.log(ok, " => " + url);
  alert(ok + " => " + url);
}

.saveBase64JPG 将 Base64 图片保存 JPG 到本地

页面通过 js 方式保存 cavas 图像为 base64 时，可以直接调用保存到本地，保存目录为本地Pictures文件夹内（cmdbase64时间戳.jpg）。

调用 .openActivity 打开跳转窗口，传入类型为：type:"webview" 和 type:"browser" 时支持页面内调用函数。

// Base64图片保存JPG到本地
function fnSaveBase64JPG() {
  const base64Data = `data:image/png;base64,iVBORw0KGgoAAAANSUh...`;
  // 去掉base编码头，只要逗号后面的编码字符
  const base64Str = base64Data.split(",")[1];
  const ok = window.cmd_webview.saveBase64JPG(base64Str);
  console.log(ok, " => " + base64Data.split(",")[0]);
  alert(ok + " => " + base64Data.split(",")[0]);
}

最后

1. 使用已有的静态移动端 HTML 进行打包，因为手头没有 IOS 设备，就没做 IOS 的。
2. 开发页面编写尽可能使用更类似手机原生的 web 页面框架。
3. 只是想在 APP 打开自己指定的链接页面和配合跳转强制完成下载其他应用的可以考虑。
4. 推荐参考 webview 组件 实现与 uni-app 交互，使用一些特殊魔法能力。

给大家推荐几个 HTML 阶段的 UI 框架，Vue 的就不说了。

• Framework7 构建功能齐全的 iOS，Android 和桌面应用程序
• MDUI 用于开发 Material Design 网页的前端框架
• Materialize 基于 Material Design 的主流前端响应式框架
• FrozenUI 基于移动端的 UI 库 轻量、精美、遵从手机 QQ 设计规范
• MZUI 基于 Flex 的 UI 框架，为移动端设计
• MUI 最接近原生 APP 体验的高性能前端框架

QQ 群：76113575