【小程序】开发初体验

╰+哭是因爲堅強的太久メ 2023-10-02 20:34 14阅读 0赞

### 小程序开发初体验 ###

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

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

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

<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>
    
    <button size="mini" bindtap="increment">+1</button>
    <button size="mini" bindtap="decrement">-1</button>