【Straw-Uniapp-uView】基于 Uniapp + uView 搭建项目基础模板
文章目录
- 一、项目简介
-
- 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进行return
return 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>
弹出表单
基础列表
下拉刷新、上拉加载、添加、编辑、删除
项目截图
 |
 |
 |
|---|---|---|
 |
 |
 |
 |
 |
 |
技术分享区
