在线试读

get_product_contenthtml 小程序框架
  本章主要内容是小程序框架,包括逻辑层、视图层和flex模型。逻辑层是由JavaScript编写而成的,视图层由WXML和WXSS配合组件构成,flex布局可以确保页面需要适应不同屏幕尺寸及设备类型时元素在恰当的位置。

* 掌握注册程序和页面相关函数的用法;
* 掌握页面路由的方式和模块化的用法;
* 掌握WXML的数据绑定、列表/条件渲染、模板、事件和引用;
* 掌握WXSS的尺寸单位、使用方式和选择器的用法;
* 了解flex布局的基本概念;
掌握flex布局中的容器属性和项目属性。*
3.1  逻辑层
  小程序开发框架的逻辑层又称为App Service,是由JavaScript编写和实现的。开发者    写的所有代码后将被打包成一份JavaScript,并在小程序启动的时候运行,直到小程序被     销毁。
  逻辑层的主要作用是处理数据后发送给视图层渲染以及接收视图层的事件反馈。
  为了更方便地进行项目开发,小程序在JavaScript的基础上进行了一些优化,例如:
  (1)新增App()和Page()方法,分别用于整个应用程序和单独页面的注册。
  (2)新增getApp()和getCurrentPages()方法,分别用于获取整个应用实例和当前页面      实例。
  (3)提供丰富的微信原生API,例如可以方便地获取微信用户信息、本地存储、扫一扫、微信支付、微信运动等特殊功能。
  (4)每个页面具有独立的作用域,并提供模块化功能。
  需要注意的是,由于框架不在浏览器中运行,所以JavaScript与浏览器相关的一些功能无法使用,例如document、window等。
3.1.1  注册程序
  App()方法
  小程序通过使用App(OBJECT)方法进行应用注册,用其指定小程序的生命周期函数。
  OBJECT参数如表3-1所示。
表3-1  App()方法的OBJECT参数
属    性
类  型
描    述
触 发 时 机
备    注
onLaunch()
Function
生命周期函数——监听小程序的初始化
当小程序初始化完成时触发
全局只触发1次
onShow()
Function
生命周期函数——监听小程序的显示
当小程序启动或从后台进入前台显示时触发

onHide()
Function
生命周期函数——监听小程序的隐藏
当小程序从前台进入后台隐藏时触发

onError()
Function
错误监听函数
当小程序发送脚本错误或API调用失败时触发

onPageNotFound()
Function
页面不存在函数
当小程序需要打开的页面不存在时触发

其他自定义参数
Any
开发者可以添加自定义名称的函数或数据到OBJECT参数中

用this可以访问
  
  注意:App()方法只能写在小程序根目录下的app.js文件中,并且只能注册1个。
  
  用户可以使用微信web开发者工具在空白app.js文件中直接输入关键词app,此时会自动出现提示列表,如图3-1所示。

图3-1  app.js的代码提示列表
  默认选择提示列表中的项,直接按回车键就可以自动生成带有生命周期全套函数的代码结构,如图3-2所示。
  事实上,App()中的这些函数均为可选函数,开发者可以根据实际需要删除其中的部分函数,或保留这些函数但空着不填充内容。
  第12、19行注释语句均提到了小程序后台和前台的概念,具体说明如下。
* 小程序后台:指的是小程序没有在手机当前画面显示,但是并没有被销毁。当用户    单击左上角的按钮关闭小程序或者按设备的Home键离开微信时会进入后台运行   状态。
* 小程序前台:指的是小程序在手机当前画面被使用。当用户再次打开处于后台运行状态的小程序时会重新进入前台运行状态。
  
  注意:只有当小程序进入后台一定时间或者系统资源占用过高时才会被真正地销毁。