uniapp

下载工具

下载HBuilderX和微信开发者工具

新建项目

下载好之后在HBuilderX中新建项目，文件–>新建–>项目–>选择uni-app

运行在浏览器、微信开发者工具上

第一次运行在微信开发者工具上需要配置小程序运行目录（还要注意打开微信开发者工具的端口号，设置–>安全设置–>打开端口号）

全局配置

在pages.json的globalStyle中，文档详情

创建新页面和页面的配置

新建目录–>新建vue文件
在pages.json中将新建的文件路径添加到pages中，还可以在style设置每个页面的状态栏、导航条、标题、窗口背景色等
官网详情

配置tabar

在 pages.json 中提供 tabBar 配置
官网详情

condition启动模式配置

启动模式配置，仅开发期间生效， 用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
官网详情

"condition": { //模式配置，仅开发期间生效
	"current": 0, //当前激活的模式（list 的索引项）
	"list": [{
			"name": "swiper", //模式名称
			"path": "pages/component/swiper/swiper", //启动页面，必选
			"query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
		},
		{
			"name": "test",
			"path": "pages/component/switch/switch"
		}
	]
}

组件的基本用法

官网详情

应用生命周期

官网详情

页面生命周期

官网详情

组件生命周期

官网详情

封装request请求并挂载到全局

基础用法，官网详情

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

新建util文件–>api.js

const BASE_URL = 'http://localhost:8080'
export const myRequest = (options)=>{
	return new Promise((resolve,reject)=>{
		uni.request({
			url:BASE_URL+options.url,
			method: options.method || 'GET',
			data: options.data || {},
			success: (res)=>{
				if(res.data.status !== 0) {
					return uni.showToast({
						title: '获取数据失败'
					})
				}
				resolve(res)
			},
			fail: (err)=>{
				uni.showToast({
					title: '请求接口失败'
				})
				reject(err)
			}
		})
	})
}

在main.js中

//引入，挂载
import { myRequest } from './util/api.js'
Vue.prototype.$myRuquest = myRequest

页面直接使用