From b1f42af640a32d8c9119331a19fe0495a908b16c Mon Sep 17 00:00:00 2001 From: Moonofweisheng <1780903673@qq.com> Date: Sat, 14 Dec 2024 13:49:11 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E6=BC=94=E7=A4=BAdemo=E6=94=AF=E6=8C=81=E5=9C=A8?= =?UTF-8?q?=E9=A1=B6=E9=83=A8=E6=98=BE=E7=A4=BA=E5=AF=B9=E5=BA=94=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=BE=AE=E4=BF=A1=E5=B0=8F=E7=A8=8B=E5=BA=8F=E7=9A=84?= =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/qrcode.js | 119 ++++++++++++++++++ docs/.vitepress/theme/components/QrCode.vue | 48 +++++++ docs/.vitepress/theme/components/VPIframe.vue | 34 +++-- docs/public/wxqrcode/action-sheet.png | Bin 0 -> 91631 bytes docs/public/wxqrcode/backtop.png | Bin 0 -> 90916 bytes docs/public/wxqrcode/badge.png | Bin 0 -> 94103 bytes docs/public/wxqrcode/button.png | Bin 0 -> 94172 bytes docs/public/wxqrcode/calendar-view.png | Bin 0 -> 92626 bytes docs/public/wxqrcode/calendar.png | Bin 0 -> 89733 bytes docs/public/wxqrcode/card.png | Bin 0 -> 95176 bytes docs/public/wxqrcode/cell.png | Bin 0 -> 93825 bytes docs/public/wxqrcode/checkbox.png | Bin 0 -> 91768 bytes docs/public/wxqrcode/circle.png | Bin 0 -> 95651 bytes docs/public/wxqrcode/col-picker.png | Bin 0 -> 90351 bytes docs/public/wxqrcode/collapse.png | Bin 0 -> 93677 bytes docs/public/wxqrcode/config-provider.png | Bin 0 -> 92715 bytes docs/public/wxqrcode/count-down.png | Bin 0 -> 89624 bytes docs/public/wxqrcode/count-to.png | Bin 0 -> 94133 bytes docs/public/wxqrcode/curtain.png | Bin 0 -> 93742 bytes docs/public/wxqrcode/datetime-picker-view.png | Bin 0 -> 91602 bytes docs/public/wxqrcode/datetime-picker.png | Bin 0 -> 93649 bytes docs/public/wxqrcode/divider.png | Bin 0 -> 92340 bytes docs/public/wxqrcode/drop-menu.png | Bin 0 -> 90611 bytes docs/public/wxqrcode/fab.png | Bin 0 -> 92840 bytes docs/public/wxqrcode/floating-panel.png | Bin 0 -> 92841 bytes docs/public/wxqrcode/form.png | Bin 0 -> 92511 bytes docs/public/wxqrcode/gap.png | Bin 0 -> 92947 bytes docs/public/wxqrcode/grid.png | Bin 0 -> 91854 bytes docs/public/wxqrcode/icon.png | Bin 0 -> 93218 bytes docs/public/wxqrcode/img-cropper.png | Bin 0 -> 91866 bytes docs/public/wxqrcode/img.png | Bin 0 -> 92837 bytes docs/public/wxqrcode/index-bar.png | Bin 0 -> 89654 bytes docs/public/wxqrcode/index.png | Bin 0 -> 89932 bytes docs/public/wxqrcode/input-number.png | Bin 0 -> 90312 bytes docs/public/wxqrcode/input.png | Bin 0 -> 91451 bytes docs/public/wxqrcode/keyboard.png | Bin 0 -> 90228 bytes docs/public/wxqrcode/layout.png | Bin 0 -> 92264 bytes docs/public/wxqrcode/loading.png | Bin 0 -> 94135 bytes docs/public/wxqrcode/loadmore.png | Bin 0 -> 93899 bytes docs/public/wxqrcode/message-box.png | Bin 0 -> 91320 bytes docs/public/wxqrcode/navbar.png | Bin 0 -> 94888 bytes docs/public/wxqrcode/notice-bar.png | Bin 0 -> 92116 bytes docs/public/wxqrcode/notify.png | Bin 0 -> 93491 bytes docs/public/wxqrcode/number-keyboard.png | Bin 0 -> 94323 bytes docs/public/wxqrcode/overlay.png | Bin 0 -> 89707 bytes docs/public/wxqrcode/pagination.png | Bin 0 -> 91253 bytes docs/public/wxqrcode/password-input.png | Bin 0 -> 95176 bytes docs/public/wxqrcode/picker-view.png | Bin 0 -> 91705 bytes docs/public/wxqrcode/picker.png | Bin 0 -> 90888 bytes docs/public/wxqrcode/popover.png | Bin 0 -> 91946 bytes docs/public/wxqrcode/popup.png | Bin 0 -> 91262 bytes docs/public/wxqrcode/progress.png | Bin 0 -> 93275 bytes docs/public/wxqrcode/radio.png | Bin 0 -> 90671 bytes docs/public/wxqrcode/rate.png | Bin 0 -> 94319 bytes docs/public/wxqrcode/resize.png | Bin 0 -> 91980 bytes docs/public/wxqrcode/search.png | Bin 0 -> 92135 bytes docs/public/wxqrcode/segmented.png | Bin 0 -> 93607 bytes docs/public/wxqrcode/select-picker.png | Bin 0 -> 92966 bytes docs/public/wxqrcode/sidebar.png | Bin 0 -> 91282 bytes docs/public/wxqrcode/skeleton.png | Bin 0 -> 92505 bytes docs/public/wxqrcode/slider.png | Bin 0 -> 92360 bytes docs/public/wxqrcode/sort-button.png | Bin 0 -> 90660 bytes docs/public/wxqrcode/status-tip.png | Bin 0 -> 92763 bytes docs/public/wxqrcode/steps.png | Bin 0 -> 95643 bytes docs/public/wxqrcode/sticky.png | Bin 0 -> 89962 bytes docs/public/wxqrcode/swipe-action.png | Bin 0 -> 89196 bytes docs/public/wxqrcode/swiper.png | Bin 0 -> 91897 bytes docs/public/wxqrcode/switch.png | Bin 0 -> 93362 bytes docs/public/wxqrcode/tabbar.png | Bin 0 -> 92861 bytes docs/public/wxqrcode/table.png | Bin 0 -> 92117 bytes docs/public/wxqrcode/tabs.png | Bin 0 -> 94040 bytes docs/public/wxqrcode/tag.png | Bin 0 -> 94178 bytes docs/public/wxqrcode/text.png | Bin 0 -> 94214 bytes docs/public/wxqrcode/textarea.png | Bin 0 -> 96796 bytes docs/public/wxqrcode/toast.png | Bin 0 -> 92895 bytes docs/public/wxqrcode/tooltip.png | Bin 0 -> 92964 bytes docs/public/wxqrcode/transition.png | Bin 0 -> 91652 bytes docs/public/wxqrcode/upload.png | Bin 0 -> 89576 bytes docs/public/wxqrcode/watermark.png | Bin 0 -> 95236 bytes docs/public/wxqrcode/wx-reward-ad.png | Bin 0 -> 91722 bytes package.json | 5 +- pnpm-lock.yaml | 52 +++++++- src/components/page-wraper/page-wraper.vue | 11 +- 83 files changed, 253 insertions(+), 16 deletions(-) create mode 100644 build/qrcode.js create mode 100644 docs/.vitepress/theme/components/QrCode.vue create mode 100644 docs/public/wxqrcode/action-sheet.png create mode 100644 docs/public/wxqrcode/backtop.png create mode 100644 docs/public/wxqrcode/badge.png create mode 100644 docs/public/wxqrcode/button.png create mode 100644 docs/public/wxqrcode/calendar-view.png create mode 100644 docs/public/wxqrcode/calendar.png create mode 100644 docs/public/wxqrcode/card.png create mode 100644 docs/public/wxqrcode/cell.png create mode 100644 docs/public/wxqrcode/checkbox.png create mode 100644 docs/public/wxqrcode/circle.png create mode 100644 docs/public/wxqrcode/col-picker.png create mode 100644 docs/public/wxqrcode/collapse.png create mode 100644 docs/public/wxqrcode/config-provider.png create mode 100644 docs/public/wxqrcode/count-down.png create mode 100644 docs/public/wxqrcode/count-to.png create mode 100644 docs/public/wxqrcode/curtain.png create mode 100644 docs/public/wxqrcode/datetime-picker-view.png create mode 100644 docs/public/wxqrcode/datetime-picker.png create mode 100644 docs/public/wxqrcode/divider.png create mode 100644 docs/public/wxqrcode/drop-menu.png create mode 100644 docs/public/wxqrcode/fab.png create mode 100644 docs/public/wxqrcode/floating-panel.png create mode 100644 docs/public/wxqrcode/form.png create mode 100644 docs/public/wxqrcode/gap.png create mode 100644 docs/public/wxqrcode/grid.png create mode 100644 docs/public/wxqrcode/icon.png create mode 100644 docs/public/wxqrcode/img-cropper.png create mode 100644 docs/public/wxqrcode/img.png create mode 100644 docs/public/wxqrcode/index-bar.png create mode 100644 docs/public/wxqrcode/index.png create mode 100644 docs/public/wxqrcode/input-number.png create mode 100644 docs/public/wxqrcode/input.png create mode 100644 docs/public/wxqrcode/keyboard.png create mode 100644 docs/public/wxqrcode/layout.png create mode 100644 docs/public/wxqrcode/loading.png create mode 100644 docs/public/wxqrcode/loadmore.png create mode 100644 docs/public/wxqrcode/message-box.png create mode 100644 docs/public/wxqrcode/navbar.png create mode 100644 docs/public/wxqrcode/notice-bar.png create mode 100644 docs/public/wxqrcode/notify.png create mode 100644 docs/public/wxqrcode/number-keyboard.png create mode 100644 docs/public/wxqrcode/overlay.png create mode 100644 docs/public/wxqrcode/pagination.png create mode 100644 docs/public/wxqrcode/password-input.png create mode 100644 docs/public/wxqrcode/picker-view.png create mode 100644 docs/public/wxqrcode/picker.png create mode 100644 docs/public/wxqrcode/popover.png create mode 100644 docs/public/wxqrcode/popup.png create mode 100644 docs/public/wxqrcode/progress.png create mode 100644 docs/public/wxqrcode/radio.png create mode 100644 docs/public/wxqrcode/rate.png create mode 100644 docs/public/wxqrcode/resize.png create mode 100644 docs/public/wxqrcode/search.png create mode 100644 docs/public/wxqrcode/segmented.png create mode 100644 docs/public/wxqrcode/select-picker.png create mode 100644 docs/public/wxqrcode/sidebar.png create mode 100644 docs/public/wxqrcode/skeleton.png create mode 100644 docs/public/wxqrcode/slider.png create mode 100644 docs/public/wxqrcode/sort-button.png create mode 100644 docs/public/wxqrcode/status-tip.png create mode 100644 docs/public/wxqrcode/steps.png create mode 100644 docs/public/wxqrcode/sticky.png create mode 100644 docs/public/wxqrcode/swipe-action.png create mode 100644 docs/public/wxqrcode/swiper.png create mode 100644 docs/public/wxqrcode/switch.png create mode 100644 docs/public/wxqrcode/tabbar.png create mode 100644 docs/public/wxqrcode/table.png create mode 100644 docs/public/wxqrcode/tabs.png create mode 100644 docs/public/wxqrcode/tag.png create mode 100644 docs/public/wxqrcode/text.png create mode 100644 docs/public/wxqrcode/textarea.png create mode 100644 docs/public/wxqrcode/toast.png create mode 100644 docs/public/wxqrcode/tooltip.png create mode 100644 docs/public/wxqrcode/transition.png create mode 100644 docs/public/wxqrcode/upload.png create mode 100644 docs/public/wxqrcode/watermark.png create mode 100644 docs/public/wxqrcode/wx-reward-ad.png diff --git a/build/qrcode.js b/build/qrcode.js new file mode 100644 index 000000000..a21169410 --- /dev/null +++ b/build/qrcode.js @@ -0,0 +1,119 @@ +// 调用微信api生成每个页面的小程序码,使用axios发起请求 + +const fs = require('fs') +const path = require('path') +const axios = require('axios') +const JSON5 = require('json5') // 引入 json5 库 + +const appID = process.argv[process.argv.indexOf('--APP_ID') + 1] // 在 --APP_ID 后面 +const appSecret = process.argv[process.argv.indexOf('--APP_SECRET') + 1] // --APP_SECRET 后面 + +// 获取 access_token 的函数 +async function getAccessToken() { + const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appID}&secret=${appSecret}` + + try { + const response = await axios.get(url) + return response.data.access_token + } catch (error) { + console.error(`获取 access_token 失败: ${error.response ? error.response.data : error.message}`) + throw error // 抛出错误以便后续处理 + } +} + +// 读取 pages.json 文件 +const pagesJsonPath = path.join(__dirname, '../src/pages.json') // 计算 pages.json 的路径 +let pagesJson + +try { + const jsonData = fs.readFileSync(pagesJsonPath, 'utf8') + pagesJson = JSON5.parse(jsonData) // 使用 json5 解析带注释的 JSON +} catch (error) { + console.error(`读取或解析 pages.json 失败: ${error.message}`) + process.exit(1) // 退出程序 +} + +const pages = pagesJson.pages.filter((page) => page.path.endsWith('Index')) + +// 将驼峰命名法转换为小写短横线连接的函数 +function camelToKebabCase(str) { + return str + .replace(/([a-z])([A-Z])/g, '$1-$2') // 在小写字母和大写字母之间插入短横线 + .replace(/([A-Z])/g, '-$1') // 在大写字母前插入短横线 + .replace(/--+/g, '-') // 替换多个短横线为一个短横线 + .replace(/^-|-$/g, '') // 去掉开头和结尾的短横线 + .toLowerCase() // 转换为小写 +} + +// 删除 wxqrcode 目录及其内容 +function clearWxqrcodeDirectory(outputDir) { + if (fs.existsSync(outputDir)) { + fs.rmSync(outputDir, { recursive: true, force: true }) // 递归删除目录及其内容 + console.log(`已删除目录: ${outputDir}`) + } +} + +// 生成小程序码的函数 +async function generateMiniProgramCode(accessToken, pagePath, retries = 3) { + const url = `https://api.weixin.qq.com/wxa/getwxacode?access_token=${accessToken}` + const data = { + path: pagePath, + width: 430 // 小程序码的宽度,可以根据需要调整 + } + + for (let attempt = 1; attempt <= retries; attempt++) { + try { + const response = await axios.post(url, data, { + responseType: 'arraybuffer' // 以二进制形式接收图片数据 + }) + + // 确保输出目录存在 + const outputDir = path.join(__dirname, '../docs/public/wxqrcode') + if (!fs.existsSync(outputDir)) { + fs.mkdirSync(outputDir, { recursive: true }) // 创建目录及其父目录 + } + + // 提取组件名并转换格式 + const componentName = pagePath.split('/')[1] // 假设路径格式为 pages/组件名/Index + const formattedName = camelToKebabCase(componentName) // 转换为小写短横线连接 + + // 将返回的图片数据保存为文件 + const fileName = path.join(outputDir, `${formattedName}.png`) // 生成文件名 + fs.writeFileSync(fileName, response.data) + console.log(`小程序码已生成并保存为 ${fileName}`) + return // 成功后退出函数 + } catch (error) { + console.error(`生成小程序码失败: ${error.response ? error.response.data : error.message}`) + if (attempt < retries) { + console.log(`重试 ${attempt}/${retries}...`) + } else { + console.error(`所有重试均失败,无法生成小程序码: ${pagePath}`) + } + } + } +} + +// 遍历每个页面并生成小程序码 +async function generateCodesForAllPages(accessToken) { + for (const page of pages) { + await generateMiniProgramCode(accessToken, page.path) + } +} + +// 生成二维码图片 +async function genrateQRCodeImage() { + const outputDir = path.join(__dirname, '../docs/public/wxqrcode') + + // 在开始生成小程序码之前清空 wxqrcode 目录 + clearWxqrcodeDirectory(outputDir) + + try { + const accessToken = await getAccessToken() + await generateCodesForAllPages(accessToken) + } catch (error) { + console.error('程序执行失败:', error.message) + } +} + +// 生成小程序二维码图片 pnpm qrcode -- --APP_ID xxx --APP_SECRET xxx +genrateQRCodeImage() diff --git a/docs/.vitepress/theme/components/QrCode.vue b/docs/.vitepress/theme/components/QrCode.vue new file mode 100644 index 000000000..0180aa5b1 --- /dev/null +++ b/docs/.vitepress/theme/components/QrCode.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/docs/.vitepress/theme/components/VPIframe.vue b/docs/.vitepress/theme/components/VPIframe.vue index 8f36e1bc2..3b392b70b 100644 --- a/docs/.vitepress/theme/components/VPIframe.vue +++ b/docs/.vitepress/theme/components/VPIframe.vue @@ -8,13 +8,14 @@
+
-