【小程序】开发初体验

小程序开发初体验

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

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

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