微信小程序开发图解案例第2章

2.1 微信小程序目录结构介绍
微信小程序目录结构可以分为3个部分：框架全局文件、框架页面文件和工具类文件，如 图所示。
2.1.1 框架全局文件
一个小程序的主体部分由3个文件组成，作为全局文件，必须放在项目的根目录中。框架 全局文件包括3个文件：App.wxss小程序公共样式表、App.json小程序公共设置和App.js小程 序逻辑（定义全局数据以及定义函数文件），它们对所有页面都有效，如表所示。
App.json配置；logs.wxml是页面结构，负责渲染页面；
logs.wxss是针对logs.wxml页面的样式文件。
2.4.5 小试牛刀：天气微信小程序
小试牛刀：制作猫眼电影底部标签导航
猫眼电影底部标签导航分为4个标签 导航：电影、影院、发现、我的，如图 所示。
目录
contents
2.1 微信小程序目录结构介绍 2.2 微信小程序注册程序应用 2.3 微信小程序注册页面的使用 2.4 微信小程序如何绑定数据 2.5 微信小程序条件渲染 2.6 微信小程序列表渲染 2.7 微信小程序定义模板 2.8 微信小程序的引用功能
2 3
onShow页面显示。每次打开页面都会调用一次。 onReady页面初次渲染完成。一个页面只会调用一次，代表页面已经准备妥当，可以和视 图层进行交互，对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
4 5
onHide页面隐藏。当navigateTo或底部Tab切换时调用。 onUnload页面卸载。当redirectTo或navigateBack时调用。
2
onShow生命周期函数。它用来监听小程序显示。微信小程序有前后台定义。当用户单击 左上角的“关闭”按钮或者按“Home”键关闭或者突然来电话时，微信小程序都没有销毁， 而是进入后台；当再次进入微信或者小程序的时候才会触发onShow生命周期函数。只要 程序启动或者从后台进入到前台都会触发该函数。
2.3.1 页面初始化数据
data页面初始化数据：初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由 逻辑层传至渲染层，所以其数据必须可以转换成 JSON 的格式——字符串、数字、布尔值、对
象或数组。渲染界面可以通过 WXML 对数据进行绑定。
2.3.2 生命周期函数
1
onLoad页面加载。一个页面只会调用一次，接收页面参数可以获取wx.navigateTo和 wx.redirectTo及<navigator/>中的query。
目录
contents
2.1 微信小程序目录结构介绍 2.2 微信小程序注册程序应用 2.3 微信小程序注册页面的使用 2.4 微信小程序如何绑定数据 2.5 微信小程序条件渲染 2.6 微信小程序列表渲染 2.7 微信小程序定义模板
2.8 微信小程序的引用功能
2.9 沙场大练兵：仿香哈菜谱微信小程序
3
onHide生命周期函数。它用来监听小程序隐藏，一旦微信小程序从前台进入到后台，就会 触发该函数。 Nhomakorabea4
onError生命周期函数。它用来监听小程序脚本或者API是否发生错误，发生错误时返回错
误信息。
目录
contents
2.1 微信小程序目录结构介绍 2.2 微信小程序注册程序应用 2.3 微信小程序注册页面的使用 2.4 微信小程序如何绑定数据 2.5 微信小程序条件渲染 2.6 微信小程序列表渲染 2.7 微信小程序定义模板 2.8 微信小程序的引用功能
2.1.3 框架页面文件
一个小程序框架页面文件由4个文件组成，分别是js页面逻辑、wxml页面结构、wxss页面 样式表和json页面配置，如表所示。
2.1.3 框架页面文件
微信小程序的框架页面文件都是放置在“pages”文 件夹下面的，如图所示。
每个页面都有一个独立的文件夹，就像日志页面的
“logs”文件夹， 它的下面放置4个文件：logs.js可进行 业务路径处理；logs.json是页面的配置，可以覆盖全局
2.9 沙场大练兵：仿香哈菜谱微信小程序
2.2 微信小程序注册程序应用
App.js文件不仅可以定义全局函数和数据，还可以注册一个小程序。在App()函数里可以完 成小程序的注册以及指定其生命周期函数。如表所示为生命周期函数的定义。
2.2 微信小程序注册程序应用
1
onLaunch生命周期函数。它用来监听小程序初始化，一旦初始化完成，就会触发该函数， 这个生命周期函数只会触发一次。
2.1.1 框架全局文件
2．App.json小程序公共设置
App.json文件可以对5个功能进 行设置：
01
OPTION OPTION
配置页面路径
02 配置窗口表现 03 配置标签导航 04 配置网络超时 05 配置debug模式
OPTION
OPTION
OPTION
2.1.2 工具类文件
在微信小程序框架目录里有一个“utils”文件夹，它用来存放工具栏的js函数，如可以放置一些 日期格式化的函数、时间格式化的函数等一些常用的函数。定义完这些函数后，要通过 module.exports将定义的函数名称注册进来，在其他的页面才可以使用，如图所示为时间格式化工 具类文件。
2.1.1 框架全局文件
1．App.js小程序逻辑 App.js文件用来定义全局数据和 函数的使用，它可以指定微信小程序 的生命周期函数。生命周期函数可以 理解为微信小程序自己定义的函数， 如onLaunch（监听小程序初始化）、 onShow（监听小程序显示）、onHide （监听小程序隐藏）等，在不同阶段、 不同场景可以使用不同的生命周期函 数。此外，App.js中还可以定义一些全 局的函数和数据，其他页面引用App.js 文件后就可以直接使用全局函数和数 据，如图所示。
2.9 沙场大练兵：仿香哈菜谱微信小程序
2.3 微信小程序注册页面的使用
在每个页面文件夹里，都有 一个页面对应的js文件，就像日
志“ logs” 文件夹，对应的就是
logs.js 文 件 。 在 这 个 文 件 里 的 Page() 函数用于注册一个页面。 接受一个object 参数，其指定页 面的初始数据、生命周期函数、 事件处理函数等页面的所有业 务逻辑处理都放在这个文件里。 object参数说明如表所示。