博客
关于我
小程序学习二:小程序开发语法基础
阅读量:788 次
发布时间:2019-03-25

本文共 2534 字,大约阅读时间需要 8 分钟。

小程序开发语法基础 指南

一、数据绑定

1. 在小程序中与vue类似的数据绑定

在小程序中,数据绑定的实现方式与vue类似,主要通过jsdata定义数据,并在wxml中使用Mustache语法实现交互。

示例1:定义数据

Page({  data: {    info: '你好'  }})

示例2:在wxml中使用数据

{info}}

这样可以实现数据的展示。通过Mustache语法,即双大括号{},将视图与数据绑在一起。


二、动态绑定属性

小程序在动态绑定属性方面与vue有一些不同之处。

1. 动态绑定属性的语法

在小程序中,对于元素属性的动态绑定,v-bind的方式并不存在,需要借助Mustache语法直接使用插值表达式。

示例

`

需要注意的是,小程序中直接通过插值实现属性的动态绑定。而像v-bind这样的语法则不是小程序支持的。


三、调试工具

在小程序开发过程中,可以使用APPData来查看和调试组件的数据和状态。

功能说明

APPData主要用于数据的调试,可以直接查看页面的data对象,如下所示:

// 示例:获取data中的数据const data = wx.getStorageSync() || {};

四、事件处理

在小程序中,事件是从渲染层(UI)到逻辑层的通讯方式,通过事件可以实现业务逻辑的执行,如用户交互的响应等。

1. 常用事件类型

事件类型 绑定方式 事件描述
tap bindtap 手指触摸后马上离开
input bindinput 文本框的输入事件
change bindchange 状态改变时触发(与input事件紧密相关)
提交 提交 自定义事件的提交方式

2. 事件对象

在处理事件时,事件对象的属性需要注意:

属性名称 类型 说明
type String 事件类型
timeStamp Integer 事件发生的时间戳(毫秒级)
target Object 事件来源的组件属性集合
currentTarget Object 处理事件的组件的属性集合
detail Object 事件的具体信息
touches Array 当前触摸点的信息
changedTouches Array 触摸点的动态变化信息

示例:处理touchstart事件

Page({  // 组件内  onTouchStart(e) {    // e.target是触发事件的元素    // detail对象中包含具体的触摸信息    console.log('触摸开始:', e.detail.touches);  }});

3. bindtap 事件绑定

在小程序中,bindtap 事件的实现方式需要特别注意以下几点:

示例

其中,demo 是一个函数,可以接收事件对象e,并根据业务需求执行相应的逻辑操作。

Page({  demo(e) {    console.log('触摸事件被处理:', e);  }});

4. 事件数据的获取与修改

问:如何获取data中的数据并在事件中修改数据?

data 是小程序逻辑层的一个JavaScript对象,事件中可以通过this.data来访问数据。要修改data中的数据,需要使用setData方法。

示例:在事件中获取数据

Page({  data: {    count: 0  },  demo(e) {    // 获取当前数据    console.log(this.data.count);    // 修改数据    this.setData({      // 只需修改对应的属性即可      count: this.data.count + 1    });  }});

问:如何动态修改data中的数据?

通过setData方法可以实现数据的动态修改。这个方法会将数据从逻辑层发送到渲染层,并且是异步的。因此,在修改数据时,建议使用this.setData


5. 事件的传参

在小程序中,事件的传参方式与vue不同,不能直接在bind语句中传递参数。

示例:传递参数到事件处理函数

在事件处理函数中,可以通过e.target.dataset获取传递的参数信息。

Page({  demo(e) {    // e.target.dataset为一个对象    // 示例:{param1: 1}    const params = e.target.dataset.params;    // 通过参数值实现业务逻辑  }});

五、小程序语句

1. if 语句

示例:if 语句的使用场景

cond 为 true 时展示的视图

示例:结合block 标签使用

展示当 boolValue 为 true 的内容
再展示其他内容

注意:wx:if 的判断结果会影响组件的渲染,block 标签结合使用可以提升性能表现。


2. ifhidden 的区别

类型 特点
if 动态创建和销毁 DOM 元素
hidden 设置组件的 display: none

建议在频繁切换视图时使用hidden,而在进行if-else判断时则使用wx:if


3. wx:for 循环语句

示例:遍历数组

当前项的编号是:{id}}, 值为:{<%= age %>}

示例:默认和自定义索引值

索引是:{index}}, 当前项的编号是:{id}}

示例:数组数据

Page({  data: {    array: [      { id: 1, age: 12 },      { id: 2, age: 13 }    ]  }});

注意:wx:for 必须用于数组元素的渲染,且每个组件都需要指定唯一的key 值以提高渲染效率。


通过以上内容,可以了解到小程序开发的基础语法和实用技巧。如果需要进一步了解小程序的其他功能,或者遇到具体的开发问题,可以继续深入探索和实验。

转载地址:http://wseuk.baihongyu.com/

你可能感兴趣的文章
MySQL中使用IN()查询到底走不走索引?
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>
Mysql中各类锁的机制图文详细解析(全)
查看>>
MySQL中地理位置数据扩展geometry的使用心得
查看>>
Mysql中存储引擎简介、修改、查询、选择
查看>>
Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
查看>>
mysql中实现rownum,对结果进行排序
查看>>
mysql中对于数据库的基本操作
查看>>
Mysql中常用函数的使用示例
查看>>
MySql中怎样使用case-when实现判断查询结果返回
查看>>
Mysql中怎样使用update更新某列的数据减去指定值
查看>>
Mysql中怎样设置指定ip远程访问连接
查看>>
mysql中数据表的基本操作很难嘛,由这个实验来带你从头走一遍
查看>>
Mysql中文乱码问题完美解决方案
查看>>
mysql中的 +号 和 CONCAT(str1,str2,...)
查看>>
Mysql中的 IFNULL 函数的详解
查看>>