小程序开发初体验
下面通过三个案例, 体验一下小程序的开发模式
数据绑定: 将数据动态展示到页面中
- 在页面的js文件中定义一个数据message
Page({
data: {
message: "Hello World"
}
})
- 再在wxml文件中绑定数据, 绑定方式和Vue中一样, 使用mustache语法
<view class="title">{{ message }}</view>
- 在wxss文件中, 同css文件一样, 可以进行样式设置
.title {
color: red;
font-size: 20px;
}
列表渲染: 在小程序中也可以使用一个for循环, 渲染列表数据
- 例如js文件中定义一个数组
Page({
data: {
movies: ["西游记", "水浒传", "三国演义"]
}
})
- 在wxml中使用wx:for进行循环, 类似Vue中的v-for
<!-- 小程序循环中, 默认有item index -->
<block wx:for="{{ movies }}" wx:key="*this">
<view>{{ item }}</view>
</block>
事件监听: 计数器案例
- js中编写逻辑
Page({
data: {
message: "Hello World",
movies: ["西游记", "水浒传", "三国演义"],
conter: 0
},
increment() {
// 下面方式修改data中的数据,数据会改变,但是你的修改页面并不会刷新
// this.data.conter += 1
// 如果修改data,并且希望页面重新渲染,需要使用this.setData()方法
this.setData({
conter: this.data.conter + 1
})
},
decrement() {
this.setData({
conter: this.data.conter - 1
})
}
})
- 在wxml中进行展示
<!-- 计数器案例 -->
<view>当前计数: {{ conter }}</view>
<!-- 点击事件通过bind监听tap -->
<button size="mini" bindtap="increment">+1</button>
<button size="mini" bindtap="decrement">-1</button>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/120063.html
