# ruoyi_uniapp

**Repository Path**: l_yangxiaoying/ruoyi_uniapp

## Basic Information

- **Project Name**: ruoyi_uniapp
- **Description**: 若依后端为服务支持，基于uniapp开发移动版本
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-03-27
- **Last Updated**: 2023-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ruoyi_uniapp

## 目录

- [介绍](#intro)
- [安装](#install)
- [配置](#config)
- [功能与进度](#features-and-progress)
- [组件](#components-for-use)
  - [字典](#dict-picker)
  - [侧滑列表](#swipe-list)
  - [时间日期](#date-picker)

<!-- - [介绍](#intro)
- [功能与进度](#features-and-progress)
- [使用说明](#instructions-for-use)
  - [安装依赖及启动](#install-setup)
  - [自定义基座](#debug)
  - [基础配置](#config)
  - [数据缓存](#vuex-state)
  - [http 请求](#http-request)
- [组件](#components-for-use)
  - [字典](#dict-picker)
  - [侧滑列表](#swipe-list)
  - [时间日期](#date-picker) -->

<a id="intro"></a>

## 介绍

基于 uniapp 开发的若依系统的移动端版本

<a id="features-and-progress"></a>

## 功能与进度

框架模块：

- [ ] 用户中心；
  - [ ] 登陆；
  - [ ] 注册；

<a id="instructions-for-use"></a>

## 使用说明

<a id="install-modules"></a>

### 安装依赖

建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题

```sh
安装依赖
npm install --registry=https://registry.npm.taobao.org

开发
npm run serve
```

<a id="debug"></a>

### 自定义基座

根目录 android_debug.apk 移动到根目录 unpackage/debug，设置菜单“运行-->运行基座选择-->自定义基座”

<a id="config"></a>

### 基础配置

根目录 common 文件夹下 config.js 为配置文件，可根据服务环境配置相关信息

<a id="vuex-state"></a>

### 数据缓存

保存数据

```sh
this.$u.vuex('userName', '史诗')
```

页面使用数据

```sh
this.$store.state.userName
```

<a id="http-request"></a>

### http 请求

项目所需接口均放在 config 路径下的 api.js 文件内，支持 post、get、put 和 delete，以及上传下载等请求。

写法以登陆接口为例

```sh
login: (data) => http.request({method:'POST',url:'/app/login',data:data,custom:{auth:false}}),
```

调用方式，页面无需再引用，直接如下方式调用

```sh
this.$u.api.login({
    username: '',
    password: ''
}, {
    custom: {
        auth: false
    },
}).then((res) => {

}).catch(() => {

})
```

为了方便功能区分，可以在 login 外层增加比如 account，如下

```sh
account:{
            // 登陆
            login: (data) => http.request({method:'POST',url:'/app/login',data:data,custom:{auth:false}}),

        },
```

同理，调用方式即为

```sh
this.$u.api.account.login()...
```

**需要注意** 请求携带参数，data 会放在 body，paramas 会加在 url 上，formData 即为表单形式提交

<a id="instructions-for-use"></a>

## 组件

<a id="dict-picker"></a>

### 字典

dict-picker 使用方式与 u-picker 相同

```sh
# 引用字典
dicts:['join_city'],

# 字典tag
<dict-tag :options="dict.type.join_city" value="form.city" />

# 字典选择
<dict-picker v-model="form.city" color="red" :columns="[dict.type.join_city]" placeholder="选择城市" border="none" ></dict-picker>
```

<a id="swipe-list"></a>

### 侧滑列表

使用方式与 u-list 相同，配合组件 swipe-list-item 嵌套使用，参数 show-scrollbar 是否出现滚动条仅在 nvue 中有效，事件@scrolltolower 滚动到底部触发事件，示例参看/pages/debug/swipe-list

```sh
# optionsType 数字类型，默认1，编辑/删除、0，查看
#分别对应onEdit、onDel、onDetail
#列表项点击事件click
#需要注意的是onDel事件内支持callback(),用于删除当前列表项
```

###时间日期选择器
<a id="date-picker"></a>

```sh
即将更新
```