疯狂早茶微信小程序基础篇四数据绑定上.pdf

疯狂早茶微信小程序基础篇《四》：数据绑定（上） 在之前的教程中写到，微信小程序框架将程序分为逻辑层(.js 文件)和视图层(.wxml 文件)。这是一种常见 的 UI 和逻辑分离的程序设计方式，开发出来的程序更加灵活，易扩展。 这种程序设计方式通常要解决两个问题: UI 层响应逻辑层逻辑和数据的变化 UI 层将用户的操作反馈到逻辑层 通常来说可以让 UI 层和逻辑层互相暴露接口给对方，不过出于对灵活性和扩展性的考虑，会引入中间层 来进行管理，这样可以避免 UI 层和逻辑层之间的直接依赖。 微信小程序框架正是基于这种模式进行设计的，.wxml 文件来描述 UI 层(微信官方名称为视图层 ，教程 后续也将用视图层来命名) ，.js 文件来处理逻辑层，而微信的框架则作为中间层管理两者之间的调用。 为了更好的帮助开发者开发微信小程序，微信定义了一些语法和规则来帮助开发者连接视图层和逻辑 层。 数据绑定 显示字符串内容 //page.wxml text class=user-motto{{motto}}/text //page.js data: { motto: Hello World, }, 通过将{{motto}}嵌入视图层代码中，界面会显示Hello World 更改字符串内容 setData({ motto:Hello My World }) 当执行上述代码后，界面会显示Hello My World 上述部分有两点需要说明: 1: 视图层嵌入的是{{motto}}而不是{{data.motto}} ，微信框架默认设定视图层绑定的变量定义在Page 对象的 data 属性中，也就是说，如果变量需要绑定到视图层，一定要定义 data 属性中 2: 通过调用 Page 对象的 setData(Page 对象预定义)方法，可以更新界面数据，但是直接设置变量是无 效的 ，因此对于绑定到视图层的变量，要永远使用 setData 方法来设置变量值 显示图片 在开发工具默认生成的程序首页，显示了用户的头像，相关代码如下: //index.wxm l image class=userinfo-avatar src={{userInfo.avatarUrl}} background- size=cover/image //index.js onLoad: function () { console.log(onLoad) var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } image标签的 src 属性绑定了userInfo.avatarUrl 变量，并在 onLoad 方法中通过调用 setData 方法设 置 userInfo。 属性绑定 可以将变量绑定到视图组件的属性值上(如上面 image标签的 src 属性) ，注意在绑定到属性时，需要在 外面加入一对双引号。 src={{userInfo.avatarUrl}} 除了用于显示图片外，属性绑定还有许多作用。 关联数据 假设要做一个学生管理程序，页面使用列表来展示用户数据，当用户点击某一学生信息时，进入该学生 的详情页页面。 当获取到用户的点击 时，必须要知道点击的是哪一个学生的数据，这时可以将学生的 id 绑定到视图 组件的 id 属性中来进行数据关联。 控制视图的隐藏/显示 可以将变量绑定到视图组件的 hidden 属性中，通过更改组件 hidden 属性的值，可以控制组件是否显 示。 控制属性 上面说到可以通过属性绑定的方法来控制视图组件是否显示，还可以通过控制属性来实现这 能。 //Page.wxm l view wx:if={{condition}} /view //Page.js Page({ data: { condition: true } }) 通过绑定数据到 wx:if 属性，可以控制该组件是否显示。 框架还提供了 wx:elif 和 wx:else 属性，用法如下: view wx:if={{length 5}} 1 /view view wx:elif ={{leng