# H5_微信小程序（uniapp版） **Repository Path**: enozoom/uniapp ## Basic Information - **Project Name**: H5_微信小程序（uniapp版） - **Description**: 开发微信小程序或H5的uniapp公共组件及函数，基于vue3+pug+scss+tailwind。 - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: a-n-x-tailwind - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2022-12-13 - **Last Updated**: 2026-04-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: uni-app, vue3, 微信小程序, PUG ## README # uniapp版本小程序开发通用套件 > 使用HBuilderX创建一个vue3项目后，将这里所有的文件覆盖到项目根目录下后，npm install > 当引入组件或者使用自定义底部菜单时，引入无效，关闭微信开发工具，HBuilderX重新编译即可。 ## 技术栈 ### Vue3 + pug + tailwind3 微信小程序不支持tailwind的规则，这里使用weapp-tailwindcss进行支持，可惜的是pug对tailwind的很多命名规则，如`hover:bg-red`、`bg-[#f00]`、`w-1/4`、`w-1.5`兼容性不好，只能使用`view(class="hover:bg-red bg-[#f00] w-1/4 w-1.5") 文字`这种折中方案。 由于代码使用了sass，所以使用了tailwind3。 ## 项目结构 ### assets 资源文件，包括配置JSON文件和全局SCSS文件： ``` config/ constant.json 常量 url.json 接口地址 scss/ _mixins.scss 常用的scss函数 _table.scss table布局相关 _var.scss 设置默认样式 tailwind-preset.js 预设样式类变量 tailwind-safelist.js vue动态生成的样式类提前指定 utilities.scss 公共样式，如.btn ``` > 在组件中使用vue的:deep()可能出无效(页面使用正常)，可尝试`.component-classname::v-deep{}` ### components-es 主组件，自我实现或二次封装的组件： ```pug //- 最常用，一般来说这些足够了： a-arrow-icon-x 箭头图标 a-empty-x 数据为空 a-fixed-bottom-x fixed底部的区域 a-form-x 表单(grid布局，自动关联 useTipx, useFormValidateX) a-img-x 图片 a-list-x 列表处理(自动关联 a-empty-x、a-loading-x) a-loading-x 数据加载 a-navbar-x 自定义navbar a-popup-x 弹窗 a-richtext-x 富文本 a-searchbar-x 搜索条 a-selectbox-x 可定义颜色和选中态的radio或checkbox a-slide-x 轮播 a-svg-icon-x svg图标(a-img-x的扩展，可支持svg颜色) a-tabbar-x tab切换(建议关联 a-list-x) a-uploadMedia-x 上传图片或视频，第一次只能选一个，用来判定是视频还是图片，视频只能传一张，支持获取视频第一帧 图片上传(自动关联 a-form-x a-videobox-x) //- 其他组件 a-button-x 按钮 a-cateLeft-x 两栏布局左分类右商品，左右互联响应布局 a-chart-pie-x css实现的饼图 a-color-picker-x 取色器 a-datetimepicker-x 日期+时间选择器 a-dragbox-x 一个拖拽容器 a-h5-rebackbtn-x h5页面通用的左上角后退胶囊按钮 a-lottery-x 抽奖 nine 九宫格 wheel 大转盘 a-marquee-text-x 一段从左到右循环滚动的文字 a-nav-list-x 一个菜单列表, 常用于"我的"页的菜单项 a-plateNumber-x 车牌号键盘 a-popup-loading-x 全屏遮罩上居中的方形，无法关闭 a-pull-refresh-list-x 下拉刷新 @deprecated a-region-x 地区选择器 a-scrolltop-btn-x 回到顶部 a-search-history-x 吸顶搜索框+历史搜素 a-signature-x 签名板 a-skeleton-mod-x 页面模块级骨架屏 a-skeleton-page-loading-x 一个简化连骨架屏都称不上的页面加载中遮罩，表现为 白屏中间有载入中图标和文字提示 a-skeleton-x 页面级骨架屏，可通过自定义页面的结构 a-slide-cate-x 可定义行列，超出部分swiper切换的分类组件 a-slide-range-x 滑块范围取值 a-stepper-x 步进器 a-switch-x 带字切换器 a-text-avatar-x 头像(未指定路径则使用相应文字第一个) a-uploader-progress-x 带进度条的每次上传一个文件的上传组 a-uploadFileByCOS-x 上传文件(配合腾讯COS使用)，显示一个总进度条 a-uploadMediaByCOS-x 上传图片或视频(配合腾讯COS使用)，第一次只能选一个，用来判定是视频还是图片，视频只能传一张，支持获取视频第一帧(配合腾讯COS使用) a-videobox-x 视频 a-calendar-x 日历 a-privacybox-x 隐私弹窗 a-navbar-skyline-x skyline navbar a-slider-x 滑动条 ``` ### components-v 各个项目自定义的组件包。 ### composables 核心函数： ``` chart canvas图表 BaseCanvasDraw 图表基类 useDrawCurveLine 曲线图表 useDrawLine 折线图表 useDrawRing 环形图表 request 请求相关 useRequestInterceptorX 请求拦截器 useRequestLock 请求锁 useRequestX 请求 useCacheX 存储(仅localStorage) useDateX 日期处理(倒计时，格式化) useFileManagerX 文件处理(下载，预览) useFormValidateX 验证器 useMPH5X 公众号开发(拿code换openid) useSelectorX 节点选择 useTipX 提示框(跳转) useToolsX 一些常用函数(未归类) useUploadX 上传 useUploadByCOS 腾讯云COS上传 useWeixinJsSdk 公众号开发(需要：npm install weixin-js-sdk) useWXAuth 小程序的授权请求相关(获取地理位置，获取微信运动步数) useShareX 分享 useUserAction 用户行为 useUserAuth 用户认证 ``` ### mixins-extends 页面可以继承的基类： ``` list-base 列表页基类 tabbar-list-base 带标签栏的列表页面基类 ``` ### pages 页面文件。 ### pkg-region 如果使用分包，建议分包的命名规则：`pkg-xxxx` ### static 默认图片文件夹： ``` jpg avatar.jpg tabbar 底部菜单icon tabbar-0.png png svg local 不是前三种的都放这里 ---- // 支持使用a-img-x快捷路径 a-img-x(src="avatar" jpg) = image(src="/static/jpg/avatar.jpg" mode="aspectFill") ``` ### store ``` useGlobalRefCart 全局购物车示例 useGlobalRefData 全局响应变量(基于Pinia) useRefreshOnShow 页面onShow时是否刷新当前页面的响应判定 ``` ### App.vue 当原生(有原生组件、插件或tabbar)+uniapp开发时，使用Object.assign把原生用的函数或变量先编译进来(避免摇树优化tree shaking)： ```javascript // 注意，预先编译进来，要引用函数或变量所在的文件，如 import {useCache} from '/composables/useCacheX' // 使用 import {useCache} from '/composables/imports.d' 可能无效 Object.assign({}, {useCache}) ``` ### vue3-pug-scss.code-snippets VSCode代码片段。 --- > 获取本库的更多信息：[https://gitee.com/enozoom/uniapp/](https://gitee.com/enozoom/uniapp/) ## 高级特性 ### 开启单页面的Skyline webview在长列表优化(scroll-view)，生成快照等方面不及skyline，但skyline对css和组件的支持和webview不同，选择了skyline引擎渲染就放弃了uniapp的一码多平台的优势。 1. 微信小程序开发工具 -> 本地设置 -> 开启Skyline渲染调试 2. manifest.json 文件配置 [Skyline配置说明](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#SkylineOptions) ```json "mp-weixin": { "lazyCodeLoading": "requiredComponents", "componentFramework": "glass-easel", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "defaultContentBox": true, "disableABTest": true, "sdkVersionBegin": "3.0.1", "sdkVersionEnd": "15.255.255" } } } ``` 3. pages.json 文件配置 ```json { "pages": [ { "path": "pages/my/msg/chat/u2bBySkyline", "style": { "disableScroll": true, "renderer": "skyline", "componentFramework": "glass-easel", "navigationStyle": "custom", "navigationBarTitleText": "和招聘方沟通" } } ] } ``` 4. 可在页面执行以下代码查看当前渲染引擎 ```javascript console.log( usePage().renderer ) ``` ### 开启分包异步加载，在主(分)包中引用其他分包的组件 主包2MB限制(开发工具2.0后1.5MB?)业务流程的复杂度，为实现更复杂的逻辑，只能采用分包。但分包的页面无法在tabBar中使用，可通过异步加载分包组件的形式，在主包创建一个tabBar页，里面只需加载分包相应页面为组件，来变相实现。 tabBar是特殊形式，其他主(分)包中引用其他分包的组件(页面也可以作为组件)方式相同。 微信官方文档: [占位组件说明](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/placeholder.html)，[分包异步化说明](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html) pages.json 文件配置： ```json { "pages": [ {"path": "pages/shop/index", "style": { "navigationBarTitleText": "微小店", "usingComponents": { "little-shop-index-page": "../../pkg-little-shop/index/index" }, "componentPlaceholder": { "little-shop-index-page": "view" } }} ], "subpackages": [ { "root": "pkg-region", "pages": [ {"path": "index/index", "style": {"navigationBarTitleText": "微小店"}}, {"path": "combo/index", "style": {"navigationBarTitleText": "套餐"}}, {"path": "goods/id", "style": {"navigationBarTitleText": "商品详情"}} ] } ], "preloadRule": { "pages/shop/index": { "packages": ["pkg-little-shop"], "network": "all" } } } ``` ### 使用插件 一些公共的且与流程无关的组件，有可用组件没必要反复写。虽然小程序插件已经存在很长时间，但实际使用仍然极少。[插件说明](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html) pages.json 文件配置，以下是一个分包的示例： ```json { "subpackages": [ { "root": "pkg-region", "plugins": { "enozoom": { "version": "0.25.308", "provider": "wx084b854c822e88e5" } }, "pages": [ {"path": "my/address/list", "style": {"navigationBarTitleText": "收货地址"}}, { "path": "my/address/id", "style": { "navigationStyle": "default", "navigationBarTitleText": "收货地址设置", "navigationBarBackgroundColor": "#F9FAFE", "mp-weixin": { "usingComponents": { "region-x": "plugin://enozoom/region" } } } } ] } ] } ```