This commit is contained in:
oneao committed 2025-06-10 21:27:20 +08:00
commit c570ec514c
550 files changed
+152597

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

@@ -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;
}
}
}
```
@@ -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')
}
}
})
```
Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 203 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 201 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

@@ -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>
```
+15
View File
@@ -0,0 +1,15 @@
## 设置页面背景色
在 `pages.json` 中设置 `backgroundColor` 并未生效。
设置全局背景色在 `App.vue` 中进行设置,设置单个页面背景色就在对应的页面中设置。
```vue
<!--此标签需要新建,不要和样式搞在一起-->
<style>
page {
background-color: #f5f7fa;
}
</style>
```
@@ -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
@@ -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) 查询
**注意该方案只在打包后生效。**
Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 173 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

+211
View File
@@ -0,0 +1,211 @@
# Windows系统
## 1 安装
**1、**登陆微软中国官网:[Microsoft - Official Home Page](https://link.zhihu.com/?target=https%3A//www.microsoft.com/zh-cn/);在搜索中输入 SQL Server 2008 并搜索。
![img](./assets/sqlserver2008/v2-7b64ed995472d681b150272e831bd06f_1440w.jpg)
不如苹果官网好看的巨硬官网
(16, 11, 19)最近微软的中文官网不知何故,会搜不到SQL Server 2008,我直接把下载链接放到这里了
[Download Microsoft® SQL Server® 2008 R2 SP2 - Express Edition from Official Microsoft Download Center](https://link.zhihu.com/?target=https%3A//www.microsoft.com/zh-CN/download/details.aspx%3Fid%3D30438)
**2、**下载
下载 64 位程序,如果系统是 32 位,就选 32 位的
![image-20250610210005234](./assets/sqlserver2008/image-20250610210005234.png)
这里只下载 **SQLEXPR_x64_CHS.exe** ,可视化工具选用 **Navicat**
**3、**安装
先安装SQL,再安装 SQL Management Studio
双击SQLEXPR_x64.CHS
![img](./assets/sqlserver2008/v2-a3b4eaa43750e31661f95cc1e25d7c55_1440w.jpg)
等待加载完毕
(这时会有一定的几率提醒你的电脑缺少[Microsoft .NET Framework 2.0](https://zhida.zhihu.com/search?content_id=102713512&content_type=Article&match_order=1&q=Microsoft+.NET+Framework+2.0&zd_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ6aGlkYV9zZXJ2ZXIiLCJleHAiOjE3NDk3MzMwMzQsInEiOiJNaWNyb3NvZnQgLk5FVCBGcmFtZXdvcmsgMi4wIiwiemhpZGFfc291cmNlIjoiZW50aXR5IiwiY29udGVudF9pZCI6MTAyNzEzNTEyLCJjb250ZW50X3R5cGUiOiJBcnRpY2xlIiwibWF0Y2hfb3JkZXIiOjEsInpkX3Rva2VuIjpudWxsfQ.riy6QZKx3etA1Hd2g0oaCLoNl0G_pzuoq8tZqWZXfFo&zhida_source=entity) 或更高版本
根据他的提示进行安装就行)
![img](./assets/sqlserver2008/v2-21688a13be329ecf9efbdbc4040596a3_1440w.jpg)
如果没有,请忽略这一步。
当他顺利加载完毕之后,我们就可以看到下图所示的界面,**点击全新安装**
![img](./assets/sqlserver2008/v2-1688783d592ae41aa9fcf397867a2588_1440w.jpg)
![img](./assets/sqlserver2008/v2-4c7d6f2d930368d96ed646c8ef1e12c8_1440w.jpg)
接受并下一步
![img](./assets/sqlserver2008/v2-f3f22c97d8dfe77a9adb6811aa60dffe_1440w.jpg)
点击安装
一直下一步,保持默认设置到”实例配置“这一节,并选择”默认实例“,并点击下一步
![img](./assets/sqlserver2008/v2-34283637dc32b1e6623305be7194b3c6_1440w.jpg)
再一路下一步到”数据库引擎配置这一节“
![img](./assets/sqlserver2008/v2-9c9150dd6b42728ba18d001e08870058_1440w.jpg)
如果没有用户的话就点击”添加当前用户”
![img](./assets/sqlserver2008/v2-994ee12358e16a3c839030de71bb5fb0_1440w.jpg)
错误报告可选可不选
一直下一步直到安装完成
![img](./assets/sqlserver2008/v2-3c4a8588b5a2faca27dec12af7c99c4b_1440w.jpg)
到此为止,我们的安装过程已经进行完成了。 SQL Management Studio 可按照需求安装
## 2 配置
### 2.1 服务
Windows 系统:`win` + `r` 输入 `services.msc` ,打开后找到 SqlServer 相关的,并将服务修改为自动,并且需要 首次 手动启动
![image-20250610210638276](./assets/sqlserver2008/image-20250610210638276.png)
![image-20250610210703831](./assets/sqlserver2008/image-20250610210703831.png)
### 2.2 协议
`win` 键启动搜索,搜索 SQL Server 配置管理器
![image-20250610210833638](./assets/sqlserver2008/image-20250610210833638.png)
点击 SQL Server 配置管理器,确保该三个协议已启动,未启动则启动![image-20250610210952597](./assets/sqlserver2008/image-20250610210952597.png)
### 2.3 配置端口
右键 TCP/IP
![image-20250610211035375](./assets/sqlserver2008/image-20250610211035375.png)
点击属性,修改 TCP 端口 为 1433
![image-20250610211139630](./assets/sqlserver2008/image-20250610211139630.png)
点击 应用 和 确认后,**重启电脑才能生效**
## 3 校验
### 3.1 校验是否安装正确
打开 **命令提示符**(Win + R,输入 `cmd`,回车)
Windows 上默认安装 SQL Server 的时候,通常会带有 `sqlcmd` 工具(如果没有,可能需要单独安装“命令行工具”)。
1. 打开 **命令提示符**(Win + R,输入 `cmd`,回车)
2. 输入以下命令连接本机默认实例:
```bash
sqlcmd -S localhost -E
```
参数说明:
- `-S localhost` :连接本机默认实例
- `-E` :使用 Windows 身份验证
3. 如果成功连接,你会看到类似如下提示:
```shell
1>
```
4. 在提示符后输入测试命令:
```sql
SELECT @@VERSION;
GO
```
然后按回车,输出当前 SQL Server 版本信息,证明连接成功。
5. 输入
```
QUIT
```
退出命令行界面。
### 3.2 启用混合模式认证(SQL Server 和 Windows 认证)
默认情况下,SQL Server 只开启 Windows 认证(Windows Authentication Mode),你需要手动开启“混合模式”(Mixed Mode Authentication),才能使用 SQL Server 账号(如 `sa`)登录。
1. 打开命令提示符,连接到 SQL Server:
```bash
sqlcmd -S localhost -E
```
2. 执行以下命令开启混合模式:
```sql
EXEC xp_instance_regwrite
N'HKEY_LOCAL_MACHINE',
N'Software\Microsoft\MSSQLServer\MSSQLServer',
N'LoginMode',
REG_DWORD,
2
GO
```
> 说明:`LoginMode` 设置为 `2` 表示混合模式,`1` 表示只 Windows 认证。
3. 重启 SQL Server 服务,使设置生效:
- 打开服务管理器,找到 `SQL Server (实例名)` 服务,点击“重启”或先停止再启动。
4. 启用 `sa` 账号并设置密码(默认可能禁用)
继续用 `sqlcmd` 执行:
```
ALTER LOGIN sa ENABLE;
GO
ALTER LOGIN sa WITH PASSWORD = '你的强密码';
GO
```
- **密码建议**:至少 8 位,包含大小写字母、数字和特殊符号。
5. 测试账号密码登录
- 使用 `sqlcmd`:
```bash
sqlcmd -S localhost -U sa -P 你的密码
```
- 连接成功即开启账号密码登录。
6. 额外说明
- 修改注册表和重启服务后才生效。
- 也可以用 PowerShell 或其他管理工具执行上述 SQL 命令。
- 强烈建议启用强密码,防止安全风险。
- 生产环境尽量避免启用 `sa`,建议创建新的 SQL 登录账号。
Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

+32
View File
@@ -0,0 +1,32 @@
## 安装包
[typora_64bit_v1.9.5_setup.zip](..\..\software\typora_64bit_v1.9.5_setup.zip)
## 快捷字符
右箭头:→
## 保存图片到绝对路径
操作顺序:`文件` → `偏好设置` → `图像`
![image-20250605102241158](./assets/typora/image-20250605102241158.png)
**功能介绍:**
1. 对网络位置的图片应用上述规则:当插入网络图片时,会自动将该图片保存在本地。
2. 插入时自动转义图片URL:当插入图片时,Typora 会自动将图片路径中的特殊字符进行 URL 编码(转义)处理。
**注意:**
1. 需要重启才能生效。
2. 需要先保存笔记再插入图片才可以。
## 关联文件
1. 直接将文件粘贴即可,会自动转化为绝对路径。例如:`..\..\software\typora_64bit_v1.9.5_setup.zip`
2. 使用 md 语法:`[文件名](文件路径)`
使用 `alt` + `鼠标左键` 能够直接打开文件