微信小程序开发教程(基础篇)7-数据绑定上

最新推荐文章于 2021-05-15 23:31:58 发布

VIP文章 crazytea

最新推荐文章于 2021-05-15 23:31:58 发布

阅读量4.4k

点赞数 4

分类专栏：微信开发微信小程序微信小程序开发微信小程序开发教程

本文链接：https://blog.csdn.net/crazytea/article/details/53148592

版权

在之前的教程中写到，微信小程序框架将程序分为逻辑层(.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属性中，也就是说，如果变量需要绑定

关注