小程序：组件使用、数据绑定、条件渲染、列表渲染

最新推荐文章于 2024-06-04 23:00:43 发布

tomorrownan

最新推荐文章于 2024-06-04 23:00:43 发布

阅读量2.1k

点赞数

分类专栏：小程序文章标签：小程序基础语法

本文链接：https://blog.csdn.net/w1418899532/article/details/90703872

版权

本文介绍了小程序开发的基础知识，包括组件的基本使用，如text和button组件，详细讲解了数据绑定和条件渲染，如wx:if和wx:else的使用。此外，还阐述了列表渲染wx:for的原理和应用，包括自定义索引和元素变量，以及嵌套使用和注意事项。通过实例展示如何在小程序中实现动态内容更新和交互效果。

摘要由CSDN通过智能技术生成

准备工作：

新建一个quickstart项目，然后再pages目录下自己新建一个页面，例如t文件夹名为test，再在其下分别新建test.wxml、test.js、test.wxss文件。最后在app.json全局配置文件中配置test页面路径，项目结构如下：

项目结构图

1.组件的基本使用

小程序开发文档中组件部分有很多组件介绍，包含视图容器类组件，基础内容类组件、表单组件、导航组件、媒体组件、地图组件和画布组件等。选几个常用的组件介绍其用法。

text组件可以直接显示文本文字，button组件显示就是按钮，按钮有default、primary、warn三种type类型，颜色分别是默认灰，原始绿、警告红。text和button组件的使用如下：

text和button组件的使用

可以在js文件中使用bindtap属性为button绑定事件。当点击按钮时，下方显示一行文字，变量是使用mustache语法绑定的。

注意：WXML中所有动态的数据都是来自对应Page中的data。如下：

js代码

效果如如下：

效果图

2.数据绑定和条件渲染

简单的数据绑定是使用 Mustache 语法（双大括号）将变量包起来，如上方的<text>{ {msg}}</text>语句是绑定msg变量的方法。

WXML 中的动态数据均来自对应 Page 的 data。

1.数据绑定可以作用在条件语句wx:if和wx:else中，如：

<!-- test.wxml -->
<!-- 试图容器部分view组件 -->
<view>大家好，我是南南</view>
<!--基础内容部分text组件-->
<text>text直接显示文本</text>
<!-- 表单组件中button组件 ，有3种类型-->
<!-- 为button绑定内容 -->
<button type='primary