# H5_微信小程序（uniapp版）

**Repository Path**: enozoom/uniapp

## Basic Information

- **Project Name**: H5_微信小程序（uniapp版）
- **Description**: 开发微信小程序或H5的uniapp公共组件及函数，基于vue3+pug+scss。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: a-n-x
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2022-12-13
- **Last Updated**: 2025-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app, vue3, 微信小程序, PUG

## README

# uniapp版本小程序开发通用套件
> 使用HBuilderX创建一个vue3项目后，将这里所有的文件覆盖到项目根目录下即可。  
> 当引入组件或者使用自定义底部菜单时，引入无效，关闭微信开发工具，HBuilderX重新编译即可。

## assets
资源文件，包括配置JSON文件和全局SCSS文件
```
config/
    constant.json 常量
    url.json 接口地址
scss/
    _mixins.scss 常用的scss函数
    base.scss 其他全局样式，base会覆盖tailwind的样式
    tailwind.scss 和tailwind相同命名的全局样式文件
    fix.scss 兼容稍微老点浏览器(<chrome 87, <safari 14.1) 

    如果使用:deep(.component-classname){}无效，可尝试.component-classname::v-deep{}
```
## components-es
主组件，自我实现或二次封装的组件
```pug
//- 最常用，一般来说这些足够了：
a-empty-x 数据为空
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-slide-x 轮播
a-tabbar-x tab切换(建议关联 a-list-x)
a-uploader-x 图片上传(自动关联 a-form-x a-videobox-x)
//- 其他组件
a-button-x 按钮
a-chart-pie-x css实现的饼图
a-checkbox-x 单个选框
a-color-piicker-x 取色器
a-datetimepicker-x 日期+时间选择器
a-dragbox-x 一个拖拽容器
a-fixed-bottom-x fixed底部的区域
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 下拉刷新
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-uploadMedia-x 上传图片或视频，第一次只能选一个，用来判定是视频还是图片，视频只能传一张，支持获取视频第一帧
a-uploadMediaByCOS-x 上传图片或视频，第一次只能选一个，用来判定是视频还是图片，视频只能传一张，支持获取视频第一帧(配合腾讯COS使用)
a-videobox-x 视频
a-waterfall-x 瀑布流
```
## components-v
各个项目自定义的组件包
## composables
核心函数
```pug
chart canvas图表
    BaseCanvasDraw 图表基类
    useDrawCurveLine 曲线图表
    useDrawLine 折线图表
    useDrawRing 环形图表
request 请求相关
    useRequestInterceptorX 请求拦截器 
    useRequestLock 请求锁
    useRequestX 请求 
useCacheX 存储(仅localStorage)
useDateX 日期处理(倒计时，格式化)
useFileManagerX 文件处理(下载，预览)
useFormValidateX 验证器
useMPH5X 公众号开发(拿code换openid)
useSelectorX 节点选择
useTipX 提示框(跳转)
useToolX 一些常用函数(未归类)
useUploadX 上传
useWeixinJsSdk 公众号开发(需要：npm install weixin-js-sdk)
useWXAuth 小程序的授权请求相关(获取地理位置，获取微信运动步数)
```
## pages
页面们
## static
默认图片文件夹
```pug
jpg
    avatar.jpg
tabbar 底部菜单icon
    tabbar-0.png
png
svg
local 不是前三种的都放这里
tmp 临时展示用接完数据后删除的图片
----
// 支持使用a-img-x快捷路径
a-img-x(src="avatar" jpg)
=
image(src="/static/jpg/avatar.jpg" mode="aspectFill")
```
## store
```pug
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 snippets (代码片段)

> 获取本库的更多信息  
> [https://gitee.com/enozoom/uniapp/](https://gitee.com/enozoom/uniapp/)

## 开启单页面的skyline

webview在长列表优化(scroll-view)，生成快照等方面不及skyline，但skyline对css和组件的支持和webview不同，选择了skyline引擎渲染就放弃了uniapp的一码多平台的优势。

manifest.json 文件配置 [配置说明](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"
            }
        }
}
```
package.json 文件配置
```json
{
    "pages": {
        {"path": "pages/my/msg/chat/u2bBySkyline", "style": {
         "disableScroll": true, "renderer": "skyline", "componentFramework": "glass-easel",
         "navigationStyle": "custom", "navigationBarTitleText": "和招聘方沟通"}
        },
    }
}
```
可在页面执行
```javascript
// 查看当前渲染引擎
console.log( usePage().renderer )
```