文章目录

一、项目简介
- 1、项目概述
- 2、相关链接
- 3、基础功能
- 4、后端搭建
二、开发手册
- 全局约束
- - 全局样式约束
  - 全局that约束
- 代码模板
- - 表单
  - 消息提示
  - 确定取消
  - http请求
  - 请求拦截器
  - 文件上传
  - 路由跳转
  - 弹出表单
  - 基础列表
项目截图
技术分享区

一、项目简介

1、项目概述

基于 Uniapp + uView 搭建项目基础模板，以实际开发总结为准，非常具有实战意义

实际开发中，我们会遇到各式各样的问题，虽然网上已经有很多 UI 框架了，但是实际使用的时候，还是要不断的搭建一些基础功能和逻辑，比如登录、注册、找回密码、退出等，本项目的目的就是直接使用搭建好的模板创建企业中实际需要的项目

2、相关链接

Straw-Uniapp-uView 源码
Straw 系列其他项目
Uniapp 官网
uView 官网

3、基础功能

仔细读一下 uView 官方文档不难发现，已经提供了很多工具，代码的封装等操作，这里我就不一一阐述了，列举一下常用的功能

功能	官方地址
表单验证	https://www.uviewui.com/components/form.html
内容为空	https://www.uviewui.com/components/empty.html
加载更多	https://www.uviewui.com/components/loadMore.html
Http 请求	https://www.uviewui.com/js/http.html
时间格式	https://www.uviewui.com/js/time.html
路由跳转	https://www.uviewui.com/js/route.html
规则校验	https://www.uviewui.com/js/test.html

4、后端搭建

很多小伙伴问这个项目有没有带后端的项目，这里我想的是实际开发中，也不可能直接使用的是我创建好的这个项目，因为很多其他因素，你不可能直接就能使用别人的模板，比如实际项目是一个嵌入到老项目的情况，就不适用整个项目直接嵌入

后端只需要满足登录逻辑即可：用户登录获取 token，然后使用 token 获取用户信息（用户基本信息、角色信息、权限信息），每次请求的头部增加 token 验证即可

所以这里我并没有直接将这个前端项目绑定一个后端项目，主要目的是方便扩展

后端的实现通常是 springboot + shiro + jwt + redis
实现的前后端分离，这里我也是整理了一个项目，方便使用，或者集成到公司其他项目，Straw-Shiro-Jwt

二、开发手册

全局约束

全局样式约束

全局that约束

由于很多方法涉及到当前内部 this 的限制，需要手动定义that来取代，所以我们直接一开始就定义 that

<script>let that;export default {onLoad() {that = this;}}
</script>

代码模板

表单

消息提示

uView 官方文档：Toast 消息提示
成功提示

<template><view><u-button @click="openMsg">弹出消息</u-button><u-toast ref="uToast" /></view>
</template><script>let that;export default {onLoad() {that = this;that.openMsg();},methods: {openMsg() {that.$refs.uToast.show({type: 'success',title: '操作成功'});},}}
</script>

失败提示

<template><view><u-button @click="openMsg">弹出消息</u-button><u-toast ref="uToast" /></view>
</template><script>let that;export default {onLoad() {that = this;that.openMsg();},methods: {openMsg() {that.$refs.uToast.show({type: 'error',title: '操作失败'});},}}
</script>

消息关闭后跳转

<template><view><u-button @click="openMsg">弹出消息</u-button><u-toast ref="uToast" /></view>
</template><script>let that;export default {onLoad() {that = this;that.openMsg();},methods: {openMsg() {that.$refs.uToast.show({type: 'success',title: '操作成功',url: '/pages/test/add'});},}}
</script>

消息关闭后回调

<template><view><u-button @click="openMsg">弹出消息</u-button><u-toast ref="uToast" /></view>
</template><script>let that;export default {onLoad() {that = this;that.openMsg();},methods: {openMsg() {that.$refs.uToast.show({type: 'success',title: '操作成功',callback: function () {// 业务方法}});},}}
</script>

确定取消

http请求

异步请求

<script>let that;export default {onLoad() {that = this;let params = {};that.$u.get('/app/test/getInfo', params).then(res => {that.result = res;})that.$u.post('/app/test/save', params).then(res => {that.result = res;})}}
</script>

同步请求

说明：我们在某个地方使用await，意味着调用的函数本身或者生命周期，必须要加上async前缀，否则出错

<script>let that;export default {async onLoad() {let that = this;let result = await that.$u.post('/user/login');// 此处在函数体外写了async，并且使用了await等待返回，所以可以打印ret结果// 意味着这里的console.log是等待了几十毫秒请求返回后才执行的console.log(result);}}
</script>

请求拦截器

common/http.interceptor.js，官方提供的方法如下，具体的可以根据项目来自定义业务处理

const install = (Vue, vm) => {// 此为自定义配置参数，具体参数见上方说明Vue.prototype.$u.http.setConfig({// baseUrl: '', // 请求的本域名// method: 'POST',// // 设置为json，返回后会对数据进行一次JSON.parse()// dataType: 'json',// showLoading: true, // 是否显示请求中的loading// loadingText: '请求中...', // 请求loading中的文字提示// loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms// originalData: false, // 是否在拦截器中返回服务端的原始数据// loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透// // 配置请求头信息// header: {//     'content-type': 'application/json;charset=UTF-8'// },});// 请求拦截部分，如配置，每次请求前都会执行Vue.prototype.$u.http.interceptor.request = (config) => {// 引用token// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式// 见：https://uviewui.com/components/globalVariable.html// config.header.token = vm.token;// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取// config.header.token = vm.$store.state.token;// 方式三，如果token放在了globalData，通过getApp().globalData获取// config.header.token = getApp().globalData.username;// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的// 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值// const token = uni.getStorageSync('token');// config.header.token = token;config.header.Token = 'xxxxxx';// 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值if (config.url == '/user/login') config.header.noToken = true;// 最后需要将config进行returnreturn config;// 如果return一个false值，则会取消本次请求// if(config.url == '/user/rest') return false; // 取消某次请求};// 响应拦截，如配置，每次请求结束都会执行本方法Vue.prototype.$u.http.interceptor.response = (res) => {if (res.code == 200) {// res为服务端返回值，可能有code，result等字段// 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到// 如果配置了originalData为true，请留意这里的返回值return res.result;} else if (res.code == 201) {// 假设201为token失效，这里跳转登录vm.$u.toast('验证失败，请重新登录');setTimeout(() => {// 此为uView的方法，详见路由相关文档vm.$u.route('/pages/user/login')}, 1500)return false;} else {// 如果返回false，则会调用Promise的reject回调，// 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值return false;}};
}export default {install
}

然后在main.js 中调用

import httpInterceptor from '@/common/http.interceptor.js';
Vue.use(httpInterceptor, app);

文件上传

路由跳转

uView 官方文档：路由跳转

参数名	类型	默认值	是否必填	说明
type	String	navigateTo	false	`navigateTo`或`to`对应`uni.navigateTo`，`redirect`或`redirectTo`对应`uni.redirectTo`，`switchTab`或`tab`对应`uni.switchTab`，`reLaunch`对应`uni.reLaunch`，`navigateBack`或`back`对应`uni.navigateBack`
url	String	-	false	`type`为`navigateTo`，`redirectTo`，`switchTab`，`reLaunch`时为必填
delta	Number	1	false	`type`为`navigateBack`时用到，表示返回的页面数
params	Object	-	false	传递的对象形式的参数，如{name: ‘lisa’, age: 18}
animationType	String	pop-in	false	只在APP生效，详见窗口动画
animationDuration	Number	300	false	动画持续时间，单位ms

接口	说明
navigateTo	保留当前页面，跳转到应用内的某个页面，使用`uni.navigateBack`可以返回到原页面navigateTo
redirectTo	关闭当前页面，跳转到应用内的某个页面
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 `getCurrentPages()` 获取当前的页面栈，决定需要返回几层

使用示例

<script>let that;export default {onLoad() {that = this;// 默认跳转that.$u.route({url: '/pages/test/add',params: {name: 'lisa'}});// 重定向跳转that.$u.route({type: 'redirectTo',url: '/pages/test/add',params: {name: 'lisa'}});// tab跳转that.$u.route({type: 'switchTab',url: '/pages/test/add',params: {name: 'lisa'}});// 重置跳转that.$u.route({type: 'reLaunch',url: '/pages/test/add',params: {name: 'lisa'}});// 关闭当前页，返回上一页that.$u.route({type: 'navigateBack'});},}
</script>

弹出表单

基础列表

下拉刷新、上拉加载、添加、编辑、删除

项目截图

技术分享区

【Straw-Uniapp-uView】基于 Uniapp + uView 搭建项目基础模板相关推荐

基于.NetCore3.1搭建项目系列 —— 使用Swagger导出文档 (番外篇)
前言回顾之前的两篇Swagger做Api接口文档,我们大体上学会了如何在net core3.1的项目基础上,搭建一套自动生产API接口说明文档的框架. 本来在Swagger的基础上,前后端开发人员在 ...
Uni-APP+Vite+Vue3+TS+Vant 搭建项目
一.创建工程下载官方的cli代码 https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip 解压缩后执行下面命令即 ...
自定义new Date()格式显示，适用JavaScript / Nodejs / Vue / React / UniApp / 其他基于js工程的项目
定义一个文件去存储下列代码,全局引入就可以使用了 // 直接new就可以了 let time = new Date().Format(); 下面直接上代码: /*create By Jane 时间格式 ...
【uni-app】基于uni-app的Android离线打包，wifi物联网
背景:公司有款产品内置wifi模块,需要Android端提供接口供前端uni-app去调用.主要功能分为开启wifi.关闭wifi.连接wifi. 重点:以下会涉及Android10以下以及Andro ...
基于.NetCore3.1搭建项目系列 —— 认证授权方案之Swagger加锁
1 开始在之前的使用Swagger做Api文档中,我们已经使用Swagger进行开发接口文档,以及更加方便的使用.这一转换,让更多的接口可以以通俗易懂的方式展现给开发人员.而在后续的内容中,为了对a ...
基于.NetCore3.1搭建项目系列 —— 使用Swagger做Api文档(上篇)
前言为什么在开发中,接口文档越来越成为前后端开发人员沟通的枢纽呢? 随着业务的发张,项目越来越多,而对于支撑整个项目架构体系而言,我们对系统业务的水平拆分,垂直分层,让业务系统更加清晰,从而产生一系 ...
基于.NetCore3.1搭建项目系列 —— 使用Swagger做Api文档 (下篇)
前言回顾上一篇文章<使用Swagger做Api文档 >,文中介绍了在.net core 3.1中,利用Swagger轻量级框架,如何引入程序包,配置服务,注册中间件,一步一步的实现,最终 ...
phpexcel 导出循环增加列数_基于.NetCore3.1搭建项目系列 —— 使用Swagger导出文档 (补充篇)...
前言在上一篇导出文档番外篇中,我们已经熟悉了怎样根据json数据导出word的文档,生成接口文档,而在这一篇,将对上一篇进行完善补充,增加多种导出方式,实现更加完善的导出功能. 回顾 1. 获取Sw ...
基于.NetCore3.1搭建项目系列 —— 使用Swagger导出文档 (补充篇)
前言在上一篇导出文档番外篇中,我们已经熟悉了怎样根据json数据导出word的文档,生成接口文档,而在这一篇,将对上一篇进行完善补充,增加多种导出方式,实现更加完善的导出功能. 回顾 1. 获取Sw ...

【Straw-Uniapp-uView】基于 Uniapp + uView 搭建项目基础模板