![微信小程序学习笔记③——wxml+wxss+js基础入门[样例+解析]](https://1200zi.500zi.com/uploadfile/img/15/714/fcd12af895ad86fc27135ed49b901454.jpg)
✅
文章目录
一、从「网页三大件」到「微信小程序三大件」二、WXML三、WXML+WXSS四、WXML+WXSS+JS五、参考附录微信小程序开发 🌲
上一篇文章链接:微信小程序学习笔记②——页面和主体[app.json+模拟QQ的tabBar栏]
下一篇文章链接:微信小程序学习笔记④——Flex布局[实战样例之画骰子]
一、从「网页三大件」到「微信小程序三大件」
● 在学习 wxml 基础之前，我们需要先了解一下 html。
● html 和 C语言一样，具有自己的语法格式：
<标签>编写的文本</标签>
◆说明：
① 上面的『标签』类似于“属性”，也就是这段内容所展示出来的性质(红的字？斜的？居中还是右对齐?)。
② 上面的『编写的文本』即是 “内容”，展示出来的东西。
●HTML：超文本标记语言(HyperText Markup Language，简称：HTML)是一种用于创建网页的标准标记语言。我们可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
●WXML：微信标记语言(WeiXin Markup Language，简称WXML)，是框架设计的一套标签语言。结合基础组件、事件系统，可以构建出页面的结构。它和 HTML 语法和功能都类似，只不过 WXML 是腾讯开发出来的一套小程序语言，而 HTML 是 Tim Berners-Lee 和同事 Daniel W. Connolly 一起发明的。
● 同样的，wxss 和 css 的语法和功能都是类似的。css 是 Tim Berners-Lee 和同事 Robert Cailliau 一起发明的。
●CSS：层叠样式表(Cascading Style Sheets，简称CSS)，它是一种用来表现 HTML 等文件样式的计算机语言。CSS可以修饰网页，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
●WXSS：微信样式表 (WeiXin Style Sheets，简称WXSS)，它是一套样式语言，用于描述 WXML 的组件样式。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的特性有：尺寸单位、样式导入。
● 最后，微信小程序中的js即是网页三大件里的javascript，语法和功能几乎差不多吧。
●JavaScript(简称“JS”) ：是一种具有函数优先的轻量级，解释型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。
二、WXML
● 首先，在微信小程序中我们用的最多的是『view组件』，它是一个 “视图容器”，可以给装在里面的东西用 wxss 来进行 “装饰”。view 的官方文档：『view组件』
●样例一：
<view>Hello World!</view><view>一、口水话</view><view>这是第一段话，为了让这段话长一点，能让它在小程序演示中有两三行的样例，我就写了这么多字。</view><view>二、当下情况</view><view>这是第二段话，今日是大年初三下午一点半左右，外面阳光明媚，我准备出去玩。</view><view>三、过年吐槽</view><view>这是第三段话，每次过年都有这种情况，明明吃不下了，那些亲戚还一个劲儿地说：“锅里还有喔，多吃点多吃点~”哎...你们过年有什么烦恼呢？</view>
●运行结果：
三、WXML+WXSS
● wxss官方文档：『小程序框架-视图层-WXSS』
● 想要使用wxss来给我们的文章加粗、变颜色，还得改一下wxml文件里面的内容，毕竟如果我们要计算机对『view组件』进行 “装饰”，计算机怎么知道装饰哪几个。
● 这时我们给wxml里面的一个『标签』里面做一个 “标记”，好告诉wxss一会装饰哪几个。
● 在使用样式时，我们要遵循一定的语法：
<标签 样式关键字="自己取的名字">编写的文本</标签>
● 在使用样式时，也要记住一些关键字。常用的『(样式)选择器』有：
●常用的『选择器属性』包含有：
●样例二：【对上面的 “样例一” 进行了完善】
<!-- 这是注释 -->---------------------------------- WXML文件(开始) ----------------------------------<view class="BigTitle">Hello World!</view><view id="SmallTitle">一、口水话</view><view class="paragraphs">这是第一段话，为了让这段话长一点，能让它在小程序演示中有两三行的样例，我就写了这么多字。</view><view id="SmallTitle">二、当下情况</view><view class="paragraphs">这是第二段话，今日是大年初三下午一点半左右，外面阳光明媚，我准备出去玩。</view><view id="SmallTitle">三、过年吐槽</view><view class="paragraphs">这是第三段话，每次过年都有这种情况，明明吃不下了，那些亲戚还一个劲儿地说：“锅里还有喔，多吃点多吃点~”哎...你们过年有什么烦恼呢？</view>---------------------------------- WXML文件(结束) -------------------------------------------------------------------- WXSS文件(开始) ----------------------------------/* pages/MyIndex/index.wxss */.BigTitle {font-family:Cambria;font-size: 30px;font-weight: 600; color: blue;line-height:1cm;text-align: center;}#SmallTitle {font-size: 20px;color:darkorange;font-weight: 400;}.paragraphs {font-size: 15px;color: black;text-indent: 2em; /* 缩进两个字符 */padding-bottom: 10px; /* 下边距 */}---------------------------------- WXSS文件(结束) ----------------------------------
●运行结果：
四、WXML+WXSS+JS
● 在《微信小程序学习笔记①——安装与测试 [输出Hello World]》中提到了.js，即JavaScript。它是『页面逻辑』，比如说，我们点击页面某个按钮，它就会 “显示设定好的东西”，或者 “执行设定好的程序”。
● 使用.js时，要和.wxml文件配合起来才行，它的基本功能包含：数据绑定、列表渲染、条件渲染、模板、引用等，详见下面的开发文档。到后面我们用到的什么就细致地学什么，学以致用是我比较喜欢的学习方式。
●官方文档：『WXML与JS的结合』
● 写.js也有很多固定的语法，刚开始写可能有些不适应，多写写就好了。
●样例三：【对上面的 “样例二” 进行了补充】
---------------------------------- WXML文件(开始) ----------------------------------<view class="BigTitle">{{MyTitle}}</view><view id="SmallTitle" wx:if="{{condition_1}}">一、口水话</view><view class="paragraphs" wx:if="{{condition_1}}">这是第一段话，为了让这段话长一点，能让它在小程序演示中有两三行的样例，我就写了这么多字。</view><view id="SmallTitle" wx:if="{{condition_2}}">二、当下情况</view><view class="paragraphs" wx:if="{{condition_2}}">这是第二段话，今日是大年初三下午一点半左右，外面阳光明媚，我准备出去玩。</view><view id="SmallTitle" wx:if="{{condition_3}}">三、过年吐槽</view><view class="paragraphs" wx:if="{{condition_3}}">这是第三段话，每次过年都有这种情况，明明吃不下了，那些亲戚还一个劲儿地说：“锅里还有喔，多吃点多吃点~”哎...你们过年有什么烦恼呢？</view><button bindtap="MyButton_1">按一下出现一段话</button>---------------------------------- WXML文件(结束) -------------------------------------------------------------------- WXSS文件(开始) ----------------------------------和样例二的 WXSS 一样---------------------------------- WXML文件(结束) ----------------------------------
---------------------------------- JS文件(开始) ----------------------------------// pages/MyIndex/index.jsvar cnt = 0; /* 定义一个全局变量 */Page({/*** 页面的初始数据*/data: {MyTitle: "你好 World!",condition_1: false,condition_2: false,condition_3: false,},/*** 按压按钮出现的事件*/MyButton_1(e) {if(cnt == 0){this.setData({condition_1: true});cnt++;}else if(cnt == 1){this.setData({condition_2: true});cnt++;}else if(cnt == 2){this.setData({condition_3: true});} }})---------------------------------- JS文件(结束) ----------------------------------
◆代码说明：
①.wxml文件中的{{MyTitle}}这个东西体现的是 JS 的功能之一『数据绑定』。它有点类似于 “C语言的起别名”，为了方便程序员好记变量。数据绑定使用Mustache语法（双大括号）将变量包起来，可以作用于.wxml文件。且 WXML 中的动态数据均来自对应Page的data。（动态数据的意思就是其值可能发生变化的数据）
②.wxml文件中的wx:if="{{condition_1}}"这个东西体现的是 JS 的功能之一『条件渲染』，当condition_1这个变量的值为false时，该标签里面的内容将不会显示，反之当condition_1这个变量的值为true时，则显示。
③.wxml文件中的button和view的 “地位” 是类似的，都是『组件』，只不过它是『按钮组件』。在『组件』中绑定一个事件处理函数时可以用很多关键字声明，binBtap(点击一下即触发) 是其中一种。button bindtap="MyButton_1"中的MyButton_1即是我们自己取的函数名，这个需要在.js文件里去写函数体。
④.js文件最开头的var是一个『JS关键字』，用来声明变量的。
⑤.js文件中，data是关键字，以 “字典(键-值对)” 形式存储页面初始数据。
⑥this关键字用于获取当前操作页面，setData()的功能：修改页面数据，但需要以 “字典(键-值对)” 形式进行编程。
●运行结果：
五、参考附录
[1]微信小程序开发之三 —— wxml与wxss
[2]《微信小程序开发指南》
上一篇文章链接:微信小程序学习笔记②——页面和主体[app.json+模拟QQ的tabBar栏]
下一篇文章链接:微信小程序学习笔记④——Flex布局[实战样例之画骰子]
⭐️ ⭐️
