《微信小程序开发零基础入门-第2版》教案(含习题) 第03章教案_小程序框架.doc

《微信小程序开发零基础入门-第2版》教案 第3章 小程序框架 一、教学目标： 掌握注册程序和页面的相关函数用法； 掌握页面路由的方式和模块化用法； 掌握WXML的数据绑定、列表/条件渲染、模板、事件和引用； 掌握WXSS的尺寸单位、使用方式和选择器用法； 了解Flex布局的基本概念； 掌握Flex布局中的容器属性和项目属性。 二、教学重点和难点： 重点：掌握WXML的数据绑定、列表/条件渲染、模板、事件和引用； 难点：掌握Flex布局中的容器属性和项目属性。 三、教学方法与手段： 采取互动式教学方法，理论教学使用多媒体投影教室。 四、课程简介： 本章主要内容是小程序框架，包括逻辑层、视图层和flex布局模型。逻辑层是由JavaScript编写而成的，视图层是由WXML和WXSS配合组件构成。Flex布局可以确保页面需要适应不同屏幕大小以及设备类型时元素在恰当的位置。 五、教学基本内容： 逻辑层 小程序开发框架的逻辑层又称为App Service，是由JavaScript编写与实现的。开发者写的所有代码最后将被打包成一份JavaScript，并在小程序启动的时候运行，直到小程序销毁。 逻辑层的主要作用是处理数据后发送给视图层渲染以及接受视图层的事件反馈。 为了更方便地进行项目开发，小程序在JavaScript的基础上进行了一些优化，解释如下： 新增App()和Page()方法，分别用于整个应用程序和单独页面的注册； 新增getApp()和getCurrentPages()方法，分别用于获取整个应用实例和当前页面实例； 提供丰富的微信原生API，例如可以方便地获取微信用户信息、本地存储、扫一扫、微信支付、微信运动等特殊能力； 每个页面具有独立的作用域，并提供模块化能力。 需要注意的是：由于框架不在浏览器中运行，因此JavaScript与浏览器有关的一些功能无法使用，例如document、window等。 小程序App App()函数 小程序通过使用App(OBJECT)函数来进行应用注册，用其指定小程序的生命周期函数。 OBJECT参数如表3-1所示。 表3- SEQ 表4- \* ARABIC 1 App() OBJECT参数一览表 属性 类型 描述 触发时机 备注 onLaunch Function 生命周期函数—监听小程序初始化 当小程序初始化完成时触发 全局只触发1次 onShow Function 生命周期函数—监听小程序显示 小程序启动、或从后台进入前台显示时触发 onHide Function 生命周期函数—监听小程序隐藏 当小程序从前台进入后台隐藏时触发 onError Function 错误监听函数 当小程序发送脚本错误、或API调用失败时触发 onPageNotFound Function 页面不存在函数 当小程序需要打开的页面不存在时触发 其他自定义参数 Any 开发者可以添加自定义名称的函数或数据到OBJECT参数中 用this可以访问 注：App()函数只能写在小程序根目录下的app.js文件中，且只能注册1个。 可以使用微信开发者工具在空白app.js文件中直接输入关键词app，此时会自动出现提示列表。默认选择提示列表中的第三项无需更改，直接按回车键就可以自动生成带有生命周期全套函数的代码结构。 事实上，App()中的这些函数均为可选函数，开发者可以根据实际需要删除其中部分函数，或保留这些函数但空着不填充内容。 其中第12、19行注释语句均提到了小程序后台和前台的概念，具体解释如下： 小程序后台：指的是小程序没有在手机当前画面显示，但是并没有被销毁。当用户点击左上角按钮关闭小程序，或者按了设备 Home 键离开微信，会进入后台运行状态； 小程序前台：指的是小程序在手机当前画面被使用。当用户再次打开处于后台运行状态的小程序，就会重新进入前台运行状态。 注：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。 onShow()和onError()方法在触发时均会返回参数，用户可以利用这些参数进行状态的判断与处理。实际上onLaunch()方法在触发时也会返回参数（这里为可选填的省略状态），且onLaunch()与onShow()方法返回的参数名称完全相同，具体如表3-2所示。 表3- SEQ 表4- \* ARABIC 2 App() onLaunch和onShow参数一览表 字段 类型 解释 path String 打开小程序的路径 query Object 打开小程序的query scene Number 打开小程序的场景值，详见表3-3 shareTicket String shareTicket referrerInfo Object 当场景为从另一个小程序/公众号/APP打开