微信小程序开发项目实战（微课版）课件 项目2 小程序编程基础.pptx

项目二小程序编程基础任务一小程序的执行顺序MiniProgram

小程序包含哪些项目文件，每一个页面包含哪些文件，把它写在以下横线里？想一想：Next》

在app.js页面，定义一个App()函数，还可用来注册一个微信小程序。App()必须在app.js中调用，必须调用且只能调用一次。不然会出现无法预期的后果。App()函数里有一些生命周期函数。Next》小程序注册函数App()属性类型必填说明onLaunchfunction否生命周期回调——监听小程序初始化。onShowfunction否生命周期回调——监听小程序启动或切前台。onHidefunction否生命周期回调——监听小程序切后台。onErrorfunction否错误监听函数。onPageNotFoundfunction否页面不存在监听函数。onUnhandledRejectionfunction否未处理的Promise拒绝事件监听函数。onThemeChangefunction否监听系统主题变化其他any否开发者可以添加任意的函数或数据变量到Object参数中，用this可以访问

小程序注册函数App()App({ onLaunch(options){console.log(启动onLaunch)},onShow(options){console.log(启动onShow)},onHide(){console.log(启动onHide)},onError(msg){console.log(msg)},globalData:Iamglobaldata})

小程序注册函数App()执行结果如下图所示。

Page(Objectobject)注册小程序中的一个页面。接受一个?Object?类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。页面注册函数Page()Next》属性类型说明dataObject页面的初始数据optionsObject页面的组件选项，同中的options，需要基础库版本behaviorsStringArray类似于mixins和traits的组件间代码复用机制，参见，需要基础库版本onLoadfunction生命周期回调—监听页面加载onShowfunction生命周期回调—监听页面显示onReadyfunction生命周期回调—监听页面初次渲染完成onHidefunction生命周期回调—监听页面隐藏onUnloadfunction生命周期回调—监听页面卸载onPullDownRefreshfunction监听用户下拉动作onReachBottomfunction页面上拉触底事件的处理函数onShareAppMessagefunction用户点击右上角转发其他any开发者可以添加任意的函数或数据到Object参数中，在页面的函数中用this可以访问。这部分属性会在页面实例创建时进行一次深拷贝。

页面注册函数Page()Next》

感谢观看THANK项目二小程序编程基础

项目二小程序编程基础任务二构建页面数据MiniProgram

定义data数据：在页面JS文件page函数中第一项为data属性，在data中定义本页面逻辑处理需要用到的数据，其中很大一部分数据将用WXML文件的数据渲染。因为小程序JS文件是基于JavaScript编写的，所以在JS文件中可以定义字符串、数字、布尔值、对象和数组等类型的数据。Next》页面数据Page({???data:?{????text:?This?is?page?data.,??????sliderOffset:?0,???????state:{???????????genre:[],???????????genre_index:?0,???????????model:[],???????????model_index:?0,???????????terminalStatus:,???}????},})

获取data数据：获取data中的text和genre_index值需要使用this。Next》页面数据?onLoad:function(options){??????var?gener_index=this.data.state.genre_index???????console.log(gener_index)???????var?text=this.data.text????????console.log(text)????}

页面数据执行效果如下图所示。

内容绑定：WXM