首页 前端知识 每天一篇之HTML(2)

每天一篇之HTML(2)

2024-06-19 08:06:26 前端知识 前端哥 325 976 我要收藏

        农历正月初三,大家还都沉浸在新年的喜悦之中,吃喝玩乐、走亲访友;祝大家龙年大吉,完事如意!!!

        好了拉回正题,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中的数据块。

由于对微信小程序的开发工具不熟悉,所以没有做实例验证;下一篇开始使用开发工具写代码;做实验;

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12840.html
标签
评论
发布的文章

Markdown基础与进阶语法

2024-06-30 22:06:12

零基础 HTML 入门(详细)

2024-06-30 22:06:09

CSS3基本语法

2024-06-30 22:06:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!