| 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吧。