# uni-program-template

**Repository Path**: wangxinyanqc/uni-program-tmp

## Basic Information

- **Project Name**: uni-program-template
- **Description**: uniapp 小程序模板
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-03-07
- **Last Updated**: 2025-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uniapp 模板

### 介绍
uniapp 小程序模板为一个开源项目，希望能够帮助到前端同行快速搭建uniapp 模板


### json 动效文件预览地址(需注册账号)
https://lottiefiles.com/preview

### svga 动效文件预览地址
http://svga.io/svga-preview.html

### 功能点备注
wx.pageScrollTo({scrollTop: 0})  可返回页面顶部

```
### 项目结构
├── common            # 前端公共自定义插件集合
│   ├── api           # 前端接口集合
│   ├── utils.js      # 前端工具集合
│   ├── config.js     # 环境配置
│   └── http.js       # request 请求封装
├── components        # 前端公共页面组件
├── dist              # 项目构建后的文件 分为 build 和 dev 2个文件夹
├── node_modules      # 项目依赖包目录
├── pages             # 项目页面集合
│   ├── index
│   └── xxx
├── static            # 静态资源目录
│   ├── image         # 图片文件集合
│   ├── font          # 字体文件
│   └── style         # 样式文件
├── store             # vuex数据管理
├── uni_modules       # uni 官方提供的组件及组件的安装和使用方法说明
├── unpackage         # 存放各个平台的打包文件
├── wxcomponents      # 微信小程序端引入的第三方组件 vant
├── .gitignore        # .gitignore忽略文件配置,写入里面的文件和目录不会被提交至代码仓库
├── App.vue           # 页面根组件，所有页面都在App.vue下进行切换，是页面入口文件，可以调用应用的生命周期函数
├── main.js           # 项目入口文件，主要作用是初始化vue实例并使用需要的插件
├── manifest.json     # 件是应用的配置文件，用于指定应用的名称、图标、logo、appid、版本、权限等
├── pages.json        # 对uni-app全局配置，包括页面路由、导航条、选项卡、底部原生tabbar等
├── README.md         # 项目描述文件
└── uni.scss          # 文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置
```

### 引入van 组件
1.安装@vant/weapp库 -->  yarn add @vant/weapp --production
2.在根目录新建 wxcomponents 文件夹
3.拷贝node_modules 依赖中 @vant 文件夹到wxcomponents目录中
4.pages.json 文件globalStyle --> usingComponents 配置项中载入组件路径 (例如："van-button": "/wxcomponents/@vant/weapp/dist/button/index")

### van 组件地址
https://vant-contrib.gitee.io/vant-weapp/#/home

### 分支管理
1.  develop [功能分支]
2.  master [主干分支]

### 注意事项
1.  小程序为企业主体时才能通过getphonenumber事件获取手机号
2.  小程序只能识别  view、text 等专有标签  div、span 标签无法识别，小程序引擎无法渲染
3.  小程序第一个页面要和第一个tabbar是同一个页面，否则无法展示
4.  static存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
5.  video src="xxx.mp4" loop="true" controls="false" video  无法隐藏播放控件  解决方法： :controls="controls"  采用绑定变量的形式，在 data数据中声明 false

### 运行
uniapp 开发小程序需HBuilder编译构建
运行—>运行到小程序模拟器—>微信开发者工具 即可启动微信开发者工具

### 发布
发行->小程序-微信 执行菜单后就会启动编译，编译完成后点击"上传"

### js-tools-zk 工具类
使用方法参考 https://www.npmjs.com/package/js-tools-zk