【有問必答】搭建uniapp項目流程手把手教學
uniapp項目開發基本流程步驟
1. uniapp項目搭建流程
2. uniapp項目常用組件引入方式
3. uniapp項目接口封裝策略
4. uniapp項目常用配置整理
前言
??緣由
博友有問，狗哥必答
前段時間，博友加本狗微信，詢問uniapp的學習方法。本狗資歷淺薄，沒有專門學過uniapp，只能將自己日常開發uniapp的基本流程和步驟進行分享，希望可以略盡綿薄之力。感謝如下圖所示的博友朋友的詢問支持，大家的支持才是我進步的動力。
??主要目標
實現4大重點
- uniapp項目搭建流程
- uniapp項目常用組件引入方式
- uniapp項目接口封裝策略
- uniapp項目常用配置整理
??快速鏈接
公眾號：JavaDog程序狗
關注公眾號，發送 【uniapp】，無任何套路即可獲得
??猜你喜歡
文章推薦
【項目實戰】SpringBoot+vue+iview打造一個極簡個人博客系統
【項目實戰】SpringBoot+uniapp+uview2打造H5+小程序+APP入門學習的聊天小項目
【項目實戰】SpringBoot+uniapp+uview2打造一個企業黑紅名單吐槽小程序
【模塊分層】還不會SpringBoot項目模塊分層？來這手把手教你！
【ChatGPT】SpringBoot+uniapp+uview2對接OpenAI，帶你開發玩轉ChatGPT
??猜你想問
如何與狗哥聯系進行探討
關注公眾號【JavaDog程序狗】，里面包含狗哥聯系方式，有問必答
正文
??前置條件
1.HBuilderX
2.npm Node.js 包管理工具
安裝Node等相關百度即可，簡單易懂
??開始
1.打開工具
雙擊打開HBuilder X
2.創建新項目
- 點擊HBuilder X工具左上角【文件】=》【新建】=》【項目】
- 按照項目業務起名，如聊天系統就叫chat-uniapp，博客系統就叫blog-uniapp，這個地方不強制，個人習慣，本次實例以example-unipp作為項目名，選擇默認模板，示例以vue2版本做基礎，點擊【創建】
- 初始化項目結構如下
3.引入組件
- 本狗在uniapp項目中，常用UI庫及常用工具引入，小項目基本夠用，大家可按需加載
| 插件 | 版本 | 用途 |
|---|---|---|
| uview-ui | ^2.0.31 | 多平臺快速開發的UI框架 |
| moment | ^2.29.4 | js工具庫 |
uView UI，是全面兼容nvue的uni-app生態框架，其中還包含API相關JS函數，方便封裝易用。
moment是時間js工具庫，常用時間轉化格式化等
- 項目根路徑新建package.json，配置上述依賴組件
{
"dependencies": {
"moment": "^2.29.4",
"uview-ui": "^2.0.31"
}
}
- 項目根路徑下拉取依賴
右擊項目根目錄，點擊【使用命令行窗口打開所在目錄】，或者通過命令行進入項目路徑都可
npm i
查看成功拉取依賴
4.組件配置
- 配置uview
- 在App.vue中引入uview的scss
- 在main.js中引入uview
import uView from 'uview-ui'
Vue.use(uView)
- 將根路徑下uni.scss中，將uview的theme.scss 覆蓋uniapp默認內置樣式
/* uni.scss */
@import 'uview-ui/theme.scss';
- 在pages.json中加入easycom
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
- 加入uview組件，在/pages/index/index.vue加入簡單button組件
<u-button type="primary" text="測試"></u-button>
- 啟動項目，測試是否引入成功
點擊【運行】=》【運行到瀏覽器】=》【chrome】，打開顯示button即為成功
- 配置moment
- 在main.js中引入moment
// 引入moment
import moment from 'moment';
// 掛載到vue原型上，全局注冊
Vue.prototype.$moment = moment;
- /pages/index/index.vue中引入moment，調試組件
<h3>{{$moment(new Date()).format('yyyy-MM-DD HH:mm:ss')}}</h3>
- 查看頁面是否引入moment成功
5.函數封裝
- 環境變量
實際項目會分很多環境，如dev開發環境、local本地環境、prod生產環境等，針對不同環境，其中配置也有不同
在根路徑下新建common/config文件包，在包中新建env.js
// prod-生產 dev-開發 local-本地
const env = "local"
// contextPath路徑
const contextPath = "example/v1"
const prod = {
baseUrl: `https://localhost:9001/${contextPath}`, // 線上環境'
}
const dev = {
baseUrl: `http://localhost:7001/${contextPath}`, // 開發環境'
}
const local = {
baseUrl: `http://localhost:8001/${contextPath}`, // 測試環境'
}
const config = {
dev,
prod,
local,
}
export default config[env]
掛載vue原型，全局注冊config
import config from '@/common/config/env.js'
Vue.prototype.$config = config;
- Http請求
通常將項目中與后臺交互中Http請求做封裝
因本項目采用uview為UI組件庫，內置很多API函數，直接摘取成熟框架中函數封裝即可，如Http請求
https://www.uviewui.com/js/http.html
新建\common\http包，在包中新建request.js
// 此vm參數為頁面的實例，可以通過它引用vuex中的變量
import env from '@/common/config/env.js'
module.exports = (vm) => {
// 初始化請求配置
uni.$u.http.setConfig((config) => {
/* config 為默認全局配置*/
config.baseURL = env.baseUrl; /* 根域名 */
config.custom = { catch: true, auth: true }
return config
})
// 請求攔截
uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做異步操作
uni.showLoading({
title: '加載中'
});
// 初始化請求攔截器時，會執行此方法，此時data為undefined，賦予默認{}
config.data = config.data || {}
// 根據custom參數中配置的是否需要token，添加對應的請求頭
if(config?.custom?.auth) {
// 可以在此通過vm引用vuex中的變量，具體值在vm.$store.state中
//config.header['Access-Token'] = vm.$store.state.token
config.header['Access-Token'] = uni.getStorageSync("access_token")
}
return config
}, config => { // 可使用async await 做異步操作
return Promise.reject(config)
})
// 響應攔截
uni.$u.http.interceptors.response.use((response) => { /* 對響應成功做點什么 可使用async await 做異步操作*/
const data = response.data
// 自定義參數
const custom = response.config?.custom
if (data.code !== 200) {
// 如果沒有顯式定義custom的toast參數為false的話，默認對報錯進行toast彈出提示
if (custom.toast !== false) {
uni.$u.toast(data.message)
}
// 如果是401授權異常則跳轉登錄
if(401 == data.code){
uni.removeStorageSync("Access-Token")
uni.removeStorageSync("userInfo")
setTimeout(()=>{
uni.navigateTo({
url: '/pages/login/index'
});
},1000)
}
// 如果需要catch返回，則進行reject
if (custom?.catch) {
return Promise.reject(data)
} else {
// 否則返回一個pending中的promise，請求不會進入catch中
return new Promise(() => { })
}
}
uni.hideLoading();
return data === undefined ? {} : data
}, (response) => {
// 對響應錯誤做點什么 （statusCode !== 200）
uni.$u.toast("工程師被UFO帶走了-_-!");
return Promise.reject(response)
})
}
引入請求封裝，將app參數傳遞到配置中
// 引入請求封裝，將app參數傳遞到配置中
require('@/common/http/request.js')(app)
- API接口
通常將項目中與后臺交互的api接口統一管理
新建\common\api包，在包中新建index.js，其中舉例login接口
const http = uni.$u.http
const api = {
/**
* 登錄
*/
login(params) {
return http.get('/login', {params})
},
}
export default api;
掛載vue原型，全局注冊api
import api from "@/common/api"
Vue.prototype.$api = api;
- 最終調試
在/pages/index/index.vue加入簡單交互，點擊按鈕調用接口
接口調用成功，返回值打印
調試成功后，即可根據業務需求填充內容，豐富頁面，迭代開發
??補充
以上流程均是本狗常用流程，不代表標準，大家可以根據習慣自行調整，UI或工具選擇，挑選完全依賴于功能，適合自己的才是最好的。再啰嗦一句，本狗還是喜歡采用webstorm進行開發，然后用HBuilderX進行編譯，個人喜好，只是推薦。
總結
本文旨在通過本狗平時項目開發習慣，總結出一套搭建uniapp的常用流程。其實重點在于對官網文檔的理解，不管什么項目，什么框架，只要吃透文檔，任何常見的疑難問題都會迎刃而解。希望廣大博友們在奮筆疾書的搬磚的同時，一定注重官網文檔的翻閱和總結。
posted on 2023-04-28 10:49 JavaDog程序狗 閱讀(612) 評論(6) 編輯 收藏 舉報
