微信小程序之一个响应的数据绑定系统的简单例子

版权声明：博客知识产权来源命运的信徒，切勿侵权 https://blog.csdn.net/qq_37591637/article/details/86679467

最近在学习微信小程序的开发，虽然对html,css,js都运用的比较娴熟，但是，微信小程序的开发语言还是有些不同；

废话不多说，开始入门吧

---

框架

---

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

框架提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

响应的数据绑定

---

框架的核心是一个响应的数据绑定系统。

整个系统分为两块视图层(View)和逻辑层(App Service)

框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

通过这个简单的例子来看：

wxml页面

<view>
world {{user}} !
</view>
<button bindtap="changes">更换国家</button>

---

代码解释如下：

<view>相当于html中的<div>

world {{user}}：{{user}}可以理解为world的user属性的值

<button>：按钮

bindtap：js的绑定点击事件

changes:函数名称

---

js

var worldData={
  user:'中国'
}
Page({
  data: worldData,
  /**
   * 页面的初始数据
   */
  changes: function(e){
    this.setData({

      user:'东京'
    })
  },
})

代码解释如下

1、

var worldData   ：定义一个变量，变量名=对应WXML页面中{{user}}前面的名称+Data

user:'中国'         ：user属性名，对应的是WXML{{user}}里面的名称

2、

Page({

data: worldData, //就是程序初始化的时候，默认的值是World 中国

/**

* 页面的初始数据

*/

changes: function(e){ //点击事件

this.setData({//设置属性值

user:'东京'//属性名称：属性值

})

},

})

---

页面效果如下

程序开始的时候；

点击按钮触发以后