小程序 | 2-小程序初体验
1. 小程序的数据绑定
xx.js 文件中放置页面的逻辑和变量内容。
小程序数据绑定使用的是 {{ }} 双大括号语法，标准叫法为 Mustache 语法。
在 xx.js 的 Page-data 节点中定义变量
Page({ /**
* 页面的初始数据
*/
data: {
name:'张三'
}
}
然后在 xx.wxml 页面中通过 {{}} 引用：
<text>{{name}}</text>
此时，小程序的预览界面就会显示 张三，如下图：
{{}} 还支持如下写法：
<text>我的名字：{{name}}</text>
<!--表示引用在 js 中定义的变量 age ，并将其值 + 10 -->
<text>我的年龄：{{age + 10 }}</text>
2. 列表展示wx:for
xx.js 文件内容：
Page({
/**
* 页面的初始数据
*/
data: {
students:[
{id:1,name:'张三',age:13},
{id:2,name:'李四',age:24}
]
}
}
xx.wxml 文件内容：
<!--注意：此处使用的关键语法是 wx:for , 默认为每个条目生成一个 item 对象。其后的取值必须使用 {{}} 包裹，不包裹的话，就会把后面的值作为字符串使用。-->
<view wx:for="{{students}}">数组中第一个元素的名字：{{item.name}}，年龄:{{(item
.age)+10}}</view>运行结果：
3. 事件监听
绑定数据时使用 {{}} 语法， 绑定函数不需要使用该语法。
js 文件核心内容：
Page({
data: {
count:0
},
onBtnClick(event){
console.log("按钮被点击了")
this.setData({
<!--不要直接使用 `this.data.count += 1 ` , 这种数据变更之后无法更新到界面上。-->
count:this.data.count+1
})
}
}
xml 文件核心内容：
<button size="mini" bindtap="onBtnClick">+</button>
这样点击按钮之后，界面中的数据会变，同时控制台中会打印 log。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2021-03-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读