农历正月初三,大家还都沉浸在新年的喜悦之中,吃喝玩乐、走亲访友;祝大家龙年大吉,完事如意!!!
好了拉回正题,HTML进入第二篇,话说为什么要学习HTML呢?今天看了一篇博文微信小程序学习笔记③——wxml+wxss+js基础入门[样例+解析]_wxml和wxss一起用-CSDN博客
作者说:在学习 wxml 基础之前,我们需要先了解一下 html。哦原来知识也都是嵌套的。
引用这位大佬的话:
HTML:超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。我们可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
WXML:微信标记语言(WeiXin Markup Language,简称WXML),是框架设计的一套标签语言。结合基础组件、事件系统,可以构建出页面的结构。它和 HTML 语法和功能都类似,只不过 WXML 是腾讯开发出来的一套小程序语言,而 HTML 是 Tim Berners-Lee 和同事 Daniel W. Connolly 一起发明的。
CSS:层叠样式表(Cascading Style Sheets,简称CSS),它是一种用来表现 HTML 等文件样式的计算机语言。CSS可以修饰网页,能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
WXSS:微信样式表 (WeiXin Style Sheets,简称WXSS),它是一套样式语言,用于描述 WXML 的组件样式。为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性有:尺寸单位、样式导入。
我们新手小白入门暂时不需要关注别的太复杂的术语;可以先这样简单的理解:wxml是用来描述微信小程序界面的。而html是描述网页界面的。两者所起的作用可以比作搭建毛坯房;同样后面需要学习的wxss 和 css 的语法和功能也是相似的,是为了描述界面样式;可以认为他们是精装修;
另外微信小程序除了这两大件还有一个叫做.js的文件,它对应网页文件中的JavaScript。他是为了界面的动态响应而存在;可以理解为智能家居。比如在网页或者小程序中操作某组件时做出反馈;你问我组件是什么?答:我也不知道,不过不用担心;后面肯定会知道的。
好了既然我们已经知道这三大件的关系了。那现在开始分支转到微信小程序吧,因为我们的目的是微信小程序,开始聊微信小程序的文件结构吧!
来看下面一段话;这是作者写于2022年的正月初三;两年后的今天这也应景了!!!
<view>Hello World!</view>
<view>一、口水话</view>
<view>这是第一段话,为了让这段话长一点,能让它在小程序演示中有两三行的样例,我就写了这么多字。</view>
<view>二、当下情况</view>
<view>这是第二段话,今日是大年初三下午一点半左右,外面阳光明媚,我准备出去玩。</view>
<view>三、过年吐槽</view>
<view>这是第三段话,每次过年都有这种情况,明明吃不下了,那些亲戚还一个劲儿地说:“锅里还有喔,多吃点多吃点~”哎...你们过年有什么烦恼呢?</view>
界面效果如下:
我也有这个烦恼。嘻嘻。。。可是老人家是从另一个年代过来的,骨子里是害怕吃不饱的。 过年了吗,那必须的多吃!!可是现在的年轻人哪有父辈们当年的经历。饭量也都很小。每年都剩好多东西吃不完;浪费啊,还赶上东西最贵的时候买。是挺烦的。
又扯远了,大家觉得这个界面好看吗?不太好看吧?怎么办呢?精装修啊!有请WXSS!请参考官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html不知道大家看我有什么感觉。我看了一遍发现好多术语理解不了;不慌咱们逐个击破!
先看下这个https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/官方的WXML的语法参考介绍了WXML的四个功能 数据绑定、列表渲染、条件渲染、模板。先看下数据绑定:
简单绑定:使用Mustache 语法(双大括号)将变量包起来,可以作用于:-
- 内容
- 组件属性(需要在双引号之内)
- 控制属性(需要在双引号之内)
- 关键字(需要在双引号之内)
我简单的理解数据绑定:用于在.js文件中为.wxml中的数据起个别名。并且可以在page文件中动态的控制数据。
运算:
- 三元运算
- 算数运算
- 逻辑判断
- 字符串运算
- 数据路径运算
我简单的理解运算:用于在.js文件中通过运算控制.wxml中的数据的显示效果。
组合:
- 数组
- 对象
我简单的理解组合:用于在.js文件中改变.wxml中的数据块。
由于对微信小程序的开发工具不熟悉,所以没有做实例验证;下一篇开始使用开发工具写代码;做实验;