微信小程序开发与运营教学课件作者李文奎第２章.ppt

表２ － １　项目中各文件的代码内容 返回 图２ － ８　添加ｎｅｗｓ 页面文件 返回 表２ － ２　全局配置项 返回 表２ － ３　ｗｉｎｄｏｗ 配置项及其描述 返回 表２ － ４　ｔａｂＢａｒ 配置项及其描述 返回 表２ － ５　ｔａｂＢａｒ 中ｌｉｓｔ 选项 返回 图２ － ９　ｔａｂＢａｒ 标签页 返回 表２ － ６　ｎｅｔｗｏｒｋＴｉｍｅｏｕｔ 配置项 返回 表２ － ７　项目逻辑文件配置项 返回 图２ － １０　ａｐｐ.ｊｓ 配置文件 返回 图２ － １１　小程序启动显示效果 返回 表２ － ８　页面逻辑文件配置项 返回 图２ － １２　数据初始、数据绑定及运行效果 返回 图２ － １７　ｓｅｔＤａｔａ.ｊｓ 和ｓｅｔＤａｔａ.ｗｘｍｌ 文件代码 返回 图２ － １８　使用ｓｅｔＤａｔａ 修改数据的运行效果 返回 图２ － １９　ＷＸＭＬ 运算 返回 图２ － ２０　ｗｘ:ｆｏｒ 控制属性列表数据绑定 返回 表２ － ９　冒泡事件 返回 表２ － １０　ＷＸＳＳ 常用属性 下一页 返回 表２ － １０　ＷＸＳＳ 常用属性 上一页 返回 * ２.５　逻辑层文件 设置初始数据是对页面的第一次数据绑定。 对象ｄａｔａ 将会以ＪＳＯＮ (Ｊａｖａｓｃｒｉｐｔ Ｏｂｊｅｃｔ Ｎｏ￣ｔａｔｉｏｎ, ＪＳ 对象简谱) 的形式由逻辑层传至视图层。 因此, 数据必须是可以转成ＪＳＯＮ 的格式(字符串、数字、布尔值、对象、数组)。 视图层可以通过ＷＸＭＬ 对数据进行绑定。 数据初始、数据绑定及运行效果如图２ －１２ 所示。 ２.定义当前页面的生命周期函数 在Ｐａｇｅ() 函数的参数中, 可以定义当前页面的生命周期函数。 页面的生命周期函数主要有ｏｎＬｏａｄ、ｏｎＳｈｏｗ、ｏｎＲｅａｄｙ、ｏｎＨｉｄｅ、ｏｎＵｎｌｏａｄ。 上一页 下一页 返回 ２.５　逻辑层文件 ■ ｏｎＬｏａｄ　页面加载函数。 当页面加载完成后调用该函数。 一个页面只会调用一次。该函数的参数可以获取ｗｘ.ｎａｖｉｇａｔｅＴｏ 和ｗｘ.ｒｅｄｉｒｅｃｔＴｏ 及 ｎａｖｉｇａｔｏｒ/ 中的ｑｕｅｒｙ。 ■ ｏｎＳｈｏｗ　页面显示函数。 当页面显示时调用该函数。 每次打开页面都会调用一次。 ■ ｏｎＲｅａｄｙ　页面数据绑定函数。 当页面初次数据绑定完成时调用该函数。 一个页面只会调用一次, 代表页面已经准备就绪, 可以和视图层进行交互。 上一页 下一页 返回 ２.５　逻辑层文件 ■ ｏｎＨｉｄｅ　页面隐藏函数。 当页面隐藏时及当ｎａｖｉｇａｔｅＴｏ 或小程序底部进行ｔａｂ 切换时,调用该函数。 ■ ｏｎＵｎｌｏａｄ　页面卸载函数。 当页面卸载、进行ｎａｖｉｇａｔｅＢａｃｋ 或ｒｅｄｉｒｅｃｔＴｏ 操作时, 调用该函数。 ３.定义事件处理函数 开发者在Ｐａｇｅ() 中自定义的函数称为事件处理函数。 视图层可以在组件中加入事件绑定, 当达到触发事件时, 小程序就会执行Ｐａｇｅ()中定义的事件处理函数。 示例代码如下: 上一页 下一页 返回 ２.５　逻辑层文件 ４.使用ｓｅｔＤａｔａ 更新数据 上一页 下一页 返回 ２.５　逻辑层文件 小程序在Ｐａｇｅ 对象中封装了一个名为ｓｅｔＤａｔａ() 的函数, 用来更新ｄａｔａ 中的数据。 函数参数为Ｏｂｊｅｃｔ, 以“ｋｅｙ:ｖａｌｕｅ” 对的形式表示将ｔｈｉｓ.ｄａｔａ 中的ｋｅｙ 对应的值修改为ｖａｌｕｅ。 示例代码如图２ －１７ 所示。 保存并编译, 代码修改前后的运行效果如图２ －１８ 所示。 上一页 返回 ２.６　页面结构文件 页面结构文件(ＷＸＭＬ) 是框架设计的一套类似ＨＴＭＬ 的标签语言, 结合基础组件、事件系统, 可以构建出页面的结构, 即.ｗｘｍｌ 文件。 在小程序中, 类似ＨＴＭＬ 的标签被称为组件, 是页面结构文件的基本组成单元。 这些组件有开始(如 ｖｉｅｗ ) 和结束(如 / ｖｉｅｗ )标志, 每个组件可以设置不同的属性(如ｉｄ、ｃｌａｓｓ 等), 组件还可以嵌套。 ＷＸＭＬ 还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。 ２.６.１　数据绑定 下一页 返回 ２.６　页面结构文件 小程序在进行页面数据绑定时, 框架会将ＷＸＭＬ 文件与逻辑文件中的ｄａｔａ 进行动态绑定, 在页面中显示ｄａｔａ 中的数据。 小程序的数据绑定使用Ｍｕｓｔａｃｈｅ 语法({{ }}) 将变量或运算规则包起来。 １.简单绑定 简单绑定是指使用双大括号({{}})将变量包起来, 在页面中直接作为字符串输出使用。简单绑定可以作用于内容、组件属性、控制属性等的输出。 【注意】 简单绑定作用于组件属性、控制属性时, 双大括号外应添加双引号。 上一页 下一页 返回 ２.６　页面结构文件 示例