| HustWolf

小程序的视图层，分为 WXML、WXSS 和基础组件。今天，我们就来详细解析 WXML 和 WXSS。

WXML

WXML（WeiXin Markup Language）是为小程序 MINA 框架设计的语言，它结合基础组件、事件系统，可以构建出页面的结构。

说的通俗一点，WXML 有点类似 HTML，相当于一个最后的收尾的设计师。它可以告诉你，这个地方要有个图片，然后这个图片的地址是什么；然后告诉你这儿有个按钮，这个按钮控制什么的开关。

这么一说，我还觉得做小程序就像盖房子，有人负责给房子打通各种通道（JavaScript）、有人负责给房子规定布局（JSON、WXSS）、还有的就是接通各个地方的线路的人（WXML）。

万事万物，都有其相似之处啊。

WXML 有以下的功能：

1. 数据绑定

它的意思是在视图上规定动态变量，并在 JavaScript 脚本中进行定义它。在这个例子中，数据来源是 JS 文件里面的 motto 变量，至于样式，则是 user-motto 的。

同时，在相应的 JS 文件中，定义了一个变量 motto。

最后在 WXSS 里，为它写个样式，动态的数据就能展示在视图上了。

网页设计师看到这儿，也许会觉得似曾相识。没错，微信小程序中的 WXSS 文件，与 CSS 非常类似；而小程序的开发语言，就是照搬了 HTML+CSS+Javascript 的样子。

2. 列表渲染

先在相应的 JavaScript 中，定义一个列表变量，然后在 WXML 中，我们可以使用 wx:for来引用它。

由于不能在原本的 data里面定义一个array变量，所以我定义了一个新的data，并把motto放进去。

我们先定义一个列表变量：

然后在 WXML 中，将某个视图连接到相应列表变量中：

利用这些，我们可以制作一个九九乘法表。

3. 条件渲染

在小程序中，我们可以使用 wx:if来设定渲染判断条件。如果符合，则渲染某一部分内容。使用这个函数，与其他语言中使用if函数来print东西一样。

首先在 WXML 中定义 if判断条件（view这个变量是在 JS 里定义好的）：

然后，在相应的脚本代码里，定义你所需要的一些变量：

之后，视图层就会根据条件，选择渲染的部分了。

4. 模板

模板的意思是，在 WXML 中，引用相同或类似的部分。一个模板需要在 WXML 中定义和使用，引用 JS 数据，然后展示给用户。

5. 事件

事件是视图层到逻辑层的通讯方式，它可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id、dataset、touches。

在 WXML 中建立一个事件，当于其他编程语言中使用函数的过程。原文中建立的是一个 view，我觉得这种需要输入的地方还是采用一个button按钮比较好。

首先，在 WXML 中定义需要触发事件的元素：

在 JS 脚本文件文件里面写入方法（函数），并且绑定其中某个数据：

6. 引用

WXML 提供两种文件引用方式，分别是 import和include。

import可以在该文件中使用目标文件定义的template。

例如，我们可以在 item.wxml中定义了一个叫item的template，并在index.wxml中引用了item.wxml，那么就可以在index.wxml中，使用 item 模板。

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

而 include可以将目标文件除了<template/> 的整个代码引入，相当于是拷贝到include位置。例如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

WXSS

WXSS（WeiXin Style Sheets）是小程序的样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。简单来说，就是告诉浏览器，这个地方的这个东西长啥样、比如字体多大、背景颜色是啥，是纯粹的样式文件。

就好比是装修的师傅，不管你的房子结构布局如何，反正给你粉刷一遍。这会让你的房子大变样，但是没有改变任何你的原有格局。

为了适应广大的前端开发者， WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有「尺寸单位」和「样式导入」两项。

1. 尺寸单位

rpx（responsive pixel）是一个可以根据屏幕宽度进行自适应的单位，它将屏幕宽度规定为 750 rpx。

如在 iPhone6 上，屏幕宽度为 375 px，共有 750 个物理像素，则 750 rpx = 375 px = 750 物理像素，1 rpx = 0.5 px = 1 物理像素。

就是说，不管你的屏幕多大，宽度都是 750 个 rpx。这是一种绝对的大小，至于具体的每个 rpx 有多大，那就要根据你的手机具体尺寸来算。

这样一个好处就是，我可以直接的指定一个部件出现在哪个位置，而不用管你的手机是什么样子，确保了最好的视觉体验，至于 1 rpx 等于多少像素，那就要按照你的手机实际尺寸来算了。

以 iPhone 为标准的换算方式如下：

关注微信号 zxcx0101，回复「rpx」，一篇文章告诉你 rpx 单位的所有秘密。

2. 样式导入

使用 @import语言句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

/** common.wxss **/
.small-p {
 padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
 padding:15px;
}

在 WXSS 文件中定义了样式，那么如何使得各自有各自的用处呢？导入其他样式文件后，又何处安排每一个样式呢？

接下来，就是选择器登场的时间了！

例如，我们在 WXSS 这样定义样式：

然后，我们就可以在 WXML 中，使用 class属性，引用这个样式。

话不多说，看效果图：

原文地址：

• http://www.jianshu.com/p/7353e682ee13
• http://www.jianshu.com/p/3ce9905a0823

本文由知晓程序授权转载，关注微信号 zxcx0101，在知晓程序后台回复「1228」获得全网第一本《小程序入门指南》电子书。

O单片机开发指南之15

把基础打好了，才能建设高楼大厦。

本文为基础知识，介绍在Protel DXP中PCB图纸中各个图层的作用以及使用方法。

一、前言

其实在Protel DXP中绘制PCB图纸的主要操作就是在各个图层中进行的。布线、填写或者绘制标识、绘制电路板外形等，都是在不同的图层中进行的，所以，了解图层是PCB绘制的基础。

二、各个图层的含义以及操作

2.1 PCB图纸中的图层

PCB图纸由不同的图层组成，每个图层承担了不同的任务，一般PCB中常见的图层有顶层布线层、底层布线层、机械层、丝印层、禁止布线层、多层等。

图层在图层管理栏中可以找到，图层管理栏位于图纸的左下角。

如图 1，PCB绘图界面的左下角为图层管理栏，电路板的图层在这里显示。

如图 2，这是一个只有正面和背面的双层电路板，在这个电路板里，就包含了这些图层：

l Top layer:顶层布线层

这一层是电路板的顶层走线（铜线）、放置元件焊盘等的图层。

l Bottom layer:底层布线层

这一层是背面走线（铜线）、放置元件焊盘等的图层。

l Mechanical：机械层

它不带有电气属性，可以用于勾画外形、勾画机械尺寸、放置文本等工作。

机械层在普通的电路板设计时其实也少用到，不过肯定是有它的用处，具体含义以及作用可以见参考文件[1] 。

l Top overlay：丝印层

此层是在电路板顶层写文字、进行绘图标识等的图层，这些标识是用颜料画的，不导电。

l Keep-out layer:禁止布线层

在布线时只能在禁止布线层的区域内布线，如在自动布线时不会超出这一区域布线。

一般来说，可以在禁止布线层中画一个闭合的形状来确定电路板的板框，这就是电路板的外形。

l Multi-layer:多层

Multi-layer称为多层，特性有二：无论单面板双面板或多面板，每一层铜铂都会生成这一层，每一层都不覆盖阻焊。用途有两个：专为直插元件的引脚构成焊盘；铜铂表面需要镀锡处，增加本层的线条、方块、字符等，以使铜铂裸露。

一般在电路板设计时这一层也用得少。

l 其他

多层电路板设计时还会有其他图层，如中间层、内电层等，这里不再赘述。

2.2 各个图层中的设计和操作步骤

需要重点关注的几个图层：顶层布线层、底层布线层、丝印层、禁止布线层。

一般在各个图层中的绘制流程如下：

1、在顶层布线层或底层布线层上放置好元件；

2、在禁止布线层中确定好电路板的边框、打安装孔；

3、布线；

4、在丝印层上进行标注。

三、小结

本节简要介绍了一下DXP中PCB图纸上的各个图层，后面会介绍布线方法等。本节完，精彩待续。

参考：

[1] Altium DesignerRel 为什么那么多mechanical 层，有什么用？？？

https://zhidao.baidu.com/question/419520592.html

天我来谈谈我对传统HTML与VUE的区别理解(不谈太深的区别，查了一下网上那些说的都一样，我只谈很多人最关心的不一样的，说不对请理解,对不太了解或想了解VUE的人)。

1、 什么是vue

官网介绍：vue是一套构建用户界面的渐进式框架。它与其他重量级框架不同的是，vue采用自下而上增量开发的设计。Vue的核心库只关注视图层，非常容易学习，非常容易与其他库或已有项目整合。

Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图层组件。

2、什么是HTML(HTML5)

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。

总结：它们相同的地方就一句话:用途和结果都是一样的，不管是VUE还是HTML，最终都是将数据使用各种UI及方式展现给用户，也就是都是视图层页面的。

有人会说使用HTML和VUE开发有什么区别呢？许多人觉得结果都是视图层表达，而且VUE打包发布后不还是HTML+一堆JS文件，而且还要引入导入编译感觉特麻烦，感觉VUE好难，为什么要学VUE？

1、开发和部署

VUE 开发过程确实挺麻烦的，要安装依赖，要npm一堆包(还经常失败)。而HTML就简单多了，直接就拿来主意，下载下来，改改就用。

部署的话都差不多，都是在任何服务上都可以直接使用，而且都没有什么依赖。

但是我觉得VUE的开发类似于开发一个APP，所以他的打包结果是比纯HTML+JS更安全的，相当于做过混淆，因而他发布后的体积更小。

2、数据通讯

HTML+JS 数据POST,GET 等基本访问方式，但是如果直接在HTML中使用数据判断，或数据循环输出必须借助js,jquery等通过前端处理然后对id进行赋值操作，所以一般只能借助动态语言如php,java,.net等语言环境进行转化，但这样使得web对动态语言环境依赖性过强，造成后端迁移时太过于复杂，而且这样的Web一般要求前端和后端部署在一起。

VUE则不依赖于动态语言输出环境，只要是双方约定了数据传输接口，服务器放在哪里，不管使用什么后台语言都没关系，因而他的灵活性更强。

3、安全性

有些产品有些公司对语言是有选择的，主要是不想让代码暴露太多，而HTML+JS的方式往往是达不到要求的，因而现在许多企业还是在使用桌面软件的形式，又或者是要你使用对方的云服务，而私有云部署则要贵的很多，而且比较贵的软件还要安装秘钥软件，加密狗等方式，无非就是防止你将软件转移或无限使用或获取他的核心算法（虽然js也是有混淆方法的，但很少有人会这么做，我也没试过但是很影响效率）。

以前我在一个公司就是加班写了一个WEB程序里边有一个算法是分析公司产品结构的（那时VUE还不盛行），正好呢又遇到一个懂点的老板(居然会用F12)，结果看到核心代码了，当时就否定了，改用了WinForm 重写，那个辛苦你懂的。

VUE的打包的话，其实就是根据在页面中所使用到的组件然后根据你的逻辑关系等进行混淆打包，然后在用户加载时按需进行加载解析，从某种意义上来说做WEB是一种保护。我觉得这与桌面程序及APP打包效果是一样的(软件和APP也是可以反编译嘛，反编译后的结果就是混淆)，当然不说加密混淆了。

现在国内出现了像DCloud、APICloud（虽然这二家经常打架，毕竟相似度很高，我不做评论，但不可否认对一个只会写HTML+JS的人转写APP是一个不错的选择）这些由HTML5开始的跨平台软件也开始支持VUE了。

最后附上VUE打包后的调试预览图，纯HTML的就不多说了，自己F12吧。