前言

uni-app是基于vue开发，熟悉vue开发较容易上手

官方文档：https://uniapp.dcloud.io/README

uni-app创建项目的两种方法：

1. 通过官方开发工具HBuilderX
2. 通过vue-cli (本文使用该方法)

创建项目

1. 安装vue-cli （已安装请忽略）

npm install -g @vue/cli

2. 使用cli 下载正式版uni-app模板

vue create -p dcloudio/uni-preset-vue my-project(自定义项目名称)

3. 选择模版
   选择合适的模版（官方推荐使用Hello uni-app）

   
   
   image.png

运行项目

1. 进入项目目录

cd my-project

2. 运行（新建项目，默认已安装依赖）

• 测试环境

npm run dev:mp-weixin // 微信小程序

• 生成环境

npm run build:mp-weixin

• 更多平台指令

  
  
  image.png

3. 调试
   运行后生成如下文件 dev-测试环境 build-生产环境
   mp-weixin就是微信小程序编译后的文件，使用对应调试平台进行调试

   
   
   image.png
   
   

   新建项目无设置appid,可以使用游客模式，也可是选择填写自己的appid,下面会涉及对应配置

   
   
   image.png

目录结构及配置

1. 目录结构

   
   
   image.png
2. 主要配置项

• manifest.json
  不同平台下配置相应平台所需的参数

  
  
  image.png

• 各平台共用的路由、窗口样式配置

  
  
  image.png

• main.js
  与vue一致，可以配置全局属性和方法

  
  
  image.png

请求更改-引入Flyio

1. 安装依赖

npm install flyio

2. 使用

• 创建公共方法，如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 => {})