uniapp初体验

1.组件

1. view 类似于传统html中的div view
2. scroll-view 可滚动的区域 scroll-view
3. swiper 一般用于左右滑动或上下滑动，比如banner轮播图。swiper
4. text 用于包裹文本内容 text
5. image 图片 类似传统html的img标签 image

2.生命周期

应用生命周期 应用生命周期

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发

注意：应用生命周期仅可在App.vue中监听，在其它页面监听无效

页面生命周期 页面生命周期

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参)， 可用于数据请求
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项

组件生命周期 组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同

面试答法：uniapp生命周期分为三个方面：应用级别生命周期，页面级别生命周期，组件级别生命周期； 应用级别生命周期在app.vue中执行的代表整个app的生命周期，常用的生命周期函数有四个…（说出那四个),页面级别生命周期是每个pages页面的生命周期，常用的有7个生命周期… (说出那7个)

其中应用的生命周期要比页面的生命周期执行速度快

首次进去app会执行：应用级别生命周期：onLaunch，onShow，页面级生命周期：onLoad，onShow，onReady

app进入后台会执行：应用的onHide 与 页面的onHide

app进入前台(非第一次)：应用的onShow与页面的onShow

4.网络请求

uni.request(Object) 发起网络请求 uni.request(OBJECT)

uni.request({
				url: 'http://testapp.xuexiluxian.cn/slider/getSliders',// 请求地址
				header:{
					"Content-Type": "application/json"
				},// 请求头
				success: (res) => {
					console.log(res.data);
				},// 成功返回
			});

// 请求封装
import { EncryptMd5,Encrypt } from "@/utils/aes/aes.js"

export default {
  /*
  	提取公共部分：
  	 baseUrl
  	 header,
  	 method,
  	 dataType
  */
	common: {
		baseUrl: 'http://testapp.xuexiluxian.cn', // 请求基地址
		data: {}, // 请求参数
		header: {
			"Content-Type": "application/json",
			// "Content-Type": "application/x-www-form-urlencoded",
			"Source": '',
		}, // 请求头
		method: 'GET', // 请求方式
		dataType: "json" , // 请求响应格式
	},
	request(options = {}) {
		// 时间戳
		let dataTime = new Date().getTime();
		// 设置请求来源
		this.common.header.Source = Encrypt("http://testapp.xuexiluxian.cn::"+dataTime+'::'+EncryptMd5('http://testapp.xuexiluxian.cn' + dataTime))
    // 后面再解释意思
		let roce = ['/course/history/recordHistory','/member/getInfo']
    
    // 拼接完整请求地址
		let url = options.url;
		options.url = this.common.baseUrl + options.url;
    // 请求参数 post
		options.data = options.data || this.common.data;
    // 请求头
		let headers = {
			...options.header,
			...this.common.header
		};
		options.header = headers;
		// console.log(options.header)
    // 返回数据格式
		options.dataType = options.dataType || this.common.dataType;
    
		return new Promise((res, rej) => {
			let flag = roce.includes(url);
			if(!flag){
				uni.showLoading({
					title: '加载中'
				})
			}
		 
			uni.request({
				...options,
				success: (result) => {
					// console.log(result)
          // 10006 是登录成功
					if(result.data.meta.code === '10006'){
						setTimeout(function() {
							uni.hideLoading();
						}, 100)
						return res(result.data)
						// 验证码过期
					}else if(result.data.meta.code === '50002') {
						// 移除token
						uni.removeStorageSync('token');
						uni.navigateTo({
							url: '/pages/login/login.vue',
							success: () => {
								setTimeout(function() {
									uni.hideLoading();
								}, 100)
							}
						})
					}
          // 其他的接口成功返回是 200
          // !200 就是请求失败
						if (result.data.meta.code != 200) {
							setTimeout(function() {
								uni.hideLoading();
							}, 100)
							return rej(result.data);
						}else {
							setTimeout(function() {
								uni.hideLoading();
							}, 100)
							res(result.data)
						}
				}
			})
		})
		
	}
}

5.路由与页面跳转

uniapp的路由， 在pages文件下新建页面，且在pages.json中的pages下注册

若是tabbar页面，则必须在pages.json中tabbar下注册，否则失效

跳转tabbar页面：uni.switchTab(OBJECT)

非tabbar页面跳转，可以返回 uni.navigateTo(OBJECT)

关闭当前页面 前往其他页面 回不去 非tabbar： uni.redirectTo(OBJECT)

关闭当前页面 前往其他页面 所有页面，若为tabbar页面则不能带参数：uni.reLaunch(OBJECT)

关闭当前页面，返回上一页面或多级页面：uni.navigateBack(OBJECT)

app内跳转外部链接： plus.runtime.openURL(跳转的链接地址，必须是http,https开头的)

// uniapp的跳转
	uni.switchTab({
		url: '../list/list'
	}) 	
// 非tabbar页面 可以返回
	uni.navigateTo({
		url: '../list/list?id='+'dddd'
	})
// 关闭当前页面 前往其他页面  回不去 非tabbar 
	uni.redirectTo({
		url: '../list/list'
	})
			
// 关闭当前页面 前往其他页面 所有页面
// tabbar页面不能带参数
	uni.reLaunch({
		url: '../list/list'
	})
			
// 跳转外部链接
// plus.runtime.openURL('http:www.baidu.com')

6.其他了解

支付：uni.requestPayment(OBJECT)

登录：uni.login(OBJECT)

获取用户信息：uni.getUserInfo(OBJECT)

扫一扫：uni.scanCode(OBJECT)

uView: https://v1.uviewui.com/components/intro.html