uni-app移动应用开发课件 3_基础内容2.pptxVIP

移动应用开发UniApp

uni-app基础内容扩展第三章

学习目标知识目标1.掌握uni-app的生命周期2.掌握条件编译3.掌握uni-ui、uview等扩展组件的安装和使用能力目标1.能够熟练使用扩展组件搭建页面2.能实现跨端处理3.能够理解生命周期函数应用场景素质目标1.具有良好的软件编码规范素养2.具有探索新知、不畏困难的精神3.具有深厚的爱国情感和中华民族自豪感

uni-app基础内容扩展1.生命周期2.条件编译3.扩展组件4.案例新闻列表知识思维导图应用生命周期页面生命周期组件生命周期安装组件Uni-scss辅助样式使用组件

生命周期第一节

3.1.1应用生命周期函数名说明onLaunch当uni-app初始化完成时触发（全局只触发一次）onShow当uni-app启动，或从后台进入前台显示onHide当uni-app从前台进入后台onError当uni-app报错时触发onUniNViewMessage对nvue页面发送的数据进行监听onUnhandledRejection对未处理的Promise拒绝事件监听函数onPageNotFound页面不存在监听函数onThemeChange监听系统主题变化应用生命周期函数script exportdefault{ onLaunch:function(){ console.log(AppLaunch) }, onShow:function(){ console.log(AppShow) }, onHide:function(){ console.log(AppHide) } }/scriptApp.vue

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

3.1.2页面生命周期onLoad函数1两个作用在onLoad中调用数据接口，获取服务器端数据接受上一个页面中传递的参数methods:{nextpage(){ uni.navigateTo({ url:testload?id=1name=uniapp }) } }请求地址中传递的参数

3.1.2页面生命周期（a）index.vue页(b）testload.vue页onLoad:function(option){//option为object类型，会序列化上个页面传递的参数 this.id=option.id; =;}接受上一个页面中传递的参数

3.1.2页面生命周期onPullDownRefresh函数2onPullDownRefresh函数监听用户下拉动作，用于下拉刷新。(a)下拉前(b)下拉后实现下拉刷新数据

3.1.2页面生命周期具体代码：template viewclass=content textv-for=(item,i)innewsList:key=i{{item}}/text /view/templatescript exportdefault{ data(){ return{ title:Hello, newsList:[0-感悟非凡成就，凝聚奋进力量,1-践行健康生活方式蔚然成风,2-世界感受中国非凡十年巨变] } }, onLoad(){}, onPullDownRefresh(){ this.newsList=[0-坚守在岗位，喜迎二十大,1-凝聚党心民心，永葆生机活力,2-稳健持重，开拓进取]; uni.stopPullDownRefresh(); }, methods:{ } }/script

3.1.2页面生命周期注意：onPullDownRefresh与onLoad平级1处理后数据刷新后，使用uni.stopPullDownRefresh()方法关闭刷新功能3{ path:pages/index/index, style:{ n