文章目錄

• 一、項目簡介
• • 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 搭建项目基础模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。