【小程序】开发初体验

小程序开发初体验

下面通过三个案例, 体验一下小程序的开发模式

数据绑定: 将数据动态展示到页面中

• 在页面的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>