前言
??緣由
博友有問，狗哥必答
前段時間，博友加本狗微信，詢問uniapp的學(xué)習(xí)方法。本狗資歷淺薄，沒有專門學(xué)過uniapp，只能將自己日常開發(fā)uniapp的基本流程和步驟進行分享，希望可以略盡綿薄之力。感謝如下圖所示的博友朋友的詢問支持，大家的支持才是我進步的動力。
??主要目標(biāo)
實現(xiàn)4大重點
- uniapp項目搭建流程
- uniapp項目常用組件引入方式
- uniapp項目接口封裝策略
- uniapp項目常用配置整理
??快速鏈接
公眾號：JavaDog程序狗
關(guān)注公眾號，發(fā)送 【uniapp】，無任何套路即可獲得
??猜你喜歡
文章推薦
【項目實戰(zhàn)】SpringBoot+vue+iview打造一個極簡個人博客系統(tǒng)
【項目實戰(zhàn)】SpringBoot+uniapp+uview2打造H5+小程序+APP入門學(xué)習(xí)的聊天小項目
【項目實戰(zhàn)】SpringBoot+uniapp+uview2打造一個企業(yè)黑紅名單吐槽小程序
【模塊分層】還不會SpringBoot項目模塊分層？來這手把手教你！
【ChatGPT】手摸手，帶你玩轉(zhuǎn)ChatGPT
【ChatGPT】SpringBoot+uniapp+uview2對接OpenAI，帶你開發(fā)玩轉(zhuǎn)ChatGPT
??猜你想問
如何與狗哥聯(lián)系進行探討
關(guān)注公眾號【JavaDog程序狗】，里面包含狗哥聯(lián)系方式，有問必答
正文
??前置條件
1.HBuilderX
官方IDE下載地址 https://www.dcloud.io/hbuilderx.html
2.npm Node.js 包管理工具
安裝Node等相關(guān)百度即可，簡單易懂
??開始
1.打開工具
雙擊打開HBuilder X
2.創(chuàng)建新項目
- 點擊HBuilder X工具左上角【文件】=》【新建】=》【項目】
- 按照項目業(yè)務(wù)起名，如聊天系統(tǒng)就叫chat-uniapp，博客系統(tǒng)就叫blog-uniapp，這個地方不強制，個人習(xí)慣，本次實例以example-unipp作為項目名，選擇默認模板，示例以vue2版本做基礎(chǔ)，點擊【創(chuàng)建】
- 初始化項目結(jié)構(gòu)如下
3.引入組件
- 本狗在uniapp項目中，常用UI庫及常用工具引入，小項目基本夠用，大家可按需加載
| 插件 | 版本 | 用途 |
|---|---|---|
| uview-ui | ^2.0.31 | 多平臺快速開發(fā)的UI框架 |
| moment | ^2.29.4 | js工具庫 |
uView UI，是全面兼容nvue的uni-app生態(tài)框架，其中還包含API相關(guān)JS函數(shù)，方便封裝易用。
moment是時間js工具庫，常用時間轉(zhuǎn)化格式化等
- 項目根路徑新建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默認內(nèi)置樣式
/* 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，調(diào)試組件
<h3>{{$moment(new Date()).format('yyyy-MM-DD HH:mm:ss')}}</h3>
- 查看頁面是否引入moment成功
5.函數(shù)封裝
- 環(huán)境變量
實際項目會分很多環(huán)境，如dev開發(fā)環(huán)境、local本地環(huán)境、prod生產(chǎn)環(huán)境等，針對不同環(huán)境，其中配置也有不同
在根路徑下新建common/config文件包，在包中新建env.js
// prod-生產(chǎn) dev-開發(fā) local-本地
const env = "local"
// contextPath路徑
const contextPath = "example/v1"
const prod = {
baseUrl: `https://localhost:9001/${contextPath}`, // 線上環(huán)境'
}
const dev = {
baseUrl: `http://localhost:7001/${contextPath}`, // 開發(fā)環(huán)境'
}
const local = {
baseUrl: `http://localhost:8001/${contextPath}`, // 測試環(huán)境'
}
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組件庫，內(nèi)置很多API函數(shù)，直接摘取成熟框架中函數(shù)封裝即可，如Http請求
https://www.uviewui.com/js/http.html
新建\common\http包，在包中新建request.js
// 此vm參數(shù)為頁面的實例，可以通過它引用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: '加載中'
});
// 初始化請求攔截器時，會執(zhí)行此方法，此時data為undefined，賦予默認{}
config.data = config.data || {}
// 根據(jù)custom參數(shù)中配置的是否需要token，添加對應(yīng)的請求頭
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)
})
// 響應(yīng)攔截
uni.$u.http.interceptors.response.use((response) => { /* 對響應(yīng)成功做點什么 可使用async await 做異步操作*/
const data = response.data
// 自定義參數(shù)
const custom = response.config?.custom
if (data.code !== 200) {
// 如果沒有顯式定義custom的toast參數(shù)為false的話，默認對報錯進行toast彈出提示
if (custom.toast !== false) {
uni.$u.toast(data.message)
}
// 如果是401授權(quán)異常則跳轉(zhuǎn)登錄
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) => {
// 對響應(yīng)錯誤做點什么 （statusCode !== 200）
uni.$u.toast("工程師被UFO帶走了-_-!");
return Promise.reject(response)
})
}
引入請求封裝，將app參數(shù)傳遞到配置中
// 引入請求封裝，將app參數(shù)傳遞到配置中
require('@/common/http/request.js')(app)
- API接口
通常將項目中與后臺交互的api接口統(tǒng)一管理
新建\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;
- 最終調(diào)試
在/pages/index/index.vue加入簡單交互，點擊按鈕調(diào)用接口
接口調(diào)用成功，返回值打印
調(diào)試成功后，即可根據(jù)業(yè)務(wù)需求填充內(nèi)容，豐富頁面，迭代開發(fā)
??補充
以上流程均是本狗常用流程，不代表標(biāo)準，大家可以根據(jù)習(xí)慣自行調(diào)整，UI或工具選擇，挑選完全依賴于功能，適合自己的才是最好的。再啰嗦一句，本狗還是喜歡采用webstorm進行開發(fā)，然后用HBuilderX進行編譯，個人喜好，只是推薦。文章來源：http://www.zghlxwxcb.cn/news/detail-427939.html
總結(jié)
本文旨在通過本狗平時項目開發(fā)習(xí)慣，總結(jié)出一套搭建uniapp的常用流程。其實重點在于對官網(wǎng)文檔的理解，不管什么項目，什么框架，只要吃透文檔，任何常見的疑難問題都會迎刃而解。希望廣大博友們在奮筆疾書的搬磚的同時，一定注重官網(wǎng)文檔的翻閱和總結(jié)。文章來源地址http://www.zghlxwxcb.cn/news/detail-427939.html
| JavaDog | 狗屋地址 |
|---|---|
| 個人博客 | https://www.javadog.net |
| 公眾號 | https://mp.weixin.qq.com/s/_vgnXoQ8FSobD3OfRAf5gw |
| CSDN | https://blog.csdn.net/baidu_25986059 |
| 掘金 | https://juejin.cn/user/2172290706716775 |
| 知乎 | https://www.zhihu.com/people/JavaDog |
| 簡書 | https://www.jianshu.com/u/1ff9c6bdb916 |
| gitee | https://gitee.com/javadog-net |
| GitHub | https://github.com/javadog-net |
到了這里，關(guān)于【有問必答】搭建uniapp項目流程手把手教學(xué)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
