前言
uni-app是基于vue开发，熟悉vue开发较容易上手
官方文档：https://uniapp.dcloud.io/README
uni-app创建项目的两种方法：
- 通过官方开发工具HBuilderX
- 通过vue-cli (本文使用该方法)
创建项目
- 安装vue-cli （已安装请忽略）
npm install -g @vue/cli
- 使用cli 下载正式版uni-app模板
vue create -p dcloudio/uni-preset-vue my-project(自定义项目名称)
-
选择模版
选择合适的模版（官方推荐使用Hello uni-app）
image.png
运行项目
- 进入项目目录
cd my-project
- 运行（新建项目，默认已安装依赖）
- 测试环境
npm run dev:mp-weixin // 微信小程序
- 生成环境
npm run build:mp-weixin
-
更多平台指令
image.png
-
调试
运行后生成如下文件 dev-测试环境 build-生产环境
mp-weixin就是微信小程序编译后的文件，使用对应调试平台进行调试
image.png
新建项目无设置appid,可以使用游客模式，也可是选择填写自己的appid,下面会涉及对应配置
image.png
目录结构及配置
-
目录结构
image.png - 主要配置项
-
manifest.json
不同平台下配置相应平台所需的参数
image.png -
各平台共用的路由、窗口样式配置
image.png -
main.js
与vue一致，可以配置全局属性和方法
image.png
请求更改-引入Flyio
- 安装依赖
npm install flyio
- 使用
- 创建公共方法，如request.js，引入官方拦截器，并对外暴露该方法
let Fly = require("flyio/dist/npm/wx")
let fly = new Fly()
//设置超时
fly.config.timeout = 30000;
// 设置请求基地址,可以区分生产和开发环境
// 如果接口环境通过域名区分可方便设置
// 如果接口环境通过host区分，则不用做区分
fly.config.baseURL = process.env.NODE_ENV === 'production'? 'https://test.com' : 'https://build.com'
// 添加请求拦截器
fly.interceptors.request.use((request) => {
// 在发送请求之前做些什么
let token = uni.getStorageSync('token')
if (token) {
request.headers['token'] = token
}
return request
}, function(error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
fly.interceptors.response.use((res) => {
// 对响应数据做些事
if (!res.data) {
return Promise.reject(res)
} else {
return res.data
}
}, (error) => {
return Promise.reject(error)
})
export default fly
- 创建具体的请求，如api.js
// 根据自己的目录引入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 中设置为全局方法
import api from "./api/api.js"
Vue.prototype.$api = api
- 在vue页面中调用
this.$api.postApi(params).then(res => {})
