1.组件
- view 类似于传统html中的div view
- scroll-view 可滚动的区域 scroll-view
- swiper 一般用于左右滑动或上下滑动,比如banner轮播图。swiper
- text 用于包裹文本内容 text
- 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.getUserInfo(OBJECT)
uView: https://v1.uviewui.com/components/intro.html