介绍

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

1. 修改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",  
})

1. 创建 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是私钥，生成步骤如下：

1. 在 GitHub 项目的​Settings -> Pages路径下配置Build and deployment，source选Deploy from a branch，branch选择gh-pages，路径选择/root。
2. 在 Gitee 项目的服务 -> Gitee Pages中设置部署分支为gh-pages，部署目录则不用填。
3. 在命令行终端或 Git Bash 使用命令 ssh-keygen 生成 SSH Key，连续三次回车。生成的 id_rsa 是私钥，id_rsa.pub 是公钥。
4. 在 GitHub 项目的​Settings -> Secrets路径下配置好命名为 GITEE_RSA_PRIVATE_KEY 密钥。GITEE_RSA_PRIVATE_KEY 存放 id_rsa 私钥。
5. 在 GitHub 的个人设置页面SSH and GPG keys​ 配置 SSH 公钥（即：id_rsa.pub），命名任意。
6. 在 Gitee 的个人设置页面SSH 公钥​ 配置 SSH 公钥（即：id_rsa.pub），命名可任意。
7. 在 GitHub 项目的 ​Settings -> Secrets 路径下配置好命名为 GITEE_RSA_PRIVATE_KEY 和 GITEE_PASSWORD 的两个密钥。其中：GITEE_RSA_PRIVATE_KEY 存放 id_rsa 私钥；GITEE_PASSWORD 存放 Gitee 帐号的密码。
8. 在 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，我们成功搭建了一个功能强大、美观专业的文档系统，为用户提供了更好的阅读和搜索体验。

链接

• 高颜值vue3组件库 Wot Design Uni
• 基于Vue3 + Typescript的uni-app路由库

人数迟迟未达到，有没有互的，召集知己

本文只详细讲解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位长度的十六进制数据。

因为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);  
}

前言

九月份我们发布了 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>

快速上手

详细说明见 快速上手。

链接

• 意见反馈
• 更新日志
• 常见问题
• Discussions 讨论区
• QQ 群

贡献指南

修改代码请阅读我们的 贡献指南。

使用过程中发现任何问题都可以提 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

MIT

请观看

使用教程
第一步 引入图标
在项目中的App.vue内添加下面代码

<style>  
    /*引入图标路径 */  
    @import 'uni_modules/TC-qianming/libs/css/iconfont.css';  
</style>

第二步 引入组件即可

<template>  
    <view>  
   <TC-qianming></TC-qianming>  
    </view>  
</template>

下载链接（点击）

提需求 问题反馈 联系作者 V：ANKR6699
有什么不足之处所以留言提出，我将更新和更改

公众号也望大家关注一下

1. 精通react ,vue
2. 熟悉各种类型业务
3. 完美还原设计稿UI图
4. 有大量时间

微信: h877488642

文档 - https://vitesse-docs.netlify.app
GitHub - http://github.com/uni-helper
官网 - https://uni-helper.js.org

为了进一步落实网信办各专项行动要求，营造良好网上舆论氛围，即日起开设「违法与不良信息信息举报」专项受理渠道。

• 「清朗·生活服务类平台信息内容整治」专项行动
• 「清朗·打击网络谣言和虚假信息」专项行动
• 「清朗·规范重点流量环节网络传播秩序」专项行动

另外如果您发现用户发布的内容、用户昵称等存在违法、违规或其它不良信息，也可通过下述方式向DCloud官方进行举报。

举报受理方式
举报邮箱：service@dcloud.io

Navbar 导航栏

为页面提供导航功能，常用于页面顶部。

地址

Github
文档网站
插件市场
QQ群

先看交互效果

:: tip 常见问题

右图标被小程序胶囊挡住？

在小程序平台开启自定义顶部导航时，右上角会固定显示胶囊，所以此时右侧插槽及选项是不建议使用。

如何设置为背景透明？

通过 custom-style 设置组件 background-color 为 transparent。

<wd-navbar title="标题" custom-style="background-color: transparent !important;"></wd-navbar>

组件会被 video 覆盖？

基础用法

通过 title 属性设置导航栏标题。

<wd-navbar title="标题"></wd-navbar>

返回上级

在导航栏实现返回上级功能。

<wd-navbar title="标题" left-text="返回" left-arrow @click-left="handleClickLeft"></wd-navbar>

function handleClickLeft() {  
  uni.navigateBack()  
}

右侧按钮

在导航栏右侧添加可点击的按钮。

<wd-toast></wd-toast>  

<wd-navbar title="标题" left-text="返回" left-arrow right-text="按钮" @click-left="handleClickLeft" @click-right="handleClickRight"></wd-navbar>

import { useToast } from '@/uni_modules/wot-design-uni'  

const { show: showToast } = useToast()  

function handleClickRight() {  
  showToast('按钮')  
}

使用插槽

可以通过 left 和 right 插槽自定义导航栏两侧的内容。

<wd-navbar title="标题" left-text="返回" left-arrow>  
  <template #right>  
    <wd-icon name="search" size="18" />  
  </template>  
</wd-navbar>

固定在顶部

通过 fixed 可以设置导航条固定在页面顶部，通过设置 placeholder 可以在顶部生成占位空间，通过设置 safeAreaInsetTop 可以开启顶部安全区的适配。

<wd-navbar fixed placeholder title="Navbar 导航条" left-arrow safeAreaInsetTop></wd-navbar>  

禁用按钮

通过 left-disabled 或 right-disabled 属性来禁用两侧的按钮。按钮被禁用时透明度降低，且无法点击。

<wd-navbar title="标题" left-text="返回" right-text="按钮" left-arrow left-disabled right-disabled></wd-navbar>

胶囊样式

通过 capsule 插槽和 navbar-capsule 组件定制返回胶囊。

<wd-navbar title="标题" left-text="返回" right-text="设置" left-arrow>  
  <template #capsule>  
    <wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />  
  </template>  
</wd-navbar>

function handleBack() {  
  uni.navigateBack({})  
}  

function handleBackHome() {  
  uni.reLaunch({ url: '/pages/index/Index' })  
}

带搜索栏

通过 title 插槽，自定义标题。

<wd-navbar left-text="返回" right-text="设置" left-arrow>  
  <template #title>  
    <view class="search-box">  
      <wd-search v-model="keyword" hide-cancel placeholder-left></wd-search>  
    </view>  
  </template>  
</wd-navbar>

.search-box {  
  display: flex;  
  height: 100%;  
  align-items: center;  
  --wot-search-padding: 0;  
  --wot-search-side-padding: 0;  
}

Attributes

Events

Capsule Events

Slot

外部样式类

地址

Github
文档网站
插件市场
QQ群

一个盒子里面有一个image，image右侧会出现一个2像素的白边这是啥问题

问题：使用v-html渲染html字符串时，html字符串内容过多且html内容渲染出来后超出可视区域

1. 在H5和app中解决方案
   在h5中可使用canvas是绘制生成图片实现，app是通过缩放实现，为了适配不同机型需要动态计算一个缩放比，且缩放原点为style="transform-origin: top left;
   • 下载 npm install html2canvas
   • 在渲染html的页面引入html2canvas

import html2canvas from 'html2canvas'

• 在template中编写

    <!-- #ifdef APP-PLUS -->  
    <view v-if="!ratioX" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>  
    <!-- #endif -->  
    <!-- #ifdef H5 -->  
    <view v-if="!pdfImage" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>  
    <!-- #endif -->  
    <scroll-view scroll-y="true" scroll-with-animation="true" style="width: 100%; height: 100%; margin-top: 10rpx;">  
        <!-- #ifdef APP-PLUS -->  
        <view v-html="html" style="transform-origin: top left;" :style="{ 'transform': `scale(${ratioX})` }"></view>  
        <!-- #endif -->  
        <!-- #ifdef H5 -->  
        <img style="width: 100%; height: auto;" v-if="pdfImage" :src="pdfImage" alt="Rendered PDF"></img>  
        <!-- #endif -->  
    </scroll-view>

• 在data() {},中定义

    data() {  
            return {  
                html: null,  
                pdfImage: null,  
                ratioX: null,  
            };  
        },

• 重点：通过接口获得html字符串并且生成图片

  async onLoad(option) {  
            await this.getPrictOrder()  
        await this.$nextTick()  
       setTimeout(async () => {  
           // #ifdef H5  
       await this.convertToPDF()  
      // #endif  
      // #ifdef APP-PLUS  
      await this.toGetContentToConvert()  
      // #endif  
      }, 0)                                                                                                                                                     
  }         
  methods: {  
                    //计算ratioX，缩放比  
          toGetContentToConvert() {  
              let winInfo = uni.getSystemInfoSync();  
              const query = uni.createSelectorQuery().in(this);  
              query.select('#contentToConvert').boundingClientRect(data => {  
                  if (data.width === 0) {  
                      this.toGetContentToConvert()  
                      return  
                  }  
                  this.ratioX = winInfo.windowWidth / data.width  
              }).exec();  
          },  
          convertToPDF() {  
              return new Promise((resolve) => {  
                  setTimeout(() => {  
                      // #capture 就是我们要获取截图对应的 DOM 元素选择器  
                      html2canvas(document.getElementById('contentToConvert'), {  
                          useCORS: true, // 【重要】开启跨域配置  
                          allowTaint: true, // 允许跨域图片  
                      }).then((canvas) => {  
                          this.pdfImage = canvas.toDataURL('image/jpeg');  
                      });  
                      uni.hideLoading()  
                  }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成  
              });  
          },  
  }