1 鏈接
微信官方文檔
因爲微信官方已經寫的足夠詳細了,因此這篇blog就是寫一些窩不太熟悉的點
1.1 pages
navigation(導航)
bar(條)
background:並不是意思上的背景,而是隱蔽窗的意思。不能搞混了。
2.基礎
2.1標籤
HTML 標記標籤通常被稱爲 HTML 標籤 (HTML tag)
HTML 標籤是由尖括號包圍的關鍵詞,比如 <html>
HTML 標籤通常是成對出現的,比如 <b> 和 </b>
標籤對中的第一個標籤是開始標籤,第二個標籤是結束標籤
開始和結束標籤也被稱爲開放標籤和閉合標籤
<標籤> 內容 </標籤>
2.1.1標籤種類
<!DOCTYPE html>聲明爲 HTML5 文檔
<html> <html> 元素是 HTML 頁面的根元素
<head> <head> 元素包含了文檔的元(meta)數據
<meta charset="utf-8">該網頁的中文編碼格式爲utf-8
<title>我的html</title> <title> 元素描述文檔的標題
</head>
<body> <body> 元素包含了可見的頁面內容!只有body內的內容
纔會顯示在頁面
<h1>我的第一個標題</h1> <h1> 元素定義一個大標題,
一共有h1~6表示標題等級,類比markdown的#號
<p>我的第一個段落。</p> <p>元素定義了一個元素
</body>
</html>
2.2元素
“HTML 標籤” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標籤與結束標籤,如下實例:
HTML 元素:
<p> 這是一個段落。</p>
這就是一個元素,尖括號內的被稱爲標籤。元素與標籤還是不太一樣的
3.block與view(vx)
block並不是一個組件因此不會被渲染,速度自然比view快。
block的英文是塊,也就是說block標籤是控制一個塊的,相比於view控制的東西更多。
將這3個代碼一起渲染,仔細對比
1
<block wx:for="{{[1, 2, 3]}}">
{{index}}:{{item}}
</block>
2
<block wx:for="{{[1,2,3]}}">
<view>{{index}}:{{item}}</view>
</block>
3
<view wx:for="{{[1,2,3]}}">
{{index}}:{{item}}
</view>
1的渲染效果排列爲一行,2和3的渲染效果相同。
而重點則在於1和3的渲染效果與代碼的異同!!
4.wxml的class與wxss
衆所周知wxml類比於html,所以只能編譯頁面出現的信息。而要更改樣式則需要跑到css=wxss中來,這個時候就需要取到wxml中定義的class了
5事件綁定及參數傳遞
綁定的時候用bindtap,然後被綁定的數據會被包裝成一個event送給寫在js中的時間function,而想要把什麼東西包裝進event就需要用到如下的寫法
<view bindtap="onClick" wx:for={{datas}} data-X="{{}}" data-Y="{{}}" >
</view>
data-後的{{}}裏的東西就會被包裝進event給事件function。