北京政务服务平台（Ionic/Vue3 移动端） 问题记录
目录
1. 北京政务 App 打包流程、调试流程
1.1 debug 包（调试包）
1.2 release 包（正式包）
1.3 包名包含 public 后，导致打包失败的解决方案
1.4 如何进行手机 usb 调试？
1.5 如何进行 Android Studio 快速打包安装？
2. 解决 北京政务 App 在真机上无法访问网络的问题
3. 替换 App 应用名 / 包名 / 唯一标识 scheme
4. ionic 可直接修改标签样式，elementplus 不可
5. 为什么在 vue3 项目中，要引入 ionic 组件
6. 如何使用 ionic 主题色 variables.css
7. async/await VS promise.all()【select and list】
8 ion-select 自带属性 和 自定义配置项 会同时生效
9. 区分Vue3 获取路由信息、路由跳转
10. iframe 涉及的谷歌安全策略，实现单点登录存在的问题
11. Ionic 安装 capacitor 插件的三行命令的含义
1. 北京政务 App 打包流程、调试流程
1.1 debug 包（调试包）
Vue3/Ionic 打包需要依靠 Android Studio + 命令行工具，环境配置类似于 Angular/Ionic
在项目根目录下，任意命令行工具中，执行如下操作：
- 添加平台： ionic capacitor add android 【结束后命令行换行】
- 构建 原生app 资源：ionic capacitor build android 【结束后命令行换行，且自动打开 Android Studio 执行下述操作（构建app）】
- 构建完 原生app 资源之后，自动通过 Android Studio 构建 app 【可以观察面板右下角，会显示构建进度，初次构建app会比较慢】
- 点击 Android Studio 导航栏中的 Build → Build Bundles/APKs → Build APKs 【通过下方导航条的 build 可以查看打包进度】
后续在 vscode 中编写app，需要将 vscode 中的 静态资源/插件 更新到 Android Studio 中，执行下面两条命令的任意一条
- ionic capacitor update android
- ionic capacitor sync（推荐）
我的电脑上执行第一条不太行，执行第二条可以成功同步
同步完成之后，再次执行 Build APKs，即可获得新的 .apk 文件
1.2 release 包（正式包）
如果没有安装 node_modules 依赖的话，是无法进行打包操作的，测试包也不行
正式包，又名 release 包，无法进行联机调试操作（手机调试），debug 包才能进行联机调试
调试时，可以通过 chrome://inspect 查看控制台，也可以通过 Android Studio 打断点
release 包 的打包步骤，和 debug 包 的打包步骤，基本一致，如下所示：
添加平台：ionic capacitor add android
打包静态资源（比 debug 多了 --prod）：ionic capacitor build android --prod 执行完这个命令之后，css/js 会被压缩
点击 Android Studio 这里进行正式打包：
打正式包，需要添加公司的签名文件：
接下来，选择 release，代表打正式包：
1.3 包名包含 public 后，导致打包失败的解决方案
在 vscode 中，修改 capacitor.config.json 里的包名，再执行 ionic capacitor sync
发现代码无法同步到 Android Studio 上，后者包名一直包含 public，没被修改
解决方案：
- 删除 android 文件夹（相当于移除平台），此时要关闭 Android Studio，否则 android 文件夹处于被占用状态，无法进行删除；然
- 后重新添加平台，打包静态资源，开始打包
1.4 如何进行手机 usb 调试？
连接手机，将手机调到 开发者模式，下面以小米手机为例：
- 设置-我的设备-全部参数-MIUI版本 —— 不断点击 MIUI版本 即可进入开发者模式
- 设置-更多设置-开发者选项 —— 打开 开启开发者选项 / USB调试 两个开关
- 连接手机后，手机跳出提示框，选择 “文件传输”，而不是 “仅充电”
在 chrome 中输入：chrome://inspect 回车，进入如下页面，点击 inspect
加载不出来？不要着急，因为这个窗口必须挂 VPN 才可以打开
这样，我们对手机的操作，就会反映在浏览器中，同时还能看控制台
有时由于数据线连接出现问题，或者手机本身权限没打开，都可能导致无法连接
此时可以重启手机，或者检查数据线等等
1.5 如何进行 Android Studio 快速打包安装？
为什么要这样调试呢？
原来都是把 build 好的 apk 文件，通过 qq 发送到手机安装，非常麻烦
其实 Android Studio 可以直接将打包好的程序安装到手机上，步骤如下：
首先，确定需要打包的项目已经在 Android Studio 中打开
必须确保打开的是某项目执行 capacitor 添加平台命令之后的 android 文件夹，只有他才可以打包
直接将整个项目在 Android Studio 中打开，是无法进行调试及打包的
接着，需要保证手机已经开启 USB 调试模式，并链接至电脑
在Android Studio 界面又设备链接的标志，如下图所示：
在 Android Studio 中，打开如下窗口，点击 Run
会出现下面的窗口，点击 Run，就会自动执行编译（Build）操作，并自动将最新的应用安装到手机上
有的时候会出现提示，是否打断手机上当前正在运行的程序，选择 Tr... 就行
2. 解决 北京政务 App 在真机上无法访问网络的问题
在 res/xml 下，创建 network_security_config.xml 文件，并添加如下内容：
接着，在 AndroidManifest.xml 文件下的 application 标签中，增加以下属性：
3. 替换 App 应用名 / 包名 / 唯一标识 scheme
AndroidManifest.xml 是 app入口文件
从下图的位置可以点进配置 App 应用名 / 包名 / 唯一标识 scheme 的文件 【必须是在 Android Studio 中才能点进去】
点开之后长这样子：
唯一标识的作用：比如我从 a应用 跳转到 b应用，就需要 b应用的唯一标识
包名命名规则：域名反向+项目名
4. ionic 可直接修改标签样式，elementplus 不可
ionic 在
- ion-label {
display: flex !important;
height: 40px;
}
需要区分 element-plus，在带 scoped 标签下修改它时，是通过 类名（不是标签名）修改样式，且需要添加 :deep()
5. 为什么在 vue3 项目中，要引入 ionic 组件
在 vue3 中使用 ionic 时，页面中用到的 ionic 组件，都需要引入，举个栗子：
import { IonList, IonItem, IonLabel, IonThumbnail } from '@ionic/vue'
components: { IonList, IonItem, IonLabel, IonThumbnail },
如果不声明组件，也可以正常使用 ionic 组件，但网页会把他们当成 web component，而不是 Vue组件，也就是说，不能使用类似于 v-model 的 Vue 语法
举个栗子：
ion-select 组件，绑定的值是通过 :value="xx" 这么写的，但是这么写不是响应式的
在 vue 里通过 v-model 进行双向绑定实现响应式，而 ion-input 上不能直接使用 v-model 替代 :value，因为他是 web component
如果想在 ion-input 上使用 v-model 的话，需要将 ion-input 进行引入并声明
6. 如何使用 ionic 主题色 variables.css
在 variables.css 中有常见的主题色变量，可以把 自定义颜色 放在该文件的 :root { } 里
在 ionic 中，使用 主题色变量/全局变量：
- ion-content {
--background: var(--bg-color-black);
}
全局样式文件，可以在 assets/style/ 中创建文件，并在 main.ts 中进行引入
ionic 的全局样式，就可以在上述文件中修改
7. async/await VS promise.all()【select and list】
promise.all() 获得的 成功结果数组里的 数据顺序，和 promise.all() 接收 异步方法数组的 顺序是一致的
举个栗子：假设执行 promise.all([p1, p2])，即便 p1 结果 获取的比 p2结果晚，最终 p1结果在前
作用：没有逻辑关系的异步方法，在 onMounted 中同时调用
注意：promise.all() 让方法同时执行，而不是先后执行
async/await 可以控制方法执行的顺序，不是同步执行异步方法
假设现在有一个页面：里面包含了需要接口请求的下拉框及列表，列表的内容是根据下拉框的内容决定的，此时就应该考虑 async/await 决定异步请求顺序
也就是说，必须 await 下拉框请求，且拿到结果之后，才能执行列表获取请求
此时不能使用 promise.all()，因为此方法只能保证结果获取的顺序，而不能保证方法执行的顺序，也就是说，会同时执行 下拉框获取 / 列表获取 两个方法，而不是先执行下拉框获取并且拿到结果，再执行列表获取方法
8 ion-select 自带属性 和 自定义配置项 会同时生效
自带属性：cancelText="取消"
自定义配置项： :interface-options="customActionSheetOptions"
- const customActionSheetOptions = {
cssClass: 'my-custom-interface', // 自定义类名
header: '事件类型', // 下拉框标题
translucent: true, // 让选中项高亮
};
{{ item.label }}
关于双向绑定：
- 官方给的示例是 :value="eventTypeModel" 绑定下拉框当前绑定的值
- 如果想使用 vue 实现 --- 双向绑定 --- 的话，可替换为 v-model="eventTypeModel"
- 引入和声明 ionic 组件之后，才能让浏览器把它们当成 vue 组件，识别 vue 语法哦
关于下拉框列表获取方式【枚举 vs 接口获取】：
- 应该通过接口获取下拉框列表
- 假设本地使用了枚举，如果需求变更，就需要修改枚举，重新打包发布 app，并让用户安装以获取更新，用户体验感会降低，因此必须使用接口获取下拉列表
使用枚举示例：
- // 事项类型枚举
export enum eventType {
XZXK = '行政许可',
XZQR = '行政确认',
} - // 下拉框双向绑定的值
eventTypeModel: eventType.XZXK,
// 下拉框列表
eventTypeOptions: [{
value: eventType.XZQR,
label: eventType.XZQR,
}],
当下拉框列表发生变化时，可在 html 中传入 $event，监听变化
$event.detail 可以查看当前绑定的 value
- const handleSecOrInpChange = (ev: any) => {
console.log(ev.detail)
};
9. 区分Vue3 获取路由信息、路由跳转
路由跳转并传参【动词，router】：
-
import { useRouter } from 'vue-router';
const router = useRouter();router.push({
path: 'projectListPage',
query: {
eventName: item.eventName,
},
});
路由参数获取【名词，route】：
-
import { useRoute } from 'vue-router'
const route = useRoute();
eventName: route.query.eventName,
10. iframe 涉及的谷歌安全策略，实现单点登录存在的问题
此项目 单点登录 的原理：在 tabs 页面中，添加了一个不可见的 iframe，该 iframe 调用了接口，存储了 cookie，实现单点登录
即，在此 app 登录之后，其他使用同一 ou 登录的应用，也自动登录了，无需手动登录
随着谷歌版本的升级，浏览器不再支持这种不安全的策略，会报错
网上给的解决方法是，添加 sandbox="xxx"（报错里给的信息），但是这个解决方法不奏效，目前还没有很好的解决方法
移动端现在不会出现这种问，，因为 移动端浏览器版本 还没有 pc端浏览器版本高，低版本浏览器尚不存在这种安全策略
11. Ionic 安装 capacitor 插件的三行命令的含义
如上图所示，Ionic 官网一般会给出三行命令安装 capacitor 插件
第一条是使用 npm 安装 cordova 插件
- 此时安装的插件仅支持 es 写法，不支持 ts 写法
第二条是使用 npm 安装 ionic 封装过的 cordova 插件
- 此时插件支持 ts 写法；一般情况下，我们可以不用安装这些，因为个别插件即使安装了这个，若不用 es 写，还是容易出现问题；（参考我之前使用 FileTransfer 插件监听下载进度时，因为将 funciton() {} 写成了 () => {} 这种形式，导致了 onprogress 监听失败）
第三条命令是同步命令
- 一般情况下，我们在 vscode 中执行完安装 capacitor 插件命令后，需要将安装的插件同步到 Android Studio 中进行打包；又或者更改了 vscode 中的代码，想要将最新代码同步到 Android Studio 中，此时就需要执行这个同步命令；同步命令中的 cap 其实就是 capacitor 的简写
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！