Capacitor 打包 h5 到 Android 应用,uniapp https http net::ERR_CLEARTEXT_NOT_PERMITTED

news2024/11/24 2:11:49

Capacitor 打包 h5 到 Android 应用,uniapp https http net::ERR_CLEARTEXT_NOT_PERMITTED

capacitor 官网: https://capacitorjs.com/docs/

项目上需要做一个 app,而这个 app 是用 uniapp 做的,里面用到了一个依赖 dom 的库,所以无法使用 Uniapp 直接生成对应的 android 应用,试过了,无法使用,体验很差。

后发现 capacitor 打包 h5 到 Android 应用
摸索了一天半终于把这个路径打通了。分享下过程。

这篇文章将详细介绍如何安装 capacitor,构建成功 Android 应用后如何通过 Chrome 进行 Android 内的网页页面的调试。

文中我会以一个前端的认知层面来讲述,因为我也不懂 Android,这样作为前端的你会更容易理解。

一、使用 capacitor 需要的源材料。

  • 一个构建好的项目 dist 最终 html 文件包 比如就是一个 dist 文件夹
  • 一个 capacitor 项目
  • 一个能正常运行的 AndroidStudio
  • 一个访问外网的途径(安装过程中会需要设置 proxy 以正常安装 gradle

二、项目安装过程

官方的文档说明: https://capacitorjs.com/docs/getting-started

简述一下这个过程:

1. 新建一个 capacitor 应用

npm init @capacitor/app

它会让你填写一些项目信息,根据提示填写即可
在这里插入图片描述

2. 安装项目依赖

上面的操作已经创建了一个空的 capacitor 应用,这个应用目前处于没有安装 npm 的状态,所以需要安装一下。
你用 yarn 或者 npm 都可以

我喜欢用 yarn ,直接执行

yarn

或者

npm

在这里插入图片描述

此时查看项目文件
在这里插入图片描述

3. 初始化 capacitor 项目

npx cap init

在这里插入图片描述

4. 用的常用的编辑器打开这个项目

我习惯用 webstorm

能看到刚才配置的项目信息:
在这里插入图片描述

5. 设置 webDir 属性

其中的 webDir 属性表示在构建应用的时候使用哪个目录下的 html 文件作为项目内容,这里就是 ./dist 文件夹,我们将之前构建好的 web 项目最终 dist 文件夹放到 capacitor 项目的主目录中即可。
当然,这个目录名字只要对应上就可以,不一定非得叫 dist

添加完成之后项目目录就是这样的
在这里插入图片描述

6. 安装 Android iOS 依赖包

npm i @capacitor/android @capacitor/ios

在这里插入图片描述

7. 构建 Android iOS 应用内容

这里我目前只用到了 Android 的,所以先只看 Android 的,以后用到 iOS 的再补充

npx cap add android

在这里插入图片描述
执行完成之后,项目目录中多出一个 android 文件夹

在这里插入图片描述

三、运行 Android 应用

上面就算已经把整个项目都构建完成了,现在我们就需要将项目运行到 AndroidStudio 中了。

1. 添加 CAPACITOR_ANDROID_STUDIO_PATH 环境变量

在这之前你还需要做一件事,就是将系统中添加一个环境变量 CAPACITOR_ANDROID_STUDIO_PATH 变量值是你的 AndroidStudio.exe 软件的路径。因为接下来的操作会用到这个路径指向的 exe 来启动并运行 Android 应用。

在这里插入图片描述

2. 运行 Android 应用

执行下面指令,它会自动启动 AndroidStudio 并运行这个项目的 Android 应用,这个Android 应用使用的目录是 ./android 目录作为项目主目录

npx cap open android

在这里插入图片描述

AndroidStudio 会弹出提示,点 trust 即可
在这里插入图片描述

然后弹出让你输入 proxy 的窗口,输入你的 proxy 配置即可

在这里插入图片描述
然后 gradle 会运行,并对程序进行初始化的环境依赖处理

在这里插入图片描述
完成之后就是这样
在这里插入图片描述
此时你只需要点击右上角的运行就能看到你程序的运行情况了,这里你可以选择运行到你的实机,也可以运行到模拟器。

四、调试

程序正常打开之后,你可能需要调试内部的网页。这样操作:

  1. 关闭之前运行的程序
  2. 点击调试按钮
    在这里插入图片描述
  3. 当程序正常运行到手机上的时候,打开你的谷歌浏览器 chrome,在地址栏中输入以下内容。
chrome://inspect/

此时你就能看到你手机中显示的这个程序的对应页面的路径,然后点击 【inspect】 就能对手机中的页面进行调试了,这个跟在浏览器中调试是一模一样的。

在这里插入图片描述

五、网络请求问题

1. 网络访问

我在使用的时候发现无法进行网络访问。
我用 uniapp 打包的程序,用 axios 是无法访问网络的,但用 uniapp 自带的请求方法 uni.request 就可以。

在这里插入图片描述

https

能访问之后又遇到一个新问题,我请求的接口地址是 http 的,会提示你 跨域问题,从 https 请求 http 确实会出现跨域,解决办法就是统一协议。

你的本地 html 服务的时候是使用的 https,而你的接口是 http 的,就会发现这问题

那么现在要解决的就是将本地文件的服务方式改为 http

还记得我们之前看到的 capacitor 项目中的 capacitor.config.json 文件吗,里面有个参数是上图这个 androidScheme,将它改成 http 即可,改完之后,记得重新用指令打开它

npx cap open android

在这里插入图片描述

错误提示 net::ERR_CLEARTEXT_NOT_PERMITTED

上面跨域的问题解决之后,又出现这样的提示。
在这里插入图片描述

解决办法
在 Android 项目文件夹中的 AndroidManifest.xml 文件中,在 application 节点上添加下面的内容:

        android:usesCleartextTraffic="true"

在这里插入图片描述

这样就能正常运行了
在这里插入图片描述

六、更新项目 html 本地文件

上面已经能正常运行程序了。
但当你想更新项目内容时该怎么做呢?

定位到你的 Android 文件夹,比如上面这个例子 ./demo 文件夹是 capacitor 的主目录,那么这个安卓应用使用的 html 源文件的位置就是 ./demo/android\app\src\main\assets\public 这个文件夹
所以你只需要替换这文件夹中的内容,然后再执行 Android 应用即可实现更新

七、完

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1144498.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

winscp显示隐藏文件

当前目录下有被隐藏的文件时,会在右下角看到 “已隐藏” 的字样,双击这个字样,就会显示被隐藏的文件和文件夹

私有云:【3】NFS存储服务器的安装

私有云:【3】NFS存储服务器的安装 1、使用vmwork创建虚拟机2、配置NFS服务器3、安装NFS存储服务4、配置NFS服务及创建存储共享 1、使用vmwork创建虚拟机 新建虚拟机NFS 分配400G硬盘,可以更高【用作存储】 自定义硬件 选择win2012的iso文件 设置登录密码…

数组与链表算法-矩阵算法

目录 数组与链表算法-矩阵算法 矩阵相加 C代码 矩阵相乘 C代码 转置矩阵 C代码 稀疏矩阵 C代码 数组与链表算法-矩阵算法 矩阵相加 矩阵的相加运算较为简单,前提是相加的两个矩阵对应的行数与列数必须相等,而相加后矩阵的行数与列数也是相同的。…

Notepad-- 轻量级文本编辑器的安装及基本使用

Notepad-- 轻量级文本编辑器的安装及基本使用 一、notepad--介绍1.1 notepad--简介1.2 notepad--特点 二、安装Notepad--2.1 下载Notepad--软件包2.2 解压软件包2.3 运行Notepad-- 三、Notepad-- 的日常使用3.1 编写yaml文件3.2 编写shell脚本文件3.3 编写python测试文件 四、文…

有关多线程环境下的Volatile、lock、Interlocked和Synchronized们

📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!📢本文作者:由webmote 原创📢作者格言:新的征程,我们面对的不仅…

安装使用vcpkg的简易教程

目录 1. 首先安装vcpkg2. 在vcpkg目录下运行bootstrap-vcpkg.bat 命令3. 接着vs进行集成4. 使用vcpkg搜索可用的包5.下载安装所需包6.下载安装完成 1. 首先安装vcpkg 使用git命令下载 git clone https://github.com/Microsoft/vcpkg.git如果下载失败可直接下载文件 (vcpkg-ma…

美术如何创建 skybox 贴图资源?

文章目录 目的PS手绘Panorama To CubemapPS手绘Pano2VRSkybox & Cubemap Tutorial (Maya & Photoshop)Unity 中使用 ReflectionProbe 生成 Cubemap 然后再 PS 调整PS直接手绘 cubemapBlender 导入 Panorama,然后烘焙到 cubemap,再导入unity中使用…

git教程(1)---本地仓库操作

git教程 git安装-Centos基本操作git initgit config工作区和版本库工作区暂存区/索引版本库 添加文件---场景一git statusgit log查看.git目录结构 添加文件---场景二修改文件版本回退撤销修改场景一只有工作区有code工作区和暂存区有code所有区域都有code并且没有push到远程仓…

【Java网络原理】 五

本文主要介绍了TCP传输控制协议的报头字段意义以及TCP协议的十大核心特性。 一.TCP传输控制协议 1.TCP报文格式 >端口 范围是0-65535 ,只有确定了端口号,才知道把数据报交给哪个应用程序。 >4位首部长度 TCP报头是变长的, 4bit的范…

Servlet核心API

目录 HttpServlet init destory service 实例:处理get、post、put、delete请求 1.通过postman得到请求 2.通过ajax得到请求 HttpServletRequest 常见方法 前端给后端传参 1.GET,query string 2.POST,form 3.POST,json HttpSeverletRespons…

数据类型与运算符-java

数据类型与运算符 1、变量和类型 1.1、整形变量 基本语法格式: int 变量名 初始值;代码示例: int num 10 //定义一个整型变量 System.out.println(num);注意: 1)java中,一个int变量占4个字节,和操作…

【ChatGPT系列】ChatGPT:创新工具还是失业威胁?

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

进程、线程、处理机调度

程序:存放在磁盘中的可执行二进制文件(即*.exe文件,包含一系列指令集合)。是静态的。 进程:程序的一次执行过程。是动态的。同一个程序多次执行将对应多个进程。 线程:轻量级进程。一个进程至少有一个线程…

qml之ui控件

文章目录 ui控件移动版风格嵌套页面并排界面 ui控件 Qt Quick控件用于创建由标准化组件(如按钮、标签、滑块等)构建的用户界面。 QtQuick.Controls:基本控件。QtQuick.Templates:为控件提供行为化的、非可化视的基本类型。QtQui…

STM32 CAN使用

STM32 CAN使用 简介各种通讯接口对比报文总线上的报文信息表示为几种固定的赖类型数据帧列表模式掩码模式配置CAN配置参数位时序 简介 控制器局域网CAN(Controller Area Network)是由德国博世公司为汽车应用而开发的多主机局部网络,用于汽车的监测和控制…

React 生成传递给无障碍属性的唯一 ID

useId() 在组件的顶层调用 useId 生成唯一 ID: import { useId } from react; function PasswordField() { const passwordHintId useId(); // ...参数 useId 不带任何参数。 返回值 useId 返回一个唯一的字符串 ID,与此特定组件中的 useI…

【CSS】包含块

CSS规范中的包含块 包含块的内容: 元素的尺寸和位置,会受它的包含块所影响。 对于一些属性,例如 width, height, padding, margin,绝对定位元素的偏移值(比如 position 被设置为 absolute 或 fixed)&…

『第十章』仪态万千的雨燕:UIKit 和 SwiftUI

在本篇博文中,您将学到如下内容: 1. 老骥伏枥:AppKit 和 UIKit2. 雨燕的新装:SwiftUI3. SwiftUI 原生视图4. SwiftUI 容器4.1 ViewThatFits4.2 自定义布局(Custom Layout)6. SwiftUI 修改器(Modifiers)6.1 修改器修饰作用域6.1 自定义修改器5. SwiftUI 状态:真相之源(S…

在spring boot+vue项目中@CrossOrigin 配置了允许跨域但是依然报错跨域,解决跨域请求的一次残酷经历

首先,说一下我们的项目情况,我们项目中后端有一个过滤器,如果必须要登录的接口路径会被拦下来检查,前端要传一个token,然后后端根据这个token来判断redis中这个用户是否已经登录。 if (request.getMethod().equals(&qu…

20、Python -- 变量作用域、局部函数

目录 变量作用域变量?字典?获取变量字典变量遮蔽解决方法:方法1:使用globals访问全局变量方法2:在函数中声明全局变量 局部函数封闭函数返回局部函数代码演示另一种写法 局部函数的遮蔽问题如图:解决方法&a…