# uniapp-vicode

**Repository Path**: event770/uniapp-vicode

## Basic Information

- **Project Name**: uniapp-vicode
- **Description**: uniapp基础上的快速开发模型
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-13
- **Last Updated**: 2022-12-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uniapp-vicode

#### 介绍
uniapp基础上的快速开发模型
目的是为实现小程序的快速开发，内置完整的js框架、css框架、vue组件(注意相互间具有一定的依赖关系)

#### 软件架构
- /static/js：js框架
     api.js 基础功能库<br/>
     http.js 网络功能模块<br/>
     host.js 数据接口地址模块<br/>
     mixin.js 全局混入模块<br/>
     enum/router.js 自定义页面路由模块<br/>
	 enum/common.js 通用枚举变量模块

#### 安装教程
完整拷贝项目，使用HbiulderX打开项目即可

#### 使用说明
页面或组件内使用：<br/>
     \\$api.功能名（使用基础功能）<br/>
     \\$http.功能名（使用网络功能）<br/>
     \\$host.变量名（使用网络地址）<br/>
     \\$promised(uni.功能名)({参数集})（promise化uniapp功能函数）<br/>
     \\$getRouter(路由键名)（使用自定义路由表）<br/>
     \\$getEnum(键名)（使用自定义通用枚举变量）<br/>

#### 其他
页面及组件内混入变量:
1.  vi_pageSize，当前页面宽度等级，用于开发响应式页面或组件。
2.  vi_pageTitle，当前页面标题，用于自定义头部导航组件的标题显示。
2.  vi_router，当前页面路由对象，取自自定义路由表。
3.  vi_gobackTimer，页面后退定时器，用于在数据操作完成后定时返回的判定，开始定时后会与手动返回产生冲突。
4.  vi_loading，自定义loading组件启动状态，http模块发起请求后更改此状态，启动自定义loading组件。
5.  vi_loadingMask，自定义loading组件临时遮罩，http模块发起带遮罩请求后更改此状态，对自定义loading组件开启遮罩屏蔽屏幕点击。
6.  host_image，图片资源地址前缀，取自$host
7.  autoTurnPage，自动翻页功能，开关。
8.  topfix，自定义头部导航高度，用于popup、notify等弹出式组件调整位置。
9.  pageObj，自动翻页功能，页码信息。

    computed自动计算
1.  hasNextPage，自动翻页功能，判断是否存在下一页。
2.  caches，缓存定义。

    methods函数
1.  setPageData，自动翻页功能，设置返回数据。
2.  resetPage，自动翻页功能，重置页码。
3.  linkToKey，使用自定义路由表的关键字跳转页面。
4.  linkTo，使用url跳转页面。
5.  dateFormat，格式化日期。
6.  showTips，超过指定字数后，点击文字显示文本提示
7.  openWin，打开页面组件。
8.  closeWin，关闭页面组件。

自动翻页功能，mixin已携带触底自动翻页的模型，关联autoTurnPage、pageObj、hasNextPage、setPageData、resetPage。配置正确后仅需在页面设置开关即可实现页面触底自动翻页。
1.  在页面data变量设置autoTurnPage:true开启功能。
2.  配置pageObj请求页面、每页数量、服务器返回数据起始点、服务器返回数据总数起始点。须跟后端匹配，根据实际需求做相应调整。
3.  配置hasNextPage判断存在下一页的逻辑。
4.  配置setPageData写入页面数据逻辑。
5.  配置mixin中onReachBottom事件，调用页面取数据入口，入口应统一命名。
6.  在页面取数据入口内，发起http请求时携带pageObj信息，根据实际情况使用。
7.  在页面取数据入口内，接收请求返回数据时，用this.setPageData(返回数据的数组列表，页面存储数据的数组)，设置返回数据。