使用webview外链打包apk,写入自签CA证书流程,解决app录音功能无法使用

先写诉求:需求是要将一个web链接打包成apk形式,尝试过Android studio一系列碰到好多问题,最后选择使用hbuilderx 来打包apk,外链里面用到录音功能,做过这块的同学大家应该都知道,录音权限是需要https来保证安全性的,本地开发输出的都是http协议的,所以只要不是以localhost域名来访问,浏览器都会提示无法录音,PC端也可以通过别的方法曲线救国(有linux需求的可以看看我另一篇),但是安卓端目前好像只能通过自签证书让设备信任app,跳过这一检测下面直接展示吧:

js 复制代码
tips: 浏览器要求在 **HTTPS** 下才能使用录音权限(如通过 `navigator.mediaDevices.getUserMedia` 调用麦克风),主要是出于**安全和隐私**的考虑。

要让 Android 系统信任你的自签名证书,有两个方法:


证书生成大家自己去搜搜网上都有现成的例子不过多赘述

方法一:手动安装证书(适合开发测试环境)

步骤如下:

  1. 生成自签名证书(.crt

    如果你已经有 .pem.cer,可以将其转换为 .crt

    vbscript 复制代码
    openssl x509 -outform der -in server.pem -out server.crt
  2. 拷贝 server.crt 到 Android 手机(通过微信、ADB、U盘等方式)

  3. 在手机上安装证书

    • 打开设置 → 安全 → 加密与凭据(不同品牌可能叫做"安全与位置"、"更多设置"等)
    • 找到 "安装证书" → "从 SD 卡安装" → 选择你拷贝进去的 server.crt
    • 给它起一个名字(如 MyCA),确认安装
  4. 重启设备或应用

安装后,Android 会将你的证书作为用户信任证书,WebView 可正常访问该 HTTPS 地址。


方法二:将证书嵌入 APK 并配置 network_security_config.xml(推荐)

步骤如下:

1. 创建 network_security_config.xml 文件

在你的项目根目录(或 unpackage/resources/android/res/xml/)创建:

xml 复制代码
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="false">
    <domain includeSubdomains="true">192.168.5.71</domain>
    <trust-anchors>
      <!-- 加载系统信任证书 -->
      <certificates src="system" />
      <!-- 加载你打包时包含的证书 -->
      <certificates src="@raw/my_ca" />
    </trust-anchors>
  </domain-config>
</network-security-config>

2. 将你的自签名证书(.crt 格式)重命名为 my_ca.crt 并放入 unpackage/resources/android/res/raw/ 目录中

确保目录结构是:

markdown 复制代码
unpackage/
└── resources/
    └── android/
        ├── res/
        │   └── raw/
        │       └── my_ca.crt
        └── xml/
            └── network_security_config.xml

3. 在 manifest.json 配置中引用这个文件

"app-plus""distribute""android" 配置中添加:

json 复制代码
"android": {
  ...
  "networkSecurityConfig": "res/xml/network_security_config.xml"
}

3、另外需要在manifest.json的安卓/iOS模块配置里面勾选record录音

4、在源码视图里面app-plus下面配置上(查漏补缺)

5、补充一个坑

有的安卓手机在打包时上列配置都配置了,录音功能可能还是没法使用,一直报错,可能就是要用户手动去手机设置-应用-找到你安装后的app手动设置录音权限就OK了(这个坑也是我遇到的,很隐蔽,顺着之前的思路根本想不到这一层,换了个思路试了一下就好了)

相关推荐
江城开朗的豌豆4 分钟前
Git分支管理:从'独狼开发'到'团队协作'的进化之路
前端·javascript·面试
GIS之家5 分钟前
vue+cesium示例:3D热力图(附源码下载)
前端·vue.js·3d·cesium·webgis·3d热力图
幽蓝计划6 分钟前
鸿蒙Next仓颉语言开发实战教程:下拉刷新和上拉加载更多
前端
红衣信7 分钟前
电影项目开发中的编程要点与用户体验优化
前端·javascript·github
LeeAt12 分钟前
npm:详细解释前端项目开发前奏!!
前端·node.js·html
山有木兮木有枝_14 分钟前
JavaScript对象深度解析:从创建到类型判断 (上)
前端
crary,记忆21 分钟前
MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释
前端·学习·webpack
清风~徐~来24 分钟前
【Qt】控件 QWidget
前端·数据库·qt
前端小白从0开始24 分钟前
关于前端常用的部分公共方法(二)
前端·vue.js·正则表达式·typescript·html5·公共方法
假客套28 分钟前
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
微信·uni-app·旅游