基于vben的小程序后台框架快速构建

针对于vben后台框架搭建的快速构建小程序框架，可以原用大部分vben生成出来的data.ts配置和表单列表等使用方式，只需要修改少量的代码，即可生成一套完整的后台功能小程序。

使用

在main.ts中引用并且使用，如下：

import { createSSRApp } from 'vue'
import {setBasicAppConfig} from '@/components/app/BasicApp/BasicApp'
import basicApp from '@/components/app/BasicApp/index'

export function createApp() {
  const app = createSSRApp(App)
  app.use(basicApp)
  //初始化项目配置
  setBasicAppConfig({
      login:{
          Authorization:"Basic c2FiZXI6c2FiZXJfc2VjcmV0",
          loginPath:'/pages/account/telLogin'
      },
      layer:{
          confirmColor:"#0366FA"
      },
      theme:{
        primary:'#0366FA',
        success:'#56daa0',
        error:'#dd524d',
        warning:'#f0ad4e'
      }
  })

  return {
    app
  }
}

setBasicAppConfig配置

属性名	类型	默认值	介绍
Authorization	String	Basic c2FiZXI6c2FiZXJfc2VjcmV0	header里Authorization内容
BladeAuthName	String	Blade-Auth	令牌名称
BladeAuthKey	String	Blade-Auth	令牌缓存键
UserInfoKey	String	userInfo	用户信息缓存键
loginPath	String	/pages/account/login	登录页面路径
loginToType	String	navigateTo	登录页面跳转方式

layer 全局弹窗配置

属性名	类型	默认值	介绍
confirmColor	String	无	弹窗确认按钮颜色
cancelColor	String	wu	弹窗取消按钮颜色

theme 主题配置，目前暂时没用到

属性名	类型	默认值
primary	String	#0366FA
success	String	#56daa0
error	String	#dd524d
warning	String	#f0ad4e

UsePage 介绍

usePage是针对页面逻辑进行一些封装，简化页面直接传值、刷新的一些步骤和代码量

使用，引入 Page模块，注意需要指定一个模块名称用于进行模块刷新和传值等操作：

import { usePage } from '@/components/app/BasicApp/Page'
const { onLoad, navigateTo } = usePage('index')
onLoad(() => {
})

针对整个页面声明周期进行了一系列封装，使用方式和uniapp一致，但提供了一些比较便捷的实用方法

navigateTo跳转支持大数据传参，下一个页面可以在onLoad内直接取到，无效进行数据转换等：

//使用跳转
import { usePage } from '@/components/app/BasicApp/Page'
const { onLoad, navigateTo } = usePage('index')

navigateTo({
    url:"页面路径",
    pageData:'传输内容，支持任意类型'
})
//获取参数
onLoad((query,extData)=>{
    console.log('可以通过额外字段extData获取到',extData.pageData)
})

指定了对应的模块名后，支持refresh刷新函数，可以在编辑页编辑成功后，或者其他场景，直接调用refresh函数，即可刷新监听了刷新事件的页面，如下：

//开启监听
const { onLoad, navigateTo } = usePage('index',{
    //监听reload刷新，当其他地方调用该模块的refresh的时候，该方法会触发
    reload:()=>{
        //刷新逻辑
    }
})

//刷新页面 需要指定为同一个模块名
const { onLoad, refresh } = usePage('index')
const handle=()=>{
    refresh()//刷新
}

UseRecords 列表页

生成写好的模板的列表页，模板样式可以自由的修改
template内容如下：

<template>
    <view class="center-wrap">
        <BasicRecords @register="registerRecords">
            <template #action="{record}">
                <w-tools-action :col="3" @on-click="handleActionClick($event,record)" :action="[
                    {id:1,name:'view',label:'查看',icon:'eye'},
                    {id:3,name:'edit',label:'编辑',icon:'edit-pen'},
                    {id:4,name:'delete',label:'删除',icon:'trash'}
                ]"></w-tools-action>
            </template>
        </BasicRecords>
    </view>
</template>

ts文件内容如下，注意，使用的是setup

import { usePage } from '@/components/app/BasicApp/Page'
import BasicRecords from '@/components/app/BasicRecords/src/BasicRecords.vue'
import { useRecords } from '@/components/app/BasicRecords'
import { columns, searchSchemas } from './data'// 数据项配置
import { getStudentPage } from '@/apis/Demo'// 模拟接口

const { onLoad, navigateTo } = usePage('index')
onLoad(() => {
    reloadRecord()
})
//初始化Records模板
const [registerRecords, { reload: reloadRecord }] = useRecords({
    api: getStudentPage,
    showRow: 5,
    titleRow: false,
    searchConfig: {
        schemas: searchSchemas
    },
    immediate: false,
    columns: columns,
    pagination: {
        size: 4
    }
})
//操作栏点击
const handleActionClick = ({ detail }, record: any) => {
    if (detail.name == 'view') {
        navigateTo({
            url: '/pages/demo/view',
            pageData: record
        })
    } else if (detail.name == 'edit') {
        navigateTo({
            url: '/pages/demo/edit',
            pageData: record
        })
    }
}

data.ts配置内容：

//由于小程序机制问题，无法在文件内使用await
import { ref } from 'vue'
import { getClasss } from '@/apis/Demo'

const classList = ref([])
getClasss({}).then(({ data }) => {
    classList.value = data
})

//基础列表配置
export const columns = [
    {
        title: '姓名',
        dataIndex: 'name'
    },
    {
        title: '性别',
        dataIndex: 'sex',
        format: ({ val }) => {
            return val == 1 ? '男' : '女'
        }
    },
    {
        title: '年龄',
        dataIndex: 'age',
        format: ({ val }) => {
            return val + '岁'
        }
    },
    {
        title: '联系电话',
        dataIndex: 'tel'
    },
    {
        title: '班级',
        dataIndex: 'studentId',
        format: ({ val }) => {
            return classList.value.find((x) => x.id == val).name
        }
    },
    {
        title: '头像',
        dataIndex: 'avatar',
        component: 'Album'
    }
]
//搜索配置字段
export const searchSchemas = [
    {
        label: '关键词',
        field: 'keywords',
        component: 'Input'
    },
    {
        label: '班级',
        field: 'type',
        component: 'Select',
        componentProps: {
            options: classList.value,
            placeholder: '请选择班级',
            fieldNames: { label: 'name', value: 'id' }
        }
    },
    {
        label: '姓名',
        field: 'name',
        component: 'Input'
    },
    {
        label: '联系电话',
        field: 'tel',
        component: 'Input'
    }
]

UseRecords 属性配置

属性	类型	默认值	介绍
api	Promise:RecordReturn	无	指定接口请求，需要返回指定格式
searchConfig	BasicRecordsSearchConfigType	无	搜索项配置，详见下方
titleRow	Boolean	true	显示标题行，第一列配置，会被设置为标题
showRow	Number	0	如果设置了值，超过该值的行会被折叠
columns	BasicColumns	[]	列的配置，详见下方
immediate	Boolean	true	是否立即加载数据，不建议开启
empty	{msg:'无内容'}		空页面的文字提示
pagination	BasicRecordsPaginationType	size:5	分页配置，详见下方

RecordReturn格式

需要返回一个Promise格式的数据：

{
    "errMsg":"错误信息",
    "code":200,
    "data":{
        "total":10,
        "records":[]
    },
    "success":true
}

BasicRecordsSearchConfigType

属性	类型	默认值	介绍
schemas	BasicSearchSchema	[]	搜索字段配置

BasicRecordsSearchConfigType.schemas:

属性	类型	默认值	介绍
label	String		字段名称
field	String	字段的键
component	String	Input	绑定组件
componentProps	Object	{}	绑定组件的自定义属性

BasicColumns

属性	类型	默认值	介绍
title	String		字段名称
dataIndex	String		字段对应的键
textColor	String / ({record,val})=>string	#000	支持返回一个颜色，改变值的颜色
format	String / ({record,val})=>string		数据转化函数
position	top / left	left	label显示的位置
show	Boolean / ({record,val})=>boolean	动态显示隐藏该字段

BasicRecordsPaginationType

属性	类型	默认值	介绍
size	Number	5	分页数量

UseDescription 详细页

生成写好模板的详细页，可以自由的修改模板样式

template页面内容：

<template>
    <view class="center-wrap">
        <BasicDescription @register="registerDesc"></BasicDescription>
    </view>
</template>

ts页面内容：

import { useDescription } from '@/components/app/BasicDescription'
import BasicDescription from '@/components/app/BasicDescription/src/BasicDescription.vue'
import { usePage } from '@/components/app/BasicApp/Page'
import { detailSchemas } from './data'

const { onLoad } = usePage('index')

const [registerDesc, { setValue }] = useDescription({
    schemas: detailSchemas
})

onLoad((query: any, extData) => {
    //设置从列表传来的内容，也可以通过接口获取
    setValue(extData.pageData)
})

data.ts配置如下：

//由于小程序机制问题，无法在文件内使用await
import { ref } from 'vue'
import { getClasss } from '@/apis/Demo'

const classList = ref([])
getClasss({}).then(({ data }) => {
    classList.value = data
})
//详情配置
export const detailSchemas = [
    {
        label: '姓名',
        field: 'name'
    },
    {
        label: '性别',
        field: 'sex',
        format: ({ val }) => {
            return val == 1 ? '男' : '女'
        }
    },
    {
        label: '年龄',
        field: 'age',
        format: ({ val }) => {
            return val + '岁'
        }
    },
    {
        label: '联系电话',
        field: 'tel'
    },
    {
        label: '班级',
        field: 'studentId',
        format: ({ val }) => {
            return classList.value.find((x) => x.id == val)?.name
        }
    },
    {
        label: '头像',
        field: 'avatar',
        component: 'Album'
    }
]

UseDescription 配置

属性	类型	默认值	介绍
schemas	BasicDescriptionSchema	[]	字段配置

BasicDescriptionSchema	属性	类型	默认值
label	String		字段名称
field	String		字段对应的键
component	String	无	绑定组件
componentProps	Object		绑定组件的属性
format	String / ({record,val})=>string		数据转化函数
position	top / left	left	label显示的位置
show	Boolean / ({record,val})=>boolean	动态显示隐藏该字段

目前component只支持Album 相册显示

UseForm 表单

生成完整的表单，页面模板可以自定义修改

template页面内容：

<template>
    <view class="" style="background-color: #fff;">
        <BasicForm @submit="handleSubmit" @register="registerForm"></BasicForm>
    </view>
</template>

ts内容：

import { useForm } from '@/components/app/BasicForm'
import BasicForm from '@/components/app/BasicForm/src/BasicForm.vue'
import { usePage } from '@/components/app/BasicApp/Page'
import { formSchemas } from './data'
const { onLoad, refresh } = usePage('index')

//初始化表单
const [registerForm, { setValue }] = useForm({
    schemas: formSchemas,
    submitButton: '提交',
})

onLoad((query, extData) => {
    //如果是编辑模式，设置传入过来的值
    if(extData.pageData) {
        setValue(extData.pageData)
    }

})

//表单提交
const handleSubmit = ({ formValue }) => {
    //刷新模块上一页的数据
    refresh(formValue)
    //...提交内容
    console.log(formValue)
    //成功，并且返回
    uni['success']('成功', {
        success: () => {
            uni.navigateBack()
        }
    })
}

data.ts配置

//由于小程序机制问题，无法在文件内使用await
import { ref } from 'vue'
import { getClasss } from '@/apis/Demo'

const classList = ref([])
getClasss({}).then(({ data }) => {
    classList.value = data
})

//表单配置
export const formSchemas = [
    {
        label: '姓名',
        field: 'name',
        required: true,
        component: 'Input'
    },
    {
        label: '性别',
        field: 'sex',
        component: 'RadioGroup',
        componentProps: {
            options: [
                { name: '男', value: 1 },
                { name: '女', value: 0 }
            ],
            placeholder: '请选择班级',
            fieldNames: { label: 'name', value: 'value' }
        }
    },
    {
        label: '年龄',
        field: 'age',
        component: 'Input'
    },
    {
        label: '联系电话',
        field: 'tel',
        component: 'Input'
    },
    {
        label: '班级',
        field: 'studentId',
        component: 'Select',
        componentProps: {
            options: classList,
            placeholder: '请选择班级',
            fieldNames: { label: 'name', value: 'id' }
        }
    },
    {
        label: '头像',
        field: 'avatar',
        component: 'Upload'
    }
]

UseForm 配置

属性	类型	默认值	介绍
schemas	BasicFormSchemas	[]	字段配置
submitButton	String	无	提交按钮名称，如果不配置则不显示提交按钮

BasicFormSchemas

属性	类型	默认值	介绍
label	String		字段名称
field	String		字段对应的键
defaultValue	any		默认值
component	String	无	绑定组件
componentProps	Object		绑定组件的属性
itemProps	Object		item组件自定义属性
show	Boolean / ({record,val})=>boolean	动态显示隐藏该字段
dynamicDisabled	Boolean / ({record,val})=>boolean		动态禁用
required	Boolean	false	必填验证简化版规则
rules	Array		验证规则，通vben的rules

全局组件

提供了常用的全局组件（不断完善中），大部分组件，使用方式同vben框架的组件，可以直接复制过来用

表单

Button
按钮组件
<w-button />
Input
输入框
<w-input />
Select
选择框，使用了picker组件
<w-select/>

Date
日期选择器，仅支持日期部分选择，使用了内置picker

<w-date />

TextArea
长文本输入框

<w-textarea />

InputNumber
数字输入框

<w-input type="number" />

RadioGroup
单选按钮组

<w-radio-group />

RegionPicker
四级行政区域选择，使用了data-picker组件

<w-region-picker />

LatLngSelect
地址/经纬度选择

<w-latlng-select />

Upload
上传组件

<w-upload />

DataPicker
数据多列选择器，使用了data-picker组件

<w-data-picker />

Divider
分割线

<w-divider />

Album
相册/上传附件显示组件

<w-album/>