uniapp整体框架和知识点uniapp的整体框架和知识点
uniapp介绍：
⼀套代码可以运⾏在多个平台
扩展灵活，学习成本低
⼀、框架
uniapp的配置
1、page.json
globalStyle : ⽤于设置应⽤的导航条、标题、窗⼝背景⾊等。
pages： 这个节点配置应⽤由哪些页⾯组成
pages节点的第⼀项为应⽤⼊⼝页（即⾸页）
style:⽤于设置每个页⾯的导航条、标题、窗⼝背景⾊等。
{
"pages": [
{
"path": "pages/index/index",
"style": { ... }
}, {
"path": "pages/login/login",
"style": { ... }
}
]
}
tabBar：配置项指定⼀级导航栏，可以当成底部导航栏，
只能配置最少2个、最多5个 tab
uni.scss： 整体控制应⽤的风格的控制，可以使⽤变量，嵌套
App.vue：是uni-app的主组件，所有页⾯都是在App.vue下进⾏切换的，是页⾯⼊⼝⽂件
main.js ：是uni-app的⼊⼝⽂件，主要作⽤是初始化vue实例、定义全局组件、使⽤需要的插件如vuex ⽣命周期
应⽤⽣命周期
应⽤⽣命周期仅可在App.vue中监听，在其它页⾯监听⽆效：
1. onLaunch： 当uni-app 初始化完成时触发（全局只触发⼀次）
2. onShow：从后台进⼊前台显⽰
3. onHide ：当 uni-app 从前台进⼊后台
页⾯⽣命周期
1. onLoad：监听页⾯加载，其参数为上个页⾯传递的数据，参数类型为 Object（⽤于页⾯传参）
2. onUnload：监听页⾯卸载
3. onShow：监听页⾯显⽰，页⾯显⽰在屏幕上即触发
4. onHide：监听页⾯隐藏
5. onReady：监听页⾯初次渲染完成
组件⽣命周期
页⾯通讯
⼆、uniapp组件
介绍：uni-app的组件，分为基础组件和扩展组件
基础组件：div->view，span->text、a->navigator
easycom组件规范
1. 传统vue组件，需要安装、引⽤、注册，三个步骤后才能使⽤组件。easycom将其精简为⼀步
2. 只要组件安装在项⽬的components⽬录下或uni_modules⽬录下，并符合components/组件名称/组件名称.vue⽬录结构。就可以
不⽤引⽤、注册，直接在页⾯中使⽤
常⽤的⼏个基础组件
1. 路由与页⾯跳转：
类似HTML中的< a >组件
但只能跳转本地页⾯
⽬标页⾯必须在pages.json中注册
2. progress(进度条)，scroll-view（视图滚动），
swiper（滑块视图，⽐如轮播）
三、uniapp的API
⽹络请求，相当于ajax
参数：
url（服务器地址），data（请求的参数）
header（App、H5端会⾃动带上cookie），
timeout（超时时间）
method（http请求的类型，默认GET），
dataType（⽂档类型，默认json⽂档），
success（成功的回调），fail（失败的回调）
例⼦：
url:'ample/request',//仅为⽰例，并⾮真实接⼝地址。
data:{
text:'quest'
},
header:{
'custom-header':'hello'//⾃定义请求头信息
},
success:(res)=>{
console.log(res.data);
< ='request success';
}
});
路由与页⾯跳转
标签路由跳转
api路由跳转
1. uni.navigateTo：保留当前页⾯，跳转到应⽤内的某个页⾯，使⽤uni.navigateBack可以返回到原页⾯
2. uni.navigateBack：关闭当前页⾯，返回上⼀页⾯或多级页⾯
3. directTo：关闭当前页⾯，跳转到应⽤内的某个页⾯。
4. Launch：关闭所有页⾯，打开到应⽤内的某个页⾯。
5. uni.switchTab：跳转到 tabBar 页⾯，并关闭其他所有⾮ tabBar 页⾯。
页⾯间通信
页⾯间通讯总结：
页⾯间通讯分为两种，⼀种是url传参，⼀种是事件通讯机制
url传参：url后？可以携带参数，被打开页⾯在⽣命周期onLoad⾥的参数可以获取到url携带的参数
事件通讯：当前页⾯和被打开页⾯可以相互传递数据，都是通过eventchannel实现
1. 当前页⾯向被打开页⾯数据（⽗传⼦）
⼦页⾯通过监听事件，⽗页⾯在success回调⾥获取到eventchannel，然后it触发事件并传递数据
js实现轮播图最简代码2. 被打开页⾯向当前页⾯传参（⼦传⽗）
⽗页⾯有events参数，可以监听多个事件，⼦页⾯通过it触发事件并传递数据
1. it(string eventName, any args)：触发⼀个事件
2. (string eventName, function fn)：持续监听⼀个事件
3. EventChannel.off：取消监听⼀个事件
4. ：监听⼀个事件⼀次，触发后失效
被打开页⾯向当前页⾯发送数据
当前页⾯接收：
uni.navigateTo 参数⾥有event，可以监听被打开页⾯发送到当前页⾯的数据（接收点）
被打开页⾯发送：
当前页⾯发送：
通过success回调获取eventchannel发送数据
success: function(res) {
// 通过eventChannel向被打开页⾯传送数据
it(‘acceptDataFromOpenerPage’, { data: ‘test’ })
}
被发开页⾯接收：
使⽤
<(‘acceptDataFromOpenerPage’, function(data) {
console.log(data)
})
扩展组件
常⽤的ui框架
主要⽤于uniapp的多端发布；
主要⽤于vue的h5页⾯的发布；不适合多端发布

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。