微信小程序学习笔记③——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 一会装饰哪几个。

● 在使用样式时，我们要遵循一定的语法：

<标签 样式关键字="自己取的名字">编写的文本</标签>

● 在使用样式时，也要记住一些关键字。常用的『(样式)选择器』有：

选择器	样例	样例描述
.class	.myOnlySet	选择所有拥有 class="myOnlySet" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有『view组件』
…	…	…

● 常用的『选择器属性』包含有：

属性	功能
font-family	设置文本的字体系列
font-size	设置文本的字体大小
font-weight	设置字体的粗细
color	设置文本颜色
line-height	设置行高
text-align	设置文本的水平对齐方式
…	…

● 样例二：【对上面的 “样例一” 进行了完善】

<!-- 这是注释 -->
---------------------------------- 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.js
var 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布局[实战样例之画骰子]

---

⭐️ ⭐️