WXML 模板 從事過網頁程式設計的人知道，網頁程式設計採用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和使用者的互動。 同樣道理，在小程式中也有同樣的角色，其中 WXML 充當的就是類似 HTML 的角色。開啟 pages/index/index.wxml，你會看到以下的內容: 獲取頭像暱稱 {{userInfo.nickName}} {{motto}} 和 HTML 非常相似，有標籤、屬性等等構成。但是也有很多不一樣的地方，我們來一一闡述一下： 1. 標籤名字有點不一樣 往往寫 HTML 的時候，經常會用到的標籤是 div, p, span，開發者在寫一個頁面的時候可以根據這些基礎的標籤組合出不一樣的元件，例如日曆、彈窗等等。換個思路，既然大家都需要這些元件，為什麼我們不能把這些常用的元件包裝起來，大大提高我們的開發效率。 從上邊的例子可以看到，小程式的 WXML 用的標籤是 view, button, text 等等，這些標籤就是小程式給開發者包裝好的基本能力，我們還提供了地圖、視訊、音訊等等元件能力 更多詳細的元件講述參考下個章節 小程式的能力 2. 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表示式 在網頁的一般開發流程中，我們通常會通過 JS 操作 DOM (對應 HTML 的描述產生的樹)，以引起介面的一些變化響應使用者的行為。例如，使用者點選某個按鈕的時候，JS 會記錄一些狀態到 JS 變數裡邊，同時通過 DOM API 操控 DOM 的屬性或者行為，進而引起介面一些變化。當專案越來越大的時候，你的程式碼會充斥著非常多的介面互動邏輯和程式的各種狀態變數，顯然這不是一個很好的開發模式，因此就有了 MVVM 的開發模式(例如 React, Vue)，提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM，JS只需要管理狀態即可，然後再通過一種模板語法來描述狀態和介面結構的關係即可。 小程式的框架也是用到了這個思路，如果你需要把一個 Hello World 的字串顯示在介面上。 WXML 是這麼寫 : 3. 4. JS 只需要管理狀態即可: 5. this.setData({ msg: “Hello World” }) 6. 通過 {{ }} 的語法把一個變數繫結到介面上，我們稱為資料繫結。僅僅通過資料繫結還不夠完整的描述狀態和介面的關係，還需要 if/else, for等控制能力，在小程式裡邊，這些控制能力都用 wx: 開頭的屬性來表達。 更詳細的文件可以參考 WXML 7. WXSS 樣式 WXSS 具有 CSS 大部分的特性，小程式在 WXSS 也做了一些擴充和修改。 1.新增了尺寸單位。在寫 CSS 樣式時，開發者需要考慮到手機裝置的螢幕會有不同的寬度和裝置畫素比，採用一些技巧來換算一些畫素單位。WXSS 在底層支援新的尺寸單位 rpx ，開發者可以免去換算的煩惱，只要交給小程式底層來換算即可，由於換算採用的浮點數運算，所以運算結果會和預期結果有一點點偏差。 2.提供了全域性的樣式和區域性樣式。和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作為全域性樣式，會作用於當前小程式的所有頁面，區域性頁面樣式 page.wxss 僅對當前頁面生效。 3.此外 WXSS 僅支援部分 CSS 選擇器 更詳細的文件可以參考 WXSS 。 微信小程式開發神器《微信小程式自動切片生成佈局軟體》，可以快速自動生成小程式前端佈局和程式碼，還有免費的教程和技術支援。 功能如下： 1、切片功能：原來手寫的這部分工作，可以用切片軟體的方法來切。切好後，可以自動生成wxml,wcss,js檔案。 2、文字識別功能：效果圖上的文字可以通過自動文字識別識別出來，提高錄入的速度，減輕工作量。 3、存檔功能：設計好的切片檔案可以存檔，以便下次需要的時候拿來重新編輯。只要有切片檔案在，換了程式也可以秀給和編輯。 有任何疑問歡迎隨時聯絡我們！ Q Q : 2381547632 官方網址：