文章目錄

• 一、項(xiàng)目簡(jiǎn)介
• • 1、項(xiàng)目概述
  • 2、相關(guān)鏈接
  • 3、基礎(chǔ)功能
  • 4、后端搭建
• 二、開(kāi)發(fā)手冊(cè)
• • 全局約束
  • • 全局樣式約束
    • 全局that約束
  • 代碼模板
  • • 表單
    • 消息提示
    • 確定取消
    • http請(qǐng)求
    • 請(qǐng)求攔截器
    • 文件上傳
    • 路由跳轉(zhuǎn)
    • 彈出表單
    • 基礎(chǔ)列表
• 項(xiàng)目截圖
• 技術(shù)分享區(qū)

一、項(xiàng)目簡(jiǎn)介

1、項(xiàng)目概述

基于 Uniapp + uView 搭建項(xiàng)目基礎(chǔ)模板，以實(shí)際開(kāi)發(fā)總結(jié)為準(zhǔn)，非常具有實(shí)戰(zhàn)意義

實(shí)際開(kāi)發(fā)中，我們會(huì)遇到各式各樣的問(wèn)題，雖然網(wǎng)上已經(jīng)有很多 UI 框架了，但是實(shí)際使用的時(shí)候，還是要不斷的搭建一些基礎(chǔ)功能和邏輯，比如登錄、注冊(cè)、找回密碼、退出等，本項(xiàng)目的目的就是直接使用搭建好的模板創(chuàng)建企業(yè)中實(shí)際需要的項(xiàng)目

2、相關(guān)鏈接

• Straw-Uniapp-uView 源碼
• Straw 系列其他項(xiàng)目
• Uniapp 官網(wǎng)
• uView 官網(wǎng)

3、基礎(chǔ)功能

仔細(xì)讀一下 uView 官方文檔不難發(fā)現(xiàn)，已經(jīng)提供了很多工具，代碼的封裝等操作，這里我就不一一闡述了，列舉一下常用的功能

功能官方地址

表單驗(yàn)證	https://www.uviewui.com/components/form.html
內(nèi)容為空	https://www.uviewui.com/components/empty.html
加載更多	https://www.uviewui.com/components/loadMore.html
Http 請(qǐng)求	https://www.uviewui.com/js/http.html
時(shí)間格式	https://www.uviewui.com/js/time.html
路由跳轉(zhuǎn)	https://www.uviewui.com/js/route.html
規(guī)則校驗(yàn)	https://www.uviewui.com/js/test.html

4、后端搭建

很多小伙伴問(wèn)這個(gè)項(xiàng)目有沒(méi)有帶后端的項(xiàng)目，這里我想的是實(shí)際開(kāi)發(fā)中，也不可能直接使用的是我創(chuàng)建好的這個(gè)項(xiàng)目，因?yàn)楹芏嗥渌蛩?#xff0c;你不可能直接就能使用別人的模板，比如實(shí)際項(xiàng)目是一個(gè)嵌入到老項(xiàng)目的情況，就不適用整個(gè)項(xiàng)目直接嵌入

后端只需要滿(mǎn)足登錄邏輯即可：用戶(hù)登錄獲取 token，然后使用 token 獲取用戶(hù)信息（用戶(hù)基本信息、角色信息、權(quán)限信息），每次請(qǐng)求的頭部增加 token 驗(yàn)證即可

所以這里我并沒(méi)有直接將這個(gè)前端項(xiàng)目綁定一個(gè)后端項(xiàng)目，主要目的是方便擴(kuò)展

后端的實(shí)現(xiàn)通常是 springboot + shiro + jwt + redis
實(shí)現(xiàn)的前后端分離，這里我也是整理了一個(gè)項(xiàng)目，方便使用，或者集成到公司其他項(xiàng)目，Straw-Shiro-Jwt

二、開(kāi)發(fā)手冊(cè)

全局約束

全局樣式約束

全局that約束

由于很多方法涉及到當(dāng)前內(nèi)部 this 的限制，需要手動(dòng)定義that來(lái)取代，所以我們直接一開(kāi)始就定義 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>

• 消息關(guān)閉后跳轉(zhuǎn)

<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>

• 消息關(guān)閉后回調(diào)

<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 () {// 業(yè)務(wù)方法}});},}} </script>

確定取消

http請(qǐng)求

• 異步請(qǐng)求

<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>

• 同步請(qǐng)求

說(shuō)明：我們?cè)谀硞€(gè)地方使用await，意味著調(diào)用的函數(shù)本身或者生命周期，必須要加上async前綴，否則出錯(cuò)

<script>let that;export default {async onLoad() {let that = this;let result = await that.$u.post('/user/login');// 此處在函數(shù)體外寫(xiě)了async，并且使用了await等待返回，所以可以打印ret結(jié)果// 意味著這里的console.log是等待了幾十毫秒請(qǐng)求返回后才執(zhí)行的console.log(result);}} </script>

請(qǐng)求攔截器

common/http.interceptor.js，官方提供的方法如下，具體的可以根據(jù)項(xiàng)目來(lái)自定義業(yè)務(wù)處理

const install = (Vue, vm) => {// 此為自定義配置參數(shù)，具體參數(shù)見(jiàn)上方說(shuō)明Vue.prototype.$u.http.setConfig({// baseUrl: '', // 請(qǐng)求的本域名// method: 'POST',// // 設(shè)置為json，返回后會(huì)對(duì)數(shù)據(jù)進(jìn)行一次JSON.parse()// dataType: 'json',// showLoading: true, // 是否顯示請(qǐng)求中的loading// loadingText: '請(qǐng)求中...', // 請(qǐng)求loading中的文字提示// loadingTime: 800, // 在此時(shí)間內(nèi)，請(qǐng)求還沒(méi)回來(lái)的話(huà)，就顯示加載中動(dòng)畫(huà)，單位ms// originalData: false, // 是否在攔截器中返回服務(wù)端的原始數(shù)據(jù)// loadingMask: true, // 展示loading的時(shí)候，是否給一個(gè)透明的蒙層，防止觸摸穿透// // 配置請(qǐng)求頭信息// header: {// 'content-type': 'application/json;charset=UTF-8'// },});// 請(qǐng)求攔截部分，如配置，每次請(qǐng)求前都會(huì)執(zhí)行Vue.prototype.$u.http.interceptor.request = (config) => {// 引用token// 方式一，存放在vuex的token，假設(shè)使用了uView封裝的vuex方式// 見(jiàn)：https://uviewui.com/components/globalVariable.html// config.header.token = vm.token;// 方式二，如果沒(méi)有使用uView封裝的vuex方法，那么需要使用$store.state獲取// config.header.token = vm.$store.state.token;// 方式三，如果token放在了globalData，通過(guò)getApp().globalData獲取// config.header.token = getApp().globalData.username;// 方式四，如果token放在了Storage本地存儲(chǔ)中，攔截是每次請(qǐng)求都執(zhí)行的// 所以哪怕您重新登錄修改了Storage，下一次的請(qǐng)求將會(huì)是最新值// const token = uni.getStorageSync('token');// config.header.token = token;config.header.Token = 'xxxxxx';// 可以對(duì)某個(gè)url進(jìn)行特別處理，此url參數(shù)為this.$u.get(url)中的url值if (config.url == '/user/login') config.header.noToken = true;// 最后需要將config進(jìn)行returnreturn config;// 如果return一個(gè)false值，則會(huì)取消本次請(qǐng)求// if(config.url == '/user/rest') return false; // 取消某次請(qǐng)求};// 響應(yīng)攔截，如配置，每次請(qǐng)求結(jié)束都會(huì)執(zhí)行本方法Vue.prototype.$u.http.interceptor.response = (res) => {if (res.code == 200) {// res為服務(wù)端返回值，可能有code，result等字段// 這里對(duì)res.result進(jìn)行返回，將會(huì)在this.$u.post(url).then(res => {})的then回調(diào)中的res的到// 如果配置了originalData為true，請(qǐng)留意這里的返回值return res.result;} else if (res.code == 201) {// 假設(shè)201為token失效，這里跳轉(zhuǎn)登錄vm.$u.toast('驗(yàn)證失敗，請(qǐng)重新登錄');setTimeout(() => {// 此為uView的方法，詳見(jiàn)路由相關(guān)文檔vm.$u.route('/pages/user/login')}, 1500)return false;} else {// 如果返回false，則會(huì)調(diào)用Promise的reject回調(diào)，// 并將進(jìn)入this.$u.post(url).then().catch(res=>{})的catch回調(diào)中，res為服務(wù)端的返回值return false;}}; }export default {install }

然后在main.js 中調(diào)用

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

文件上傳

路由跳轉(zhuǎn)

• uView 官方文檔：路由跳轉(zhuǎn)

參數(shù)名類(lèi)型默認(rèn)值是否必填說(shuō)明

type	String	navigateTo	false	navigateTo或to對(duì)應(yīng)uni.navigateTo，redirect或redirectTo對(duì)應(yīng)uni.redirectTo，switchTab或tab對(duì)應(yīng)uni.switchTab，reLaunch對(duì)應(yīng)uni.reLaunch，navigateBack或back對(duì)應(yīng)uni.navigateBack
url	String	-	false	type為navigateTo，redirectTo，switchTab，reLaunch時(shí)為必填
delta	Number	1	false	type為navigateBack時(shí)用到，表示返回的頁(yè)面數(shù)
params	Object	-	false	傳遞的對(duì)象形式的參數(shù)，如{name: ‘lisa’, age: 18}
animationType	String	pop-in	false	只在APP生效，詳見(jiàn)窗口動(dòng)畫(huà)
animationDuration	Number	300	false	動(dòng)畫(huà)持續(xù)時(shí)間，單位ms

接口說(shuō)明

navigateTo	保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用uni.navigateBack可以返回到原頁(yè)面navigateTo
redirectTo	關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面
switchTab	跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面
reLaunch	關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面
navigateBack	關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。可通過(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層

使用示例

<script>let that;export default {onLoad() {that = this;// 默認(rèn)跳轉(zhuǎn)that.$u.route({url: '/pages/test/add',params: {name: 'lisa'}});// 重定向跳轉(zhuǎn)that.$u.route({type: 'redirectTo',url: '/pages/test/add',params: {name: 'lisa'}});// tab跳轉(zhuǎn)that.$u.route({type: 'switchTab',url: '/pages/test/add',params: {name: 'lisa'}});// 重置跳轉(zhuǎn)that.$u.route({type: 'reLaunch',url: '/pages/test/add',params: {name: 'lisa'}});// 關(guān)閉當(dāng)前頁(yè)，返回上一頁(yè)that.$u.route({type: 'navigateBack'});},} </script>

彈出表單

基礎(chǔ)列表

下拉刷新、上拉加載、添加、編輯、刪除

項(xiàng)目截圖

技術(shù)分享區(qū)

總結(jié)

以上是生活随笔為你收集整理的【Straw-Uniapp-uView】基于 Uniapp + uView 搭建项目基础模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。