
uni.openLocation和VUE3有兼容问题
VUE3 使用 uni.openLocation 浏览器不会打开新页面。会在原页面调用地图组件遮盖,这样使用浏览器自带返回按钮导致路由变化,页面始终被地图组件遮盖。(地图组件无法被浏览器返回事件关闭)
VUE3 使用 uni.openLocation 浏览器不会打开新页面。会在原页面调用地图组件遮盖,这样使用浏览器自带返回按钮导致路由变化,页面始终被地图组件遮盖。(地图组件无法被浏览器返回事件关闭)

【解决】您的应用在运行时,未见向用户告知权限申请的目的,向用户索取(相机)等权限,不符合华为应用市场审核标准。
简约解决方式:
uni.showModal({
title: "温馨提示",
content: "将申请相机权限,用于扫码功能",
success: (res) => {
if (res.confirm) {
// 唤起相册、相机、扫码、地理位置之类的api,如:uni.scanCode
}
}
})
更好的解决办法(实现如下图功能):可能有bug,仅供参考安卓权限说明蒙层

↓↓↓ 各位大佬点点赞

2023年DCloud插件大赛获奖名单
获奖名单
本次插件大赛收到大量优质插件,尤其是uni-app x的相关生态大幅完善,常用插件基本都有了。
获奖名单公布如下:
奖项 | 分类 | 获奖作者 | 获奖插件 |
---|---|---|---|
特等奖 | uni-app x+uniCloud | lieft | 快亿商城,uni-app x(uvue+uts)和uniCloud云端一体完整原生商城项目源码 |
奖项 | 分类 | 获奖作者 | 获奖插件 |
---|---|---|---|
一等奖 | uni-app x | 同名自定义 | TMUI4.0 tmx-ui UVUE组件及UTS插件库 |
一等奖 | uni-app x | UxFrame | UxFrame 低代码高性能UI框架 |
一等奖 | uniCloud | 禾店科技 | 禾店短剧 |
奖项 | 分类 | 获奖作者 | 获奖插件 |
---|---|---|---|
二等奖 | uni-app x | FirstUI | FirstUI-unix |
二等奖 | UTS插件 | kux | kux-mlkit-scancode谷歌扫码 |
二等奖 | uni-app x | 康爱公社 | kux-request 简洁高效的uts 请求库 |
二等奖 | UTS插件 | 网易云信 | 【官方】网易云信RTC音视频通话点对点呼叫组件(uni-app x) |
二等奖 | UTS插件 | 865***@qq.com | 高德地图点标记导航离线地图-原生 |
二等奖 | UTS插件 | 码农朱哲 | svg组件 |
二等奖 | uni-app x | 陌上华年 | qrcode 二维码生成 |
二等奖 | uniCloud | 小猿敲代码 | 汇玩App(完整项目可直接上线,含试玩游戏,试玩应用,uniad结合变现的APP网赚平台) |
奖项 | 分类 | 获奖作者 | 获奖插件 |
---|---|---|---|
三等奖 | HBuilderX | 智谱AI | CodeGeeX: AI Code AutoComplete, Chat, Auto Comment |
三等奖 | HBuilderX | 猫猫猫猫 | GitHub Copilot |
三等奖 | uni-app x | abc***@163.com | t-uvue-ui 首个基于UNI-APP X开发的前端UI框架 |
三等奖 | uni-app x | GraceUI | uXui 一款基于 uni-app x 的、免费、开源的 UI 框架 |
三等奖 | uni-app x | 229***@qq.com | 考试答题模板(appx) |
三等奖 | uni-app x | 陌上年华 | 手写板-签名签字-lime-signature |
三等奖 | uni-app x | 陌上年华 | watermark 防盗水印 |
三等奖 | UTS插件 | JKX | 高德地图组件 |
三等奖 | UTS插件 | UxFrame | UxFrame 微信SDK 微信支付 微信登录 微信分享 微信企业客服 |
三等奖 | UTS插件 | UxFrame | UxFrame 实时音视频通话直播SDK 支持语音通话 视频通话 语音直播 视频直播 录屏直播 |
三等奖 | UTS插件 | 小飞007 | 腾讯直播推流 |
三等奖 | UTS插件 | 小飞007 | UTS实现操作SQLite加密数据库 |
三等奖 | UTS插件 | 珊瑚 | Android端的AES、MD5、RSA、SHA、SM2、SM3、SM4加密解密 |
三等奖 | UTS插件 | 木杉丶 | 原生安卓Android ble低功耗蓝牙插件 |
三等奖 | UTS插件 | 康爱公社 | kux-dayjs |
三等奖 | UTS插件 | 码农朱哲 | android无须权限,选择文件 |
三等奖 | UTS插件 | 865***@qq.com | 腾讯x5webview支持离线内核 |
三等奖 | UTS插件 | 狼人残风001 | 悬浮窗小窗口画中画自定义画中画界面 |
三等奖 | uniCloud | monkeyFree | 【用户端】【多行业适用】多端配置自定义官网 |
三等奖 | uniCloud | 一幅画 | 星之链社区-unicloud版 |
因很多插件值得推荐,所以增加了贡献奖的名额。
奖项设置
特等奖:
奖品:2万元插件包销 + 8888元现金红包 + 插件市场置顶推荐半个月 + HBuilderX预置 + HBuilderX超大鼠标垫 + DCloud奖牌
名额:1名
一等奖:
奖品:2万元插件包销 + 1部Apple设备(mac mini 或 ipad 2选1) + 1000元现金红包+插件市场置顶推荐半个月 + HBuilderX预置 + HBuilderX超大鼠标垫 + DCloud奖牌
名额:3名
mac mini配置为M2芯片、16G内存、256G硬盘。
ipad配置为10.9寸,256G。
其中1部ipad由支付宝提供,定向给予支持unicloud支付宝小程序云版的unicloud插件作者。
二等奖
奖品:2000元插件包销 + 极客外设1台 (HHKB 机械键盘 或 小米 34寸曲面显示器 2选1) + 500元现金红包 + 插件市场置顶推荐1个星期 + HBuilderX超大鼠标垫 + DCloud奖牌
名额:8名
三等奖
奖品:(200元uniCloud代金券 或 护眼套餐 2选1) + HBuilderX超大鼠标垫 + DCloud奖牌
名额:20名
护眼套餐包括2件奖品整包发送:
贡献奖
奖品:HBuilderX超大鼠标垫
名额:50名
注:红包需缴纳个人所得税或通过云账户发放。
“插件包销”,是指获奖插件通过插件市场销售,DCloud兜底包销。以1等奖的2万元包销为例,如果获奖插件在插件市场1年内销售额没有达到2万元,则由DCloud付差额给获奖者进行兜底。包销只针对付费插件,如免费插件获得二等奖及以上奖励,其中的包销奖励无效。
“插件包销”即不虚、也不遥远,去年插件大赛获包销奖励的插件,均提前完成包销。其价值就是实实在在的人民币。
“HBuilderX预置”,是在HBuilderX新建项目界面,可直接选择该项目模板。这为插件带来大量的流量。不适合预置的插件类型,无法领取此奖项。
除上述奖品外,
- 三等奖及以上获奖插件作者,都将进入DCloud VIP技术支持群,享受优先的技术支付、问题反馈。
- 所有获奖插件的集锦页面,还将通过HBuilderX工具、论坛、QQ微信群进行全量推广,给予优秀插件充分的曝光。
HBuilderX预置窗体界面如下:
奖牌照片如下:
历史信息
-
参赛起止时间:从23年10月24日起,到24年3月31日止。
-
鼓励的插件范围
-
uni-app x 前端插件,如ui库。现有插件可参考uvue组件
-
uts插件,扩展原生能力。现有插件可参考uts插件。除了插件市场的插件,uni-app x的源码仓库,也有大量插件源码可参考,因为uni-app x的很多组件和api就是用uts开发的,api仓库详见,组件仓库详见
-
uniCloud插件,优秀的云端一体插件。现有插件可参考云端一体项目模板
-
有助于开发者广告变现的运营类插件
-
HBuilder插件
奖品领取
请各位获奖作者尽快提交自己的邮寄地址,我们会陆续联系获奖人员发放奖品;
邮寄地址提交方式:登录ask社区,点击右上角个人头像,进入设置
界面,设置界面下方补充快递邮寄地址。
所有2选1
的奖品,插件作者可以发邮件到 service@dcloud.io,说明社区账号、获奖插件及希望选择的奖品。
已获奖的插件作者请继续升级迭代插件;
未获奖的今年还有机会,官方会继续为建设更好的uni-app x生态推出其他计划。不管是为了下次大赛获奖,还是为了把握uni-app x的新浪潮,或者在插件市场通过售卖插件变现,都是值得期待的好事。
获奖名单
本次插件大赛收到大量优质插件,尤其是uni-app x的相关生态大幅完善,常用插件基本都有了。
获奖名单公布如下:
奖项 | 分类 | 获奖作者 | 获奖插件 |
---|---|---|---|
特等奖 | uni-app x+uniCloud | lieft | 快亿商城,uni-app x(uvue+uts)和uniCloud云端一体完整原生商城项目源码 |
奖项 | 分类 | 获奖作者 | 获奖插件 |
---|---|---|---|
一等奖 | uni-app x | 同名自定义 | TMUI4.0 tmx-ui UVUE组件及UTS插件库 |
一等奖 | uni-app x | UxFrame | UxFrame 低代码高性能UI框架 |
一等奖 | uniCloud | 禾店科技 | 禾店短剧 |
奖项 | 分类 | 获奖作者 | 获奖插件 |
---|---|---|---|
二等奖 | uni-app x | FirstUI | FirstUI-unix |
二等奖 | UTS插件 | kux | kux-mlkit-scancode谷歌扫码 |
二等奖 | uni-app x | 康爱公社 | kux-request 简洁高效的uts 请求库 |
二等奖 | UTS插件 | 网易云信 | 【官方】网易云信RTC音视频通话点对点呼叫组件(uni-app x) |
二等奖 | UTS插件 | 865***@qq.com | 高德地图点标记导航离线地图-原生 |
二等奖 | UTS插件 | 码农朱哲 | svg组件 |
二等奖 | uni-app x | 陌上华年 | qrcode 二维码生成 |
二等奖 | uniCloud | 小猿敲代码 | 汇玩App(完整项目可直接上线,含试玩游戏,试玩应用,uniad结合变现的APP网赚平台) |
奖项 | 分类 | 获奖作者 | 获奖插件 |
---|---|---|---|
三等奖 | HBuilderX | 智谱AI | CodeGeeX: AI Code AutoComplete, Chat, Auto Comment |
三等奖 | HBuilderX | 猫猫猫猫 | GitHub Copilot |
三等奖 | uni-app x | abc***@163.com | t-uvue-ui 首个基于UNI-APP X开发的前端UI框架 |
三等奖 | uni-app x | GraceUI | uXui 一款基于 uni-app x 的、免费、开源的 UI 框架 |
三等奖 | uni-app x | 229***@qq.com | 考试答题模板(appx) |
三等奖 | uni-app x | 陌上年华 | 手写板-签名签字-lime-signature |
三等奖 | uni-app x | 陌上年华 | watermark 防盗水印 |
三等奖 | UTS插件 | JKX | 高德地图组件 |
三等奖 | UTS插件 | UxFrame | UxFrame 微信SDK 微信支付 微信登录 微信分享 微信企业客服 |
三等奖 | UTS插件 | UxFrame | UxFrame 实时音视频通话直播SDK 支持语音通话 视频通话 语音直播 视频直播 录屏直播 |
三等奖 | UTS插件 | 小飞007 | 腾讯直播推流 |
三等奖 | UTS插件 | 小飞007 | UTS实现操作SQLite加密数据库 |
三等奖 | UTS插件 | 珊瑚 | Android端的AES、MD5、RSA、SHA、SM2、SM3、SM4加密解密 |
三等奖 | UTS插件 | 木杉丶 | 原生安卓Android ble低功耗蓝牙插件 |
三等奖 | UTS插件 | 康爱公社 | kux-dayjs |
三等奖 | UTS插件 | 码农朱哲 | android无须权限,选择文件 |
三等奖 | UTS插件 | 865***@qq.com | 腾讯x5webview支持离线内核 |
三等奖 | UTS插件 | 狼人残风001 | 悬浮窗小窗口画中画自定义画中画界面 |
三等奖 | uniCloud | monkeyFree | 【用户端】【多行业适用】多端配置自定义官网 |
三等奖 | uniCloud | 一幅画 | 星之链社区-unicloud版 |
因很多插件值得推荐,所以增加了贡献奖的名额。
奖项设置
特等奖:
奖品:2万元插件包销 + 8888元现金红包 + 插件市场置顶推荐半个月 + HBuilderX预置 + HBuilderX超大鼠标垫 + DCloud奖牌
名额:1名
一等奖:
奖品:2万元插件包销 + 1部Apple设备(mac mini 或 ipad 2选1) + 1000元现金红包+插件市场置顶推荐半个月 + HBuilderX预置 + HBuilderX超大鼠标垫 + DCloud奖牌
名额:3名
mac mini配置为M2芯片、16G内存、256G硬盘。
ipad配置为10.9寸,256G。
其中1部ipad由支付宝提供,定向给予支持unicloud支付宝小程序云版的unicloud插件作者。
二等奖
奖品:2000元插件包销 + 极客外设1台 (HHKB 机械键盘 或 小米 34寸曲面显示器 2选1) + 500元现金红包 + 插件市场置顶推荐1个星期 + HBuilderX超大鼠标垫 + DCloud奖牌
名额:8名
三等奖
奖品:(200元uniCloud代金券 或 护眼套餐 2选1) + HBuilderX超大鼠标垫 + DCloud奖牌
名额:20名
护眼套餐包括2件奖品整包发送:
贡献奖
奖品:HBuilderX超大鼠标垫
名额:50名
注:红包需缴纳个人所得税或通过云账户发放。
“插件包销”,是指获奖插件通过插件市场销售,DCloud兜底包销。以1等奖的2万元包销为例,如果获奖插件在插件市场1年内销售额没有达到2万元,则由DCloud付差额给获奖者进行兜底。包销只针对付费插件,如免费插件获得二等奖及以上奖励,其中的包销奖励无效。
“插件包销”即不虚、也不遥远,去年插件大赛获包销奖励的插件,均提前完成包销。其价值就是实实在在的人民币。
“HBuilderX预置”,是在HBuilderX新建项目界面,可直接选择该项目模板。这为插件带来大量的流量。不适合预置的插件类型,无法领取此奖项。
除上述奖品外,
- 三等奖及以上获奖插件作者,都将进入DCloud VIP技术支持群,享受优先的技术支付、问题反馈。
- 所有获奖插件的集锦页面,还将通过HBuilderX工具、论坛、QQ微信群进行全量推广,给予优秀插件充分的曝光。
HBuilderX预置窗体界面如下:
奖牌照片如下:
历史信息
-
参赛起止时间:从23年10月24日起,到24年3月31日止。
-
鼓励的插件范围
-
uni-app x 前端插件,如ui库。现有插件可参考uvue组件
-
uts插件,扩展原生能力。现有插件可参考uts插件。除了插件市场的插件,uni-app x的源码仓库,也有大量插件源码可参考,因为uni-app x的很多组件和api就是用uts开发的,api仓库详见,组件仓库详见
-
uniCloud插件,优秀的云端一体插件。现有插件可参考云端一体项目模板
-
有助于开发者广告变现的运营类插件
-
HBuilder插件
奖品领取
请各位获奖作者尽快提交自己的邮寄地址,我们会陆续联系获奖人员发放奖品;
邮寄地址提交方式:登录ask社区,点击右上角个人头像,进入设置
界面,设置界面下方补充快递邮寄地址。
所有2选1
的奖品,插件作者可以发邮件到 service@dcloud.io,说明社区账号、获奖插件及希望选择的奖品。
已获奖的插件作者请继续升级迭代插件;
未获奖的今年还有机会,官方会继续为建设更好的uni-app x生态推出其他计划。不管是为了下次大赛获奖,还是为了把握uni-app x的新浪潮,或者在插件市场通过售卖插件变现,都是值得期待的好事。

十分钟使用vitepress+github action+gitee pages 搭建你的专属文档
介绍
VitePress 是 VuePress
的精神继承者。最初的 VuePress
基于Vue 2
和webpack
。在VitePress
内部使用了Vue 3
和Vite
,这使得VitePress在开发体验、生产性能、默认主题的精细化和更灵活的自定义API方面提供了显著的改进。本文将介绍使用VitePress
搭建uni-app路由库uni-mini-router的文档,并通过github action
实现自动化部署到github pages
与gitee pages
。
创建项目
安装
关于安装配置的问题,vitepress目前还没有稳定的版本,所以可能会有所变动,推荐还是看一下文档然后进行创建。
mkdir your-project npm init yarn add -D vitepress
安装向导
VitePress 附带一个命令行设置向导,可帮助您搭建基本项目的基架。安装后,通过运行以下命令启动向导:
npx vitepress init
您会看到几个简单的问题:
┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./docs
│
◇ Site title:
│ uni-mini-router(你的项目名称)
│
◇ Site description:
│ 一个基于vue3+typescript的uni-app路由库(你的项目介绍)
│
◇ Theme:
│ Default Theme
│
◇ Use TypeScript for config and theme files?
│ Yes
│
◇ Add VitePress npm scripts to package.json?
│ Yes
│
└ Done! Now run npm run docs:dev and start writing.
执行完本步骤后,将会向你的package.json
注入以下脚本:
{
...
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs"
},
...
}
运行
npm run docs:dev
配置
在docs/.vitepress
文件夹中有一个 config.mts 文件,我们可以在这里配置文档项目,配置项参考配置。
import { defineConfig } from 'vitepress'
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "uni-mini-router",
description: "一个基于vue3+typescript的uni-app路由库",
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
nav: [
{ text: 'Home', link: '/' },
{ text: 'Examples', link: '/markdown-examples' }
],
sidebar: [
{
text: 'Examples',
items: [
{ text: 'Markdown Examples', link: '/markdown-examples' },
{ text: 'Runtime API Examples', link: '/api-examples' }
]
}
],
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
]
}
})
部署到 Github Pages + Gitee Pages
- 修改
config
的base
- 如果要部署到 https://<USERNAME>.github.io/,则可以省略 base,因为它默认为 “/”。
- 如果您正在部署到
https://<USERNAME>.github.io/<REPO>/
,例如,您的存储库位于github.com/<REPO>/
,然后将base
设置为/<REPO>/
// 示例
import { defineConfig } from 'vitepress'
export default defineConfig({
base: "/uni-mini-router/", // 这里为仓库名
title: "uni-mini-router",
})
- 创建 Github Action 部署Github Pages并同步至Gitee Pages
Github Pages
在国内的访问速度并不理想,而Gitee
则没有类似Github Action
的功能且标准版Gitee Pages
不支持自动部署,所以我们通过Github Action 将文档部署Github Pages并同步至Gitee Pages。
在项目根目录下创建.github
文件夹,.github
中创建workflows
文件夹并创建文件deploy.yml
name: Deploy VitePress site to Pages
on:
push:
tags:
- '*'
workflow_dispatch:
jobs:
deploy-and-sync:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
ref: 'master'
- name: Install yarn
run: corepack enable
- uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'yarn'
- name: Install dependencies
run: yarn install
- name: Build Site
run: npm run docs:build
# 将文档产物提交到gh-pages分支
- name: Deploy for Gitee
uses: JamesIves/github-pages-deploy-action@v4.4.1
with:
branch: gh-pages
folder: docs/.vitepress/dist
# enable single-commit to reduce the repo size
single-commit: true
clean: true
- name: Sync to Gitee
uses: wearerequired/git-mirror-action@v1.2.0
env:
SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
with:
# GitHub 仓库地址
source-repo: git@github.com:Moonofweisheng/uni-mini-router.git
# Gitee 仓库地址
destination-repo: git@gitee.com:Moonofweisheng/uni-mini-router.git
- name: Build Gitee Pages
uses: yanglbme/gitee-pages-action@main
with:
# 替换为你的 Gitee 用户名
gitee-username: Moonofweisheng
# 注意在 Settings->Secrets 配置 GITEE_PASSWORD
gitee-password: ${{ secrets.GITEE_PASSWORD }}
# 注意替换为你的 Gitee 仓库,仓库名严格区分大小写,请准确填写,否则会出错
gitee-repo: Moonofweisheng/uni-mini-router
# 要部署的分支,默认是 master,若是其他分支,则需要指定(指定的分支必须存在)
branch: gh-pages
其中GITEE_RSA_PRIVATE_KEY
是私钥,生成步骤如下:
- 在 GitHub 项目的
Settings -> Pages
路径下配置Build and deployment
,source
选Deploy from a branch
,branch
选择gh-pages
,路径选择/root
。 - 在 Gitee 项目的
服务 -> Gitee Pages
中设置部署分支
为gh-pages
,部署目录则不用填。 - 在命令行终端或 Git Bash 使用命令 ssh-keygen 生成 SSH Key,连续三次回车。生成的 id_rsa 是私钥,id_rsa.pub 是公钥。
- 在 GitHub 项目的
Settings -> Secrets
路径下配置好命名为GITEE_RSA_PRIVATE_KEY
密钥。GITEE_RSA_PRIVATE_KEY
存放 id_rsa 私钥。 - 在 GitHub 的个人设置页面SSH and GPG keys 配置 SSH 公钥(即:id_rsa.pub),命名任意。
- 在 Gitee 的个人设置页面SSH 公钥 配置 SSH 公钥(即:id_rsa.pub),命名可任意。
- 在
GitHub
项目的Settings -> Secrets
路径下配置好命名为GITEE_RSA_PRIVATE_KEY
和GITEE_PASSWORD
的两个密钥。其中:GITEE_RSA_PRIVATE_KEY
存放 id_rsa 私钥;GITEE_PASSWORD
存放 Gitee 帐号的密码。 - 在 GitHub 项目的
Settings -> Actions -> General
路径下配置Fork pull request workflows from outside collaborators
为Require approval for first-time contributors who are new to GitHub
,将Workflow permissions
配置为Read and write permissions
。
至此我们就实现了通过Github Action
部署Github Pages
并同步至Gitee Pages
Algolia 搜索
vitepress
自带站内搜索功能有限,所以我推荐使用Algolia搜索,Algolia
提供了一套强大的搜索功能,包括全文搜索、过滤、排序、分页和高亮等。它还支持多语言搜索、拼写纠正和近义词处理,以提供更准确和相关的搜索结果。
申请 Docsearch
首先,我们打开Docsearch的申请地址,填写网站地址、邮箱和仓库地址等信息,这里注意,文档内容和代码要是开源且可以公开访问的。申请过后我们会收到三封邮件,按照指示即可完成申请。
配置文档
在文档的config
中增加themeConfig
,配置search
。
export default defineConfig({
base: "/uni-mini-router/",
title: `Uni Mini Router`,
...
themeConfig: {
search: {
provider: 'algolia',
options: {
appId: '你的appid',
apiKey: '你的APIkey,注意是搜索的key',
indexName: '你的indexName',
},
},
},
...
})
执行爬虫
我们这里使用Algolia
提供的爬虫进行爬取,访问地址,选中我们创建的index,然后点击右上角的【Restart crawling】执行。
当然即使我们不手动执行,Algolia
也会定期对我们的文档进行爬取的。
总结
通过使用VitePress
、GitHub Pages
和Gitee Pages
,以及GitHub Actions
,我们成功搭建了一个专属文档的自动化部署系统。VitePress
作为VuePress
的继任者,提供了更好的开发体验和性能表现。我们使用VitePress
创建了一个uni-app
路由库的文档,并通过GitHub Actions
实现了自动部署到GitHub Pages
和Gitee Pages
。
为了解决GitHub Pages
在国内访问速度不理想的问题,我们使用GitHub Actions
将文档部署到GitHub Pages
,并通过Gitee Pages
实现了同步部署。这样,无论用户在国内还是国外,都可以快速访问到我们的文档。
为了提供更好的搜索功能,我们申请了Algolia
的Docsearch
服务,并在配置文件中添加了搜索功能的相关配置。通过执行Algolia
提供的爬虫,我们可以定期更新文档的搜索索引,以提供准确和相关的搜索结果。
总的来说,通过使用VitePress
、GitHub Pages
和Gitee Pages
,以及GitHub Actions
和Algolia
,我们成功搭建了一个功能强大、美观专业的文档系统,为用户提供了更好的阅读和搜索体验。
链接
介绍
VitePress 是 VuePress
的精神继承者。最初的 VuePress
基于Vue 2
和webpack
。在VitePress
内部使用了Vue 3
和Vite
,这使得VitePress在开发体验、生产性能、默认主题的精细化和更灵活的自定义API方面提供了显著的改进。本文将介绍使用VitePress
搭建uni-app路由库uni-mini-router的文档,并通过github action
实现自动化部署到github pages
与gitee pages
。
创建项目
安装
关于安装配置的问题,vitepress目前还没有稳定的版本,所以可能会有所变动,推荐还是看一下文档然后进行创建。
mkdir your-project npm init yarn add -D vitepress
安装向导
VitePress 附带一个命令行设置向导,可帮助您搭建基本项目的基架。安装后,通过运行以下命令启动向导:
npx vitepress init
您会看到几个简单的问题:
┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./docs
│
◇ Site title:
│ uni-mini-router(你的项目名称)
│
◇ Site description:
│ 一个基于vue3+typescript的uni-app路由库(你的项目介绍)
│
◇ Theme:
│ Default Theme
│
◇ Use TypeScript for config and theme files?
│ Yes
│
◇ Add VitePress npm scripts to package.json?
│ Yes
│
└ Done! Now run npm run docs:dev and start writing.
执行完本步骤后,将会向你的package.json
注入以下脚本:
{
...
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs"
},
...
}
运行
npm run docs:dev
配置
在docs/.vitepress
文件夹中有一个 config.mts 文件,我们可以在这里配置文档项目,配置项参考配置。
import { defineConfig } from 'vitepress'
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "uni-mini-router",
description: "一个基于vue3+typescript的uni-app路由库",
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
nav: [
{ text: 'Home', link: '/' },
{ text: 'Examples', link: '/markdown-examples' }
],
sidebar: [
{
text: 'Examples',
items: [
{ text: 'Markdown Examples', link: '/markdown-examples' },
{ text: 'Runtime API Examples', link: '/api-examples' }
]
}
],
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
]
}
})
部署到 Github Pages + Gitee Pages
- 修改
config
的base
- 如果要部署到 https://<USERNAME>.github.io/,则可以省略 base,因为它默认为 “/”。
- 如果您正在部署到
https://<USERNAME>.github.io/<REPO>/
,例如,您的存储库位于github.com/<REPO>/
,然后将base
设置为/<REPO>/
// 示例
import { defineConfig } from 'vitepress'
export default defineConfig({
base: "/uni-mini-router/", // 这里为仓库名
title: "uni-mini-router",
})
- 创建 Github Action 部署Github Pages并同步至Gitee Pages
Github Pages
在国内的访问速度并不理想,而Gitee
则没有类似Github Action
的功能且标准版Gitee Pages
不支持自动部署,所以我们通过Github Action 将文档部署Github Pages并同步至Gitee Pages。
在项目根目录下创建.github
文件夹,.github
中创建workflows
文件夹并创建文件deploy.yml
name: Deploy VitePress site to Pages
on:
push:
tags:
- '*'
workflow_dispatch:
jobs:
deploy-and-sync:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
ref: 'master'
- name: Install yarn
run: corepack enable
- uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'yarn'
- name: Install dependencies
run: yarn install
- name: Build Site
run: npm run docs:build
# 将文档产物提交到gh-pages分支
- name: Deploy for Gitee
uses: JamesIves/github-pages-deploy-action@v4.4.1
with:
branch: gh-pages
folder: docs/.vitepress/dist
# enable single-commit to reduce the repo size
single-commit: true
clean: true
- name: Sync to Gitee
uses: wearerequired/git-mirror-action@v1.2.0
env:
SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
with:
# GitHub 仓库地址
source-repo: git@github.com:Moonofweisheng/uni-mini-router.git
# Gitee 仓库地址
destination-repo: git@gitee.com:Moonofweisheng/uni-mini-router.git
- name: Build Gitee Pages
uses: yanglbme/gitee-pages-action@main
with:
# 替换为你的 Gitee 用户名
gitee-username: Moonofweisheng
# 注意在 Settings->Secrets 配置 GITEE_PASSWORD
gitee-password: ${{ secrets.GITEE_PASSWORD }}
# 注意替换为你的 Gitee 仓库,仓库名严格区分大小写,请准确填写,否则会出错
gitee-repo: Moonofweisheng/uni-mini-router
# 要部署的分支,默认是 master,若是其他分支,则需要指定(指定的分支必须存在)
branch: gh-pages
其中GITEE_RSA_PRIVATE_KEY
是私钥,生成步骤如下:
- 在 GitHub 项目的
Settings -> Pages
路径下配置Build and deployment
,source
选Deploy from a branch
,branch
选择gh-pages
,路径选择/root
。 - 在 Gitee 项目的
服务 -> Gitee Pages
中设置部署分支
为gh-pages
,部署目录则不用填。 - 在命令行终端或 Git Bash 使用命令 ssh-keygen 生成 SSH Key,连续三次回车。生成的 id_rsa 是私钥,id_rsa.pub 是公钥。
- 在 GitHub 项目的
Settings -> Secrets
路径下配置好命名为GITEE_RSA_PRIVATE_KEY
密钥。GITEE_RSA_PRIVATE_KEY
存放 id_rsa 私钥。 - 在 GitHub 的个人设置页面SSH and GPG keys 配置 SSH 公钥(即:id_rsa.pub),命名任意。
- 在 Gitee 的个人设置页面SSH 公钥 配置 SSH 公钥(即:id_rsa.pub),命名可任意。
- 在
GitHub
项目的Settings -> Secrets
路径下配置好命名为GITEE_RSA_PRIVATE_KEY
和GITEE_PASSWORD
的两个密钥。其中:GITEE_RSA_PRIVATE_KEY
存放 id_rsa 私钥;GITEE_PASSWORD
存放 Gitee 帐号的密码。 - 在 GitHub 项目的
Settings -> Actions -> General
路径下配置Fork pull request workflows from outside collaborators
为Require approval for first-time contributors who are new to GitHub
,将Workflow permissions
配置为Read and write permissions
。
至此我们就实现了通过Github Action
部署Github Pages
并同步至Gitee Pages
Algolia 搜索
vitepress
自带站内搜索功能有限,所以我推荐使用Algolia搜索,Algolia
提供了一套强大的搜索功能,包括全文搜索、过滤、排序、分页和高亮等。它还支持多语言搜索、拼写纠正和近义词处理,以提供更准确和相关的搜索结果。
申请 Docsearch
首先,我们打开Docsearch的申请地址,填写网站地址、邮箱和仓库地址等信息,这里注意,文档内容和代码要是开源且可以公开访问的。申请过后我们会收到三封邮件,按照指示即可完成申请。
配置文档
在文档的config
中增加themeConfig
,配置search
。
export default defineConfig({
base: "/uni-mini-router/",
title: `Uni Mini Router`,
...
themeConfig: {
search: {
provider: 'algolia',
options: {
appId: '你的appid',
apiKey: '你的APIkey,注意是搜索的key',
indexName: '你的indexName',
},
},
},
...
})
执行爬虫
我们这里使用Algolia
提供的爬虫进行爬取,访问地址,选中我们创建的index,然后点击右上角的【Restart crawling】执行。
当然即使我们不手动执行,Algolia
也会定期对我们的文档进行爬取的。
总结
通过使用VitePress
、GitHub Pages
和Gitee Pages
,以及GitHub Actions
,我们成功搭建了一个专属文档的自动化部署系统。VitePress
作为VuePress
的继任者,提供了更好的开发体验和性能表现。我们使用VitePress
创建了一个uni-app
路由库的文档,并通过GitHub Actions
实现了自动部署到GitHub Pages
和Gitee Pages
。
为了解决GitHub Pages
在国内访问速度不理想的问题,我们使用GitHub Actions
将文档部署到GitHub Pages
,并通过Gitee Pages
实现了同步部署。这样,无论用户在国内还是国外,都可以快速访问到我们的文档。
为了提供更好的搜索功能,我们申请了Algolia
的Docsearch
服务,并在配置文件中添加了搜索功能的相关配置。通过执行Algolia
提供的爬虫,我们可以定期更新文档的搜索索引,以提供准确和相关的搜索结果。
总的来说,通过使用VitePress
、GitHub Pages
和Gitee Pages
,以及GitHub Actions
和Algolia
,我们成功搭建了一个功能强大、美观专业的文档系统,为用户提供了更好的阅读和搜索体验。
链接
收起阅读 »
APP备案公钥、证书MD5指纹/签名MD5值获取最简单方法
本文只详细讲解android app获取方法,三个平台获取方法(android、windows、macOS):
一. Android手机平台:前提,您的应用已安装到手机;然后,android应用市场搜索下载安装 APP备案助手,此app可直接获取所有已安装app的公钥、证书MD5指纹/签名MD5值,示例:获取 抖音app公钥、MD5等信息,
APP备案助手 获取结果,与下面两种方式获取结果一致;
二. Windows平台,下载jadx-gui反编译工具,github下载地址: https://github.com/skylot/jadx/releases
下载上图这个zip,然后解压后,打开 jadx-gui.exe,
点击 Open file/打开文件,打开apk安装包文件,
点击APK signature, Modulus/模数 为公钥,十进制显示的;MD5 Fingerprint/MD5签名,APP备案填写时需要去掉空格,填写32位长度的十六进制数据。
三. macOS平台,下载jadx-gui反编译工具,下载方法
终端执行 brew install jadx
执行完毕后,终端再输入命令 jadx-gui,即可打开jadx,
点击 Open file/打开文件,打开apk安装包文件,
点击APK signature, Modulus/模数 为公钥,十进制显示的;MD5 Fingerprint/MD5签名,APP备案填写时需要去掉空格,填写32位长度的十六进制数据。
本文只详细讲解android app获取方法,三个平台获取方法(android、windows、macOS):
一. Android手机平台:前提,您的应用已安装到手机;然后,android应用市场搜索下载安装 APP备案助手,此app可直接获取所有已安装app的公钥、证书MD5指纹/签名MD5值,示例:获取 抖音app公钥、MD5等信息,
APP备案助手 获取结果,与下面两种方式获取结果一致;
二. Windows平台,下载jadx-gui反编译工具,github下载地址: https://github.com/skylot/jadx/releases
下载上图这个zip,然后解压后,打开 jadx-gui.exe,
点击 Open file/打开文件,打开apk安装包文件,
点击APK signature, Modulus/模数 为公钥,十进制显示的;MD5 Fingerprint/MD5签名,APP备案填写时需要去掉空格,填写32位长度的十六进制数据。
三. macOS平台,下载jadx-gui反编译工具,下载方法
终端执行 brew install jadx
执行完毕后,终端再输入命令 jadx-gui,即可打开jadx,
点击 Open file/打开文件,打开apk安装包文件,
点击APK signature, Modulus/模数 为公钥,十进制显示的;MD5 Fingerprint/MD5签名,APP备案填写时需要去掉空格,填写32位长度的十六进制数据。
收起阅读 »
解决JSON.parse大数字转换精度丢失问题
因为js语言问题,数字大于16位后,会丢失16位以后的数字:比如声明 let n = 1234567890123456789;打印n之后会显示1234567890123456800;
同理JSON.parse将json字符串转为Object时,如果其中有大数字的值,也会发生精度丢失问题。
使用uni.request或uniCloud.httpclient.request 接收远程api返回数据时,如果返回数据里有大数字,并且直接设置了返回数据类型为json的话,则不能正常接收大数字。
此时就需要先接收为纯文本,也就是dataType = "text",再通过脚本匹配大数字后,给其加上字符串的引号,再进行JSON.parse的转换。这样就能正确接收大数字值了。
下面是转换函数实现:
// 解决大数字转换丢失问题
function jsonParse(text) {
text = text.replace(/([^"'\d])(\d{16,})/g, "$1\"$2\"")
return JSON.parse(text);
}
因为js语言问题,数字大于16位后,会丢失16位以后的数字:比如声明 let n = 1234567890123456789;打印n之后会显示1234567890123456800;
同理JSON.parse将json字符串转为Object时,如果其中有大数字的值,也会发生精度丢失问题。
使用uni.request或uniCloud.httpclient.request 接收远程api返回数据时,如果返回数据里有大数字,并且直接设置了返回数据类型为json的话,则不能正常接收大数字。
此时就需要先接收为纯文本,也就是dataType = "text",再通过脚本匹配大数字后,给其加上字符串的引号,再进行JSON.parse的转换。这样就能正确接收大数字值了。
下面是转换函数实现:
// 解决大数字转换丢失问题
function jsonParse(text) {
text = text.replace(/([^"'\d])(\d{16,})/g, "$1\"$2\"")
return JSON.parse(text);
}
收起阅读 »

Vue3高颜值组件库 Wot Design Uni 组件数量超过70了!
前言
九月份我们发布了 Wot Design Uni
的第一个版本,如今组件库的组件数量已超过60!
最近一个月我们做了什么
- WaterMark 水印
- Swiper 轮播
- Circle 环形进度条
- Segmented 分段控制器
- Tabbar 标签栏
- Navbar 导航条
接下来要做什么
- Sidebar 侧边栏
- Fab 悬浮按钮
- CountDown 倒计时
- NumberKeyboard 数字键盘
- PasswordInput 密码输入框
- Form 表单
- Table 表格
- Signature 签名
组件库介绍
非常感谢朋友们对我的支持和帮助,让组件库稳步的发展,关于组件库的特性和使用,可以参考本章节的内容。
<p align="center">
<a href="https://github.com/Moonofweisheng/wot-design-uni">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Moonofweisheng/wot-design-uni?logo=github&color=%234d80f0&link=https%3A%2F%2Fgithub.com%2FMoonofweisheng%2Fwot-design-uni">
</a>
<a href="https://www.npmjs.com/package/wot-design-uni">
<img alt="npm" src="https://img.shields.io/npm/v/wot-design-uni?logo=npm&color=%234d80f0&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
</a>
<a href="https://www.npmjs.com/package/wot-design-uni">
<img alt="npm" src="https://img.shields.io/npm/dw/wot-design-uni?logo=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
</a>
<a href="https://www.npmjs.com/package/wot-design-uni">
<img src="https://img.shields.io/npm/dt/wot-design-uni?style=flat-square">
</a>
<a href="https://github.com/Moonofweisheng/wot-design-uni">
<img alt="GitHub" src="https://img.shields.io/github/license/Moonofweisheng/wot-design-uni?logo=github">
</a>
<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
<img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" />
</a>
</p>
<p align="center">
<a href="https://wot-design-uni.cn/">文档网站 (官网)</a>
<a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>
</p>
✨ 特性
- 支持 APP、H5、微信小程序 等平台.
- 70+ 个高质量组件,覆盖移动端主流场景.
- 使用 Typescript 构建,提供良好的组件类型系统.
- 采用 Vue3 最新特性,提升组件性能.
- 提供丰富的文档和组件示例.
- 支持主题定制,可以定制 scss 变量以及组件的样式自定义.
- 支持暗黑模式
预览
扫描二维码访问演示:
<p>
<img src="https://wot-design-uni.cn/wx.jpg" width="200" height="200" style="margin-right:30px"/>
<img src="https://wot-design-uni.cn/alipay.png" width="200" height="200" />
</p>
快速上手
详细说明见 快速上手。
链接
贡献指南
修改代码请阅读我们的 贡献指南。
使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR。
贡献者们
感谢以下所有给 Wot Design Uni 贡献过代码的 开发者。
<a href="https://github.com/Moonofweisheng/wot-design-uni/graphs/contributors">
<img src="https://contrib.rocks/image?repo=Moonofweisheng/wot-design-uni" />
</a>
LICENSE
前言
九月份我们发布了 Wot Design Uni
的第一个版本,如今组件库的组件数量已超过60!
最近一个月我们做了什么
- WaterMark 水印
- Swiper 轮播
- Circle 环形进度条
- Segmented 分段控制器
- Tabbar 标签栏
- Navbar 导航条
接下来要做什么
- Sidebar 侧边栏
- Fab 悬浮按钮
- CountDown 倒计时
- NumberKeyboard 数字键盘
- PasswordInput 密码输入框
- Form 表单
- Table 表格
- Signature 签名
组件库介绍
非常感谢朋友们对我的支持和帮助,让组件库稳步的发展,关于组件库的特性和使用,可以参考本章节的内容。
<p align="center">
<a href="https://github.com/Moonofweisheng/wot-design-uni">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Moonofweisheng/wot-design-uni?logo=github&color=%234d80f0&link=https%3A%2F%2Fgithub.com%2FMoonofweisheng%2Fwot-design-uni">
</a>
<a href="https://www.npmjs.com/package/wot-design-uni">
<img alt="npm" src="https://img.shields.io/npm/v/wot-design-uni?logo=npm&color=%234d80f0&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
</a>
<a href="https://www.npmjs.com/package/wot-design-uni">
<img alt="npm" src="https://img.shields.io/npm/dw/wot-design-uni?logo=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
</a>
<a href="https://www.npmjs.com/package/wot-design-uni">
<img src="https://img.shields.io/npm/dt/wot-design-uni?style=flat-square">
</a>
<a href="https://github.com/Moonofweisheng/wot-design-uni">
<img alt="GitHub" src="https://img.shields.io/github/license/Moonofweisheng/wot-design-uni?logo=github">
</a>
<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
<img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" />
</a>
</p>
<p align="center">
<a href="https://wot-design-uni.cn/">文档网站 (官网)</a>
<a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>
</p>
✨ 特性
- 支持 APP、H5、微信小程序 等平台.
- 70+ 个高质量组件,覆盖移动端主流场景.
- 使用 Typescript 构建,提供良好的组件类型系统.
- 采用 Vue3 最新特性,提升组件性能.
- 提供丰富的文档和组件示例.
- 支持主题定制,可以定制 scss 变量以及组件的样式自定义.
- 支持暗黑模式
预览
扫描二维码访问演示:
<p>
<img src="https://wot-design-uni.cn/wx.jpg" width="200" height="200" style="margin-right:30px"/>
<img src="https://wot-design-uni.cn/alipay.png" width="200" height="200" />
</p>
快速上手
详细说明见 快速上手。
链接
贡献指南
修改代码请阅读我们的 贡献指南。
使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR。
贡献者们
感谢以下所有给 Wot Design Uni 贡献过代码的 开发者。
<a href="https://github.com/Moonofweisheng/wot-design-uni/graphs/contributors">
<img src="https://contrib.rocks/image?repo=Moonofweisheng/wot-design-uni" />
</a>
LICENSE
收起阅读 »
uniapp 电子签名 包含 返回 撤回 颜色 线条等功能
请观看
使用教程
第一步 引入图标
在项目中的App.vue内添加下面代码
<style>
/*引入图标路径 */
@import 'uni_modules/TC-qianming/libs/css/iconfont.css';
</style>
第二步 引入组件即可
<template>
<view>
<TC-qianming></TC-qianming>
</view>
</template>
提需求 问题反馈 联系作者 V:ANKR6699
有什么不足之处所以留言提出,我将更新和更改
公众号也望大家关注一下

24小时在线接单(或全职)本人开发过多个uniapp项目(各种类型业务小程序和h5) 完美还原设计稿
- 精通react ,vue
- 熟悉各种类型业务
- 完美还原设计稿UI图
- 有大量时间
微信: h877488642
- 精通react ,vue
- 熟悉各种类型业务
- 完美还原设计稿UI图
- 有大量时间
微信: h877488642

违法与不良信息信息举报
为了进一步落实网信办各专项行动要求,营造良好网上舆论氛围,即日起开设「违法与不良信息信息举报」专项受理渠道。
- 「清朗·生活服务类平台信息内容整治」专项行动
- 「清朗·打击网络谣言和虚假信息」专项行动
- 「清朗·规范重点流量环节网络传播秩序」专项行动
另外如果您发现用户发布的内容、用户昵称等存在违法、违规或其它不良信息,也可通过下述方式向DCloud官方进行举报。
举报受理方式
举报邮箱:service@dcloud.io
为了进一步落实网信办各专项行动要求,营造良好网上舆论氛围,即日起开设「违法与不良信息信息举报」专项受理渠道。
- 「清朗·生活服务类平台信息内容整治」专项行动
- 「清朗·打击网络谣言和虚假信息」专项行动
- 「清朗·规范重点流量环节网络传播秩序」专项行动
另外如果您发现用户发布的内容、用户昵称等存在违法、违规或其它不良信息,也可通过下述方式向DCloud官方进行举报。
举报受理方式
举报邮箱:service@dcloud.io