u

notes/前端开发/https/nginx_https配置.md

@@ -0,0 +1,97 @@
+## mkcer (本地)
+
+### 下载
+
+下载地址：https://github.com/FiloSottile/mkcert/releases
+
+根据系统下载即可
+
+### **安装**
+
+打开 cmd 执行命令
+
+```bash
+mkcert-v1.4.4-windows-amd64.exe -install
+```
+
+点击 是 即可
+
+![image-20250607143422764](./assets/nginx_https%E9%85%8D%E7%BD%AE/image-20250607143422764.png)
+
+安装成功后会提示
+
+![image-20250607143508023](./assets/nginx_https%E9%85%8D%E7%BD%AE/image-20250607143508023.png)
+
+### 生成自签证书
+
+执行命令
+
+```bash
+mkcert-v1.4.4-windows-amd64.exe localhost 127.0.0.1 ::1 192.168.1.131
+```
+
+成功提示
+
+![image-20250607145509961](./assets/nginx_https%E9%85%8D%E7%BD%AE/image-20250607145509961.png)
+
+这样就成功啦，然后生成的证书在 **mkcert-v1.4.4-windows-amd64.exe** 的同级目录下
+
+### 配置 nginx
+
+配置文件参考
+
+```
+#user  nobody;
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    sendfile        on;
+    keepalive_timeout  65;
+
+    # ✅ HTTP 服务监听 8088
+    server {
+        listen       8088;
+        server_name  localhost;
+
+        location / {
+            root   html;
+            index  index.html index.htm;
+        }
+
+        error_page   500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   html;
+        }
+    }
+
+    # ✅ HTTPS 服务监听 443（使用 mkcert 生成的证书）
+    server {
+        listen       443 ssl;
+        server_name  192.168.1.131;
+
+        ssl_certificate      D:/Devtool/localhost+3.pem;
+        ssl_certificate_key  D:/Devtool/localhost+3-key.pem;
+
+        ssl_session_cache    shared:SSL:1m;
+        ssl_session_timeout  5m;
+
+        ssl_protocols TLSv1.2 TLSv1.3;
+        ssl_ciphers  HIGH:!aNULL:!MD5;
+        ssl_prefer_server_ciphers  on;
+
+        location / {
+            root   html;  # 若是 Vue 项目请替换为 dist 目录路径
+            index  index.html index.htm;
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}
+```
+

notes/前端开发/https/vite_https配置.md

@@ -0,0 +1,57 @@
+## **@vitejs/plugin-basic-ssl**
+
+安装
+
+```bash
+pnpm add -D @vitejs/plugin-basic-ssl
+```
+
+在 **vite.config.js** 中进行使用
+
+```ts
+import basicSsl from '@vitejs/plugin-basic-ssl'
+
+export default defineConfig({
+  plugins: [vue(), basicSsl()],
+  server: {
+    host: '0.0.0.0',
+    https: true
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  }
+})
+```
+
+重新运行项目即可
+
+
+
+## mkcer (避免警告)
+
+参考文档  [nginx_https配置.md](./nginx_https配置.md) 的配置方法
+
+修改 **vite.config.js** 文件
+
+```js
+import fs from 'fs'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+    https: {
+        key: fs.readFileSync('D:/Devtool/localhost+3-key.pem'),
+        cert: fs.readFileSync('D:/Devtool/localhost+3.pem'),
+    }
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  }
+})
+```
+

notes/前端开发/uniapp/低版本浏览器适配.md

@@ -0,0 +1,107 @@
+## Uniapp + Vite + Vue 3 兼容低版本浏览器
+
+### 白屏问题
+
+环境：
+
+- 浏览器：Chrome56
+- Unibest：快速开发框架，官网：https://unibest.tech/
+
+出现白屏参考上面的方案。
+
+使用的是 Vscode 模板的话，直接参考  [vue3_低版本浏览器适配.md](..\vue\vue3\vue3_低版本浏览器适配.md) 
+
+使用的是 Hbuilderx 模板的话，在根目录下添加`vite.config.js`文件
+
+```js
+import Uni from '@dcloudio/vite-plugin-uni'
+import legacy from '@vitejs/plugin-legacy'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+    plugins:[
+        uni(),
+        legacyPlugin({
+            // 配置参考上面的 md 文件
+        })
+    ]
+})
+```
+
+
+
+### 原生Tabbar遮挡
+
+如果Uniapp原生的Tabbar会遮挡一部分内容，这是因为部分低版本浏览器可能不支持 `env` 计算函数，所以导致整个样式设置失效。
+
+
+
+**解决方案：**
+
+新建 `/hooks/useSafeAreaBottom` 文件夹
+
+在该目录下新建 `index.ts` 和 `index.css` 文件，添加一下内容
+`index.css`：
+
+```css
+.safe-area-bottom {
+  padding-bottom: 50px;
+  padding-bottom: calc(50px + constant(safe-area-inset-bottom));
+  padding-bottom: calc(50px + env(safe-area-inset-bottom));
+}
+// 设置为50px是因为Uniapp的tabber的高度固定为50px。
+```
+
+`index.ts`：
+
+```ts
+import './index.css'
+
+export function useSafeAreaBottom(): {
+  safeAreaInsets: UniApp.GetSystemInfoResult['safeAreaInsets']
+  needSafeAreaBottom: boolean
+} {
+  const systemInfo = uni.getSystemInfoSync()
+
+  const safeAreaInsets: UniApp.GetSystemInfoResult['safeAreaInsets'] =
+    systemInfo.safeAreaInsets ?? {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    }
+
+  // ✅ 仅检测是否支持 env(safe-area-inset-bottom)
+  const supportsEnv =
+    typeof window !== 'undefined' &&
+    'CSS' in window &&
+    typeof CSS.supports === 'function' &&
+    CSS.supports('padding-bottom', 'env(safe-area-inset-bottom)')
+
+  const needSafeAreaBottom = !supportsEnv
+
+  return {
+    safeAreaInsets,
+    needSafeAreaBottom,
+  }
+}
+```
+
+使用：
+
+```vue
+<template>
+  <view
+    :class="{ 'safe-area-bottom': needSafeAreaBottom }"
+    :style="{ marginTop: safeAreaInsets.top + 'px' }"
+  >
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { useSafeAreaBottom } from '@/hooks/useSafeAreaBottom/index'
+
+const { safeAreaInsets, needSafeAreaBottom } = useSafeAreaBottom()
+</script>
+```
+

notes/前端开发/uniapp/基础配置.md

@@ -0,0 +1,15 @@
+## 设置页面背景色
+
+在 `pages.json` 中设置 `backgroundColor` 并未生效。
+
+设置全局背景色在 `App.vue` 中进行设置，设置单个页面背景色就在对应的页面中设置。
+
+```vue
+<!--此标签需要新建，不要和样式搞在一起-->
+<style>
+page {
+  background-color: #f5f7fa;
+}
+</style>
+```
+

notes/前端开发/uniapp/离线自定义基座_原生插件.md

@@ -0,0 +1,396 @@
+打离线自定义基座的原因：现在如果使用 HBuilderX 打自定义基座的话，一个账号会有限制次数。并且时间过慢。
+
+## 1. 安装 Android Studio
+
+使用该工具进行自定义基座。
+
+下载地址：https://developer.android.com/studio?hl=zh-cn
+
+按照顺序安装即可，注意SDK的位置不要安装到C盘
+
+## 2. 下载 HBuilderX 离线SDK
+
+下载地址：https://nativesupport.dcloud.net.cn/AppDocs/download/android.html
+
+**注意：**下载的 SDK 的版本需要与 HBuilderX 的版本保持一致。
+
+历史版本：https://pan.baidu.com/share/init?surl=KtOCtMZJSgfAayHNjTpdTg&pwd=4hvi
+
+## 3. 导入 HBuilder-Integrate-AS 项目到 Android Studio
+
+解压从 HBuilderX 下载后的 Android-SDK，使用 Android Studio 打开解压后的 HBuilder-Integrate-AS 项目。
+
+![image-20250605212338756](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605212338756.png)
+
+导入成功后，会发现目录只有部分内容。
+
+![image-20250605212851389](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605212851389.png)
+
+这时候需要将 Android 更新为 Project 既可查看到项目全部内容
+
+![image-20250605212748459](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605212748459.png)
+
+修改后的效果
+
+![image-20250605212943442](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605212943442.png)
+
+
+
+## 4. 配置 Andriod Studio
+
+配置 JDK ，配置路径：Settings - Build - Build Tools - Gradle 
+
+将 Gradle JDK 的路径修改为本地的路径，修改后点击 `Apply` 即可。注意：JDK 的版本需要和 Gradle 的版本进行适配，如果不适配那么运行的时候也会有详细的报错信息。
+
+![image-20250605213010528](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605213010528.png)
+
+## 5. Uniapp开发者中心 申请相关信息
+
+### 5.1 创建应用
+
+首先根据应用名称检查是否已经存在当前的项目。
+
+![image-20250605213736199](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605213736199.png)
+
+有过没有的话则点击右上角的 `创建应用` 按钮进行创建：
+
+![image-20250605213949773](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605213949773.png)
+
+创建成功后会添加到 **我的应用** 列表中
+
+![image-20250605214057309](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605214057309.png)
+
+点击对应的 **应用名称** 即可进入对应的应用
+
+### 5.2 申请云端证书
+
+点击创建证书
+
+![image-20250605214240692](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605214240692.png)
+
+因为需要时间，过段时间刷新即可
+
+![image-20250605214345015](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605214345015.png)
+
+创建成功后，点击 **证书详情 ** 这里面有需要的一些信息。
+
+需要的有 别名、MD5、SHA1、SHA256
+
+![image-20250605214656183](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605214656183.png)
+
+
+
+同时还需要证书密码，点击 **查看证书密码 ** 即可获取到。
+
+![image-20250605214738654](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605214738654.png)
+
+现在记录的信息有： 别名、MD5、SHA1、SHA256、证书密码
+
+注意下载申请过的证书，后面需要用到
+![image-20250605220809124](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605220809124.png)
+
+### 5.3 新增平台信息
+
+进入 **各平台信息** ，点击 **新增** 按钮
+
+![image-20250605214824972](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605214824972.png)
+
+填写以下信息，注意填写包名（任意），该包名后面使用到。这个时候 SHA1、MD5、SHA256 就是在 [5.2 申请云端证书](#52-申请云端证书) 章节申请的信息。
+
+![image-20250605214940997](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605214940997.png)
+
+创建成功后就会显示
+
+![image-20250605215621828](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605215621828.png)
+
+创建离线Key，点击刚刚创建的平台信息的 创建离线Key 按钮
+
+![image-20250605215746561](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605215746561.png)
+
+点击进行创建，创建成功后，会显示 **查看离线Key**
+
+![image-20250605215836073](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605215836073.png)
+
+点击查看对应的离线Key，主要保留该值，后面会用到
+
+## 6. 配置导入过的 HBuilder-Integrate-AS 项目
+
+配置 `HBuilder-Integrate-AS\simpleDemo\build.gradle`  ，这些修改的信息 已经都在  [5. Uniapp开发者中心 申请相关信息](#5-Uniapp开发者中心 申请相关信息) 申请过了，我已标注。注意下载云端证书，并放到 simpleDemo 目录下。
+
+![image-20250605221020620](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605221020620.png)
+
+
+
+替换 离线Key（该值就在 [5.3 新增平台信息](#53-新增平台信息) 申请过了），配置 `HBuilder-Integrate-AS\simpleDemo\src\main\AndroidManifest.xml` 文件。
+
+![image-20250605220251310](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605220251310.png)
+
+配置 `HBuilder-Integrate-AS\simpleDemo\src\main\assets\data\dcloud_control.xml` ，替换自己项目的appid。
+
+![image-20250605221248605](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605221248605.png)
+
+****
+
+
+
+## 7. Hbuilder X 导出本地打包资源
+
+注意 APPID 需要和创建应用的 appid 保持一致。如果不一致，可以去源码视图进行修改
+
+![image-20250605221845219](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605221845219.png)
+
+导出成功后，路径参考：
+
+![image-20250605222035612](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605222035612.png)
+
+复制 **resources** 文件夹下面文件夹，然后替换 **HBuilder-Integrate-AS** 项目中的 `HBuilder-Integrate-AS\simpleDemo\src\main\assets\apps\__UNI__A` 目录，将 `__UNI__A` 文件夹替换为导出的 `__UNI__9063282` 文件夹，替换后如下：
+
+![image-20250605222415349](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250605222415349.png)
+
+确保 应用版本名称 和 应用版本号保持一致
+
+![image-20250606215616667](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606215616667.png)
+
+![image-20250606215713105](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606215713105.png)
+
+## 8. 运行项目
+
+先进行加载配置好的项目
+
+![image-20250606202444591](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606202444591.png)
+
+加载成功后即可出现蓝色运行按钮，点击运行即可
+
+![image-20250606202313531](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606202313531.png)
+
+
+
+## 9. 导入原生插件
+
+> 如果不需要该步可以忽略，不影响自定义基座。
+
+参考网站：https://zh.uniapp.dcloud.io/plugin/native-plugin.html#%E6%9C%AC%E5%9C%B0%E6%8F%92%E4%BB%B6-%E9%9D%9E%E5%86%85%E7%BD%AE%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6
+
+### 9.1 下载插件
+
+这里用 **DCloud-RichAlert** 举例，插件下载地址：https://ext.dcloud.net.cn/plugin?id=36
+
+下载完毕后，新建 **nativeplugins** 文件夹，将解压后的插件放到该文件夹下面
+
+![image-20250606203245077](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606203245077.png)
+
+### 9.2 配置本地插件
+
+![image-20250606203402005](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606203402005.png)
+
+选择插件
+
+![image-20250606203423327](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606203423327.png)
+
+配置成功页面
+
+![image-20250606203501954](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606203501954.png)
+
+然后就可以使用啦，在页面中添加测试代码
+
+```vue
+<template>
+	<view class="content">
+		<image class="logo" src="/static/logo.png"></image>
+		<view class="text-area">
+			<text class="title">{{title}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: 'Hello'
+			}
+		},
+		onLoad() {
+			const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')
+			dcRichAlert.show({
+					position: 'bottom',
+					title: "提示信息",
+					titleColor: '#FF0000',
+					content: "<a href='https://uniapp.dcloud.io/' value='Hello uni-app'>uni-app</a> 是一个使用 Vue.js 开发跨平台应用的前端框架!\n免费的\n免费的\n免费的\n重要的事情说三遍",
+					contentAlign: 'left',
+					checkBox: {
+						title: '不再提示',
+						isSelected: true
+					},
+					buttons: [{
+							title: '取消'
+						},
+						{
+							title: '否'
+						},
+						{
+							title: '确认',
+							titleColor: '#3F51B5'
+						}
+					]
+				}, result => {
+					switch (result.type) {
+						case 'button':
+							console.log("callback---button--" + result.index);
+							break;
+						case 'checkBox':
+							console.log("callback---checkBox--" + result.isSelected);
+							break;
+						case 'a':
+							console.log("callback---a--" + JSON.stringify(result));
+							break;
+						case 'backCancel':
+							console.log("callback---backCancel--");
+							break;
+					}
+				});
+		},
+		methods: {
+
+		}
+	}
+</script>
+```
+
+当然，现在还没有结束，如果需要在本地看到效果，需要重复 [7. Hbuilder X 导出本地打包资源](#7-Hbuilder X 导出本地打包资源) 步骤，将新的打包资源将旧的替换掉。
+
+### 9.3 配置项目
+
+**重要的下一步**，将 `nativeplugins\DCloud-RichAlert\android\uniplugin_richalert.aar` 复制到 `HBuilder-Integrate-AS\simpleDemo\libs` 文件夹下。
+
+![image-20250606204822878](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606204822878.png)
+
+然后呢，还没有结束哦。
+
+在assets目录下创建 **dcloud_uniplugins.json** 文件，添加以下内容
+
+```json
+{  
+  "nativePlugins": [  
+    {
+      "plugins": [  
+        {  
+          "type": "module",  
+          "name": "DCloud-RichAlert",  
+          "class": "uni.dcloud.io.uniplugin_richalert.RichAlertWXModule"  
+        }  
+      ]  
+    }  
+  ]  
+}
+```
+
+![image-20250606204944168](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606204944168.png)
+
+### 9.4 配置gradle文件
+
+添加制定依赖。
+
+```
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: [])
+    implementation 'androidx.appcompat:appcompat:1.1.0'
+    implementation 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'
+    implementation 'androidx.core:core:1.1.0'
+    implementation "androidx.fragment:fragment:1.1.0"
+    implementation 'androidx.recyclerview:recyclerview:1.1.0'
+    implementation 'com.facebook.fresco:fresco:2.5.0'
+    implementation "com.facebook.fresco:animated-gif:2.5.0"
+    implementation 'com.github.bumptech.glide:glide:4.9.0'
+    implementation 'com.alibaba:fastjson:1.2.83'
+    implementation 'androidx.webkit:webkit:1.5.0'
+    // 基座需要，必须添加。主要是这个是
+    implementation 'com.github.bumptech.glide:glide:4.9.0'
+}
+```
+
+![image-20250606205133081](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606205133081.png)
+
+### 9.5 运行项目
+
+然后就是可以重新运行项目啦。运行成功的结果如下：
+
+![image-20250606205220344](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606205220344.png)
+
+
+
+## 10. 自定义基座
+
+### 10.1 Debug 配置
+
+修改 `HBuilder-Integrate-AS\simpleDemo\src\main\assets\data\dcloud_control.xml` 文件，设置 Debug 模式：
+
+```xml
+<hbuilder debug="true" syncDebug="true">
+<apps>
+    <app appid="__UNI__ID" appver=""/>
+</apps>
+</hbuilder>
+```
+
+![image-20250606214508974](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606214508974.png)
+
+
+
+修改 `HBuilder-Integrate-AS\simpleDemo\build.gradle`  在该文件中添加 **okhttp3** 依赖
+
+```
+dependencies {  
+    implementation "com.alibaba:fastjson:1.2.83"  
+    implementation "com.squareup.okhttp3:okhttp:3.12.12"  
+}
+```
+
+![image-20250606210400150](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606210400150.png)
+
+### 10.2 导入 Debug SDK
+
+需要导入的 SDK 位于 `Android-SDK@4.66.82418_20250520\SDK\libs` 中
+
+![image-20250606220129264](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606220129264.png)
+
+将 **debug-server-release.aar** 复制到 **libs** 下面
+
+![image-20250606220049206](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606220049206.png)
+
+
+
+### 10.3 生成APK文件
+
+![image-20250606210821256](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606210821256.png)
+
+生成后会生成在 debug 目录下
+
+![image-20250606211553151](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606211553151.png)
+
+### 10.4 复制APK文件到HBuilderX中
+
+1. 在HBuilderX项目中创建创建 unpackage 目录，在 unpackage 目录中创建 debug 目录，将上述生成的APK文件拷贝到debug目录中。
+2. **重命名**文件为 **android_debug.apk**，目录结构参考下图
+
+![image-20250606211143326](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606211143326.png)
+
+### 10.5 运行自定义基座
+
+![image-20250606211213195](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606211213195.png)
+
+选择自定义基座
+
+![image-20250606211238587](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606211238587.png)
+
+点击运行，运行结果如下：
+
+![image-20250606220607451](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606220607451.png)
+
+同时能支持 **热更新** 。修改下，查看效果吧。
+
+![image-20250606220642683](./assets/%E7%A6%BB%E7%BA%BF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%BA%E5%BA%A7_%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6/image-20250606220642683.png)
+
+## 11. 模块及三方 SDK 配置
+
+参考官网：https://nativesupport.dcloud.net.cn/AppDocs/usemodule/androidModuleConfig/others.html

notes/前端开发/vue/vue3/低版本浏览器适配.md

@@ -0,0 +1,68 @@
+## Vite + Vue3 解决低版本浏览器中出现白屏
+
+环境：
+
+- 浏览器：Chrome56
+- Vue：^3.5.15
+- Vite：6.3.5
+
+解决方案：
+
+`@vitejs/plugin-legacy` ，该包是Vite提供的一个插件，为打包后的文件提供传统浏览器兼容性支持。官网：https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
+
+`terser`，主要用于压缩代码，还有代码混淆、源码映射等功能。
+
+```bash
+pnpm i @vitejs/plugin-legacy terser -D
+```
+
+安装上述依赖后，在 `vite.config.ts/js` 中添加以下内容：
+
+```ts
+import legacy from '@vitejs/plugin-legacy'
+// 在插件处添加一下功能
+plugins: [
+  legacy({
+    // 目标浏览器环境，'defaults' 是浏览器列表默认设置，支持 Chrome 56 及以上
+    targets: ['defaults', 'Chrome >= 56'],
+
+    // 额外引入的兼容性 polyfill，这里加入了对 generator 函数的支持
+    additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
+
+    // 是否生成兼容旧浏览器的代码块（chunk）
+    renderLegacyChunks: true,
+
+    // 需要引入的具体 polyfill 列表，确保目标环境缺失的 API 得到支持
+    polyfills: [
+      'es.symbol',                         // Symbol 支持
+      'es.array.filter',                   // Array.prototype.filter 支持
+      'es.promise',                       // Promise 支持
+      'es.promise.finally',                // Promise.prototype.finally 支持
+      'es.object.assign',                  // Object.assign 支持
+      'es.map',                           // Map 支持
+      'es.set',                           // Set 支持
+      'es.array.for-each',                 // Array.prototype.forEach 支持
+      'es.object.define-properties',      // Object.defineProperties 支持
+      'es.object.define-property',        // Object.defineProperty 支持
+      'es.object.get-own-property-descriptor',      // Object.getOwnPropertyDescriptor 支持
+      'es.object.get-own-property-descriptors',     // Object.getOwnPropertyDescriptors 支持
+      'es.object.keys',                   // Object.keys 支持
+      'es.object.to-string',              // Object.prototype.toString 支持
+      'web.dom-collections.for-each',     // DOM 集合的 forEach 支持
+      'esnext.global-this',               // 全局变量 globalThis 支持
+      'esnext.string.match-all',           // String.prototype.matchAll 支持
+      'es.array.iterator',                // 数组迭代器支持
+      'es.string.includes',               // String.prototype.includes 支持
+      'es.string.starts-with',            // String.prototype.startsWith 支持
+      'es.object.values',                 // Object.values 支持
+    ],
+  }),
+]
+```
+
+`targets` 可以参考：[Browserslist官网](https://github.com/browserslist/browserslist) 查询
+
+**注意该方案只在打包后生效。**
+
+
+