微信小程式（三）wxml基本文法

wxml

• 關于項目目錄結構參考微信開放文檔指南篇。

JSON配置

• JSON 是一種資料格式，并不是程式設計語言，在小程式中，JSON扮演的靜态配置的角色。
• 常見的json 配置檔案有3種：
  • 小程式配置 app.json：做全局配置
  • 頁面配置 page.json：對小程式具體頁面的配置
  • 工具配置 project.config.json：對開發者工具的個性化配置，如域名校驗、代碼上傳時自動壓縮等

注意：小程式無法在運作過程中去動态更新JSON

JSON文法

• SON檔案都是被包裹在一個大括号{} 中
• JSON 中無法使用注釋

• 鍵名需要雙引号” ” 包裹

  鍵值之間有冒号 : 分隔

• 鍵值對之間用逗号 , 分隔
• JSON的值隻能是以下幾種資料格式：
  • 數字，包含浮點數和整數
  • 字元串，需要包裹在雙引号中
  • Bool值，true 或者 false
  • 數組，需要包裹在方括号中 []
  • 對象，需要包裹在大括号中 {}
  • Null

WXML模闆

• WXML 全稱是 WeiXin Markup Language 微信标記語言，結合小程式的基礎元件、事件系統，可以建構出頁面的結構。
• 建立WXML 檔案的方法：在app.json 中的“pages/index/index” 上新增一行 “pages/wxml/index” ，便會自動建立WXML 檔案。

資料綁定

• WXML 通過 {{ 變量名 }} 來映射js裡的 data 資料。
• 變量名是大小寫敏感的，也就是說 {{name}} 和 {{NAME}} 是兩個不同的變量。

• 沒有被定義的變量的或者是被設定為 undefined 的變量不會被同步到 wxml 中。

  示例：

<text id="{{id}}">{{msg}}</text>
//在js裡
data: {
		id:1,
		msg:'小陳’
},
           

注：{{}} 叫做Mustache 文法。

{{}} 具有兩種功能：動态渲染、邏輯運算。

{{}} 中除了變量名，還可以放置數字、字元串，并且做一些邏輯運算：算數運算、字元串拼接、三元運算

條件判斷

• 在WXML 裡有一套if、elif、else 組合。

<text wx:if="{{name==='肥牛'}}">火鍋</text>
  <text wx:elif="{{name==='可樂'}}">漢堡</text>
  <text wx:else>回家做飯</text>
           

• 可以一次性判斷多個元件标簽。

<block wx:if="{{true}}">
  <view> 1 </view>
  <view> 2 </view>
</block>
           

循環

• WXML 使用wx:for 渲染清單，預設數組的目前項的變量名為item，下标名為index。

<view wx:for="{{food}}" wx:key="id">
  <text>{{item.name}}</text>
</view>
           

• wx:key 是清單中每一個項目的唯一的辨別符。這個标志符可以提高wxml 動态渲染的效率。比如清單資料中的某一項資料發生改變時，微信會根據唯一标志符，找找到wxml 清單中與此條資料對應的項目，然後隻對此項目進行渲染。和vue、react 裡的diff 算法是一個原理。

循環參數改名字

• 當循環嵌套時，item會重複導緻報錯，可以改名

<view wx:for="{{food}}" wx:key="id" wx:for-item="ele" wx:for-index="ind">
    <text>{{ind}}:{{ele.name}}</text>
  </view>
           

模闆

• wxml 中的重複性元素，可以制作成模闆，進而友善批量修改。
• 設定：

<!-- template 模闆需要設定name -->
<template name="hotel">
  <text>{{name}}：</text>
  <text wx:for="{{food}}" wx:key="id">{{index?'、':''}}{{item.name}}</text>
</template>
           

• 調用：

<!-- 使用模闆時，is 指定其使用的模闆，data 指定模闆資料 -->
<template is=“hotel” data=“{{name:’小陳餐館’,food}}"></template>  
           

wxss

• WXSS（WeiXin Style Sheets）是小程式的樣式語言，用于描述WXML的元件的視覺效果。WXSS 就相當于網頁裡的css

  

• 項目公共樣式：app.wxss，它會作用到小程式的每個頁面。
• 頁面樣式：與app.json注冊過的頁面同名且位置同級的WXSS檔案。
• 内聯樣式：在wxml 中，寫在标簽的style 屬性裡的樣式
• 其它樣式：可以被項目公共樣式和頁面樣式引用的樣式，比如模闆檔案裡的樣式。

注：小程式中不需要考慮樣式檔案的請求數量，不用像前端那樣合并css 檔案。

wxss和css的差別

• wxss擁有相對的尺寸機關rpx，一個機關的rpx 是手機寬度的1/750。
• 外聯樣式可用@import 導入
• background-image 裡的圖檔為網絡圖檔時，其圖檔所在網絡的域名要經過微信許可。
• position 為absolute 的元素，需要position 為fixed 的容器。（這是由小程式的文檔流中不存在window、document對象導緻的）

wxss選擇器優先級

• !importtant

  >

  style="

  >

  #id

  >

  .class

  >

  element

WeUI元件庫

• WeUI 是一套與微信原生視覺體驗一緻的基礎樣式庫
• WeUI 由微信官方設計團隊為微信内網頁和微信小程式量身設計，令使用者的使用感覺更加統一。
• WeUI 包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生元件的樣式。

wxml.js

作用域

• 小程式的作用域同 NodeJS 比較相似。
• 在一個檔案中聲明的變量和函數隻在該檔案中有效。
• 是以，在不同的檔案中可以聲明相同名字的變量和函數，不會互相影響。

子產品化

es6 中子產品化文法可以應用于小程式中。

• A.js 中建立A 子產品

export default class A{
	constructor(name){
		this.name = name
	}
}
           

• 在index.js 中引入A 子產品

import A from './A.js'
Page({
	data: {
		fruit:new A('蘋果')
	},
})