前言
uni-app是基于vue開發(fā)雌团，熟悉vue開發(fā)較容易上手
官方文檔：https://uniapp.dcloud.io/README
uni-app創(chuàng)建項(xiàng)目的兩種方法：
- 通過官方開發(fā)工具HBuilderX
- 通過vue-cli (本文使用該方法)
創(chuàng)建項(xiàng)目
- 安裝vue-cli （已安裝請忽略）
npm install -g @vue/cli
- 使用cli 下載正式版uni-app模板
vue create -p dcloudio/uni-preset-vue my-project(自定義項(xiàng)目名稱)
-
選擇模版
選擇合適的模版（官方推薦使用Hello uni-app）
image.png
運(yùn)行項(xiàng)目
- 進(jìn)入項(xiàng)目目錄
cd my-project
- 運(yùn)行（新建項(xiàng)目，默認(rèn)已安裝依賴）
- 測試環(huán)境
npm run dev:mp-weixin // 微信小程序
- 生成環(huán)境
npm run build:mp-weixin
-
更多平臺指令
image.png
-
調(diào)試
運(yùn)行后生成如下文件 dev-測試環(huán)境 build-生產(chǎn)環(huán)境
mp-weixin就是微信小程序編譯后的文件聘惦，使用對應(yīng)調(diào)試平臺進(jìn)行調(diào)試
image.png
新建項(xiàng)目無設(shè)置appid,可以使用游客模式，也可是選擇填寫自己的appid,下面會涉及對應(yīng)配置
image.png
目錄結(jié)構(gòu)及配置
-
目錄結(jié)構(gòu)
image.png - 主要配置項(xiàng)
-
manifest.json
不同平臺下配置相應(yīng)平臺所需的參數(shù)
image.png -
各平臺共用的路由儒恋、窗口樣式配置
image.png -
main.js
與vue一致善绎，可以配置全局屬性和方法
image.png
請求更改-引入Flyio
- 安裝依賴
npm install flyio
- 使用
- 創(chuàng)建公共方法黔漂，如request.js，引入官方攔截器禀酱，并對外暴露該方法
let Fly = require("flyio/dist/npm/wx")
let fly = new Fly()
//設(shè)置超時
fly.config.timeout = 30000;
// 設(shè)置請求基地址,可以區(qū)分生產(chǎn)和開發(fā)環(huán)境
// 如果接口環(huán)境通過域名區(qū)分可方便設(shè)置
// 如果接口環(huán)境通過host區(qū)分炬守，則不用做區(qū)分
fly.config.baseURL = process.env.NODE_ENV === 'production'? 'https://test.com' : 'https://build.com'
// 添加請求攔截器
fly.interceptors.request.use((request) => {
// 在發(fā)送請求之前做些什么
let token = uni.getStorageSync('token')
if (token) {
request.headers['token'] = token
}
return request
}, function(error) {
// 對請求錯誤做些什么
return Promise.reject(error)
})
// 添加響應(yīng)攔截器
fly.interceptors.response.use((res) => {
// 對響應(yīng)數(shù)據(jù)做些事
if (!res.data) {
return Promise.reject(res)
} else {
return res.data
}
}, (error) => {
return Promise.reject(error)
})
export default fly
- 創(chuàng)建具體的請求，如api.js
// 根據(jù)自己的目錄引入request.js
import fly from '../utils/request'
export function postApi(params){
return fly.post('/postApi', params)
}
export function getApi(params){
return fly.get('/getApi', params)
}
- man.js 中設(shè)置為全局方法
import api from "./api/api.js"
Vue.prototype.$api = api
- 在vue頁面中調(diào)用
this.$api.postApi(params).then(res => {})
