当前位置：网站首页 > 热门文章 > 正文

12. 教你零基础搭建小程序:模板语法—数据绑定(1)

bigegpt 2024-11-03 13:12 61 浏览

艾瑞巴迪，

从这章开始，我们要讲微信小程序的模板语法。

模板语法的定义：

WXML（WeiXin Markup Language）是框架设计的?套标签语?，结合基础组件、事件系统，可以构建出页面的结构。

模板语法有以下四个种类，

1、数据绑定
2、运算
3、列表渲染
4、条件渲染

这是我们接下来要一一重点讲解的。

这一章，我们来初步学习模板语法中的数据绑定。

大家可以点击下方链接，找到我们的教科书（微信官方文档）去学习一下基本定义，有一个大致的了解。

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

数据绑定: WXML 中的动态数据均来自对应 Page 的 data

我们还是老方法，在实践中学习，在实操中认识。

1、在全局配置文件app.json 中新增demo03文件，便于我们示范以下具体操作。

代码如下：

2、打开 pages 文件夹--打开demo03 文件夹--打开demo03.wxml 文件，页面如下：

在demo03.wxml 文件中，可以看到如下代码：

代码中包含标签和普通文本两部分内容。

我们先对”text“标签做简单描述：

”text“相当于传统web中的span标签，是行内元素，当页面中存在多个text 标签时，各标签也是不换行的。

比如：

我们在demo03.wxml 文件中输入以下代码：

<text>1</text>,
<text>2</text>

按下保存键，发现，左侧的屏幕中，1，2是在同一行的。

这就是说，当页面中存在多个text 标签时，各标签也是不换行的。

2.1 补充：对另一个标签——”view“标签进行描述。

”view“标签相当于以前web 中的 div 标签，是块级元素，当页面中有多个 view 标签时，是会换行的。

比如：

我们在demo03.wxml 文件中输入以下代码：

<view>1</view>,
<view>2</view>

按下保存键，发现，左侧的屏幕中，1，2是各占一行的。

这就是说，当页面中存在多个view 标签时，各标签是换行的。

3、数据绑定中，数据要定义在哪里？

我们打开 pages 文件夹--打开 demo03.js 文件，文件中，一新建后就有内容存在。如下图所示。

我们来具体解读一下，demo03.js 文件中的内容

page: 这里指的是大型的配置方法

其中，page包括的data字段，这里面都是关键字，是不能更改的哦，

而且，里面要放的都是一些初始化的数据，比如变量。

与data 同层级的有很多方法，基本都是生命周期函数，这在以后的章节中会介绍到的。

3.1 这里，给大家介绍一个小技巧：

我们把demo03.js 文件中的内容全部删除，使其文件呈现空白状态。

在demo03.js 文件中输入”page“,会有下拉提示框，这里选择page , 就会重新出现删除前的文件内容。

在我们编辑demo03.js 文件时，如果出现了错误，我们可以选择全部删除，然后再用这种方法重新输入page方法。

欧克，本章数据绑定部分的一部分知识，讲解到此，下一章我们继续讲解数据绑定的知识。

搜索并关注微信公众号：飞寝旺食

获取更多小程序运营干货、免费的开发教程、源代码等！

做小程序我们是认真的！

qlabel自动换行

上一篇：pyqt5程序:面向过程编程到面向对象编程
下一篇：04程序员定要学HTML，字体段落标签介绍，60秒搞定

12. 教你零基础搭建小程序:模板语法—数据绑定(1)

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解

7 个对 Java 意义重大的性能指标，你知道几个?

PHP 远程调试最佳实践

Laravel框架使用图片处理简单教程