微信小程序基礎

微信小程序的概況

微信小程序,小程序的一種,英文名 Wechat Mini Program风秤,是一種不需要下載安裝即可使用的應用粱檀,它實現了應用“觸手可及”的夢想伙菊,用戶掃一掃或搜一下即可打開應用抖韩。

微信小程序的特點

  • 無需安裝和卸載
  • 制作成本低
  • 容易部署蛀恩,具有豐富的延展性
  • 內存小、運行快茂浮,操作便利快捷

微信小程序的基本使用

微信小程序語法

一双谆、小程序中的四層結構

  1. js - 頁面邏輯
  2. wxml - 頁面結構
  3. json - 頁面配置
  4. wxss - 頁面樣式表
為了方便開發(fā)者減少配置項,描述頁面的四個文件必須具有相同的路徑與文件名

二席揽、小程序中的配置文件

  • 全局配置
    小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置顽馋,決定頁面文件的路徑、窗口表現幌羞、設置網絡超時時間寸谜、設置多 tab 等。


    全局配置
  • 頁面配置
    每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現進行配置属桦,頁面中配置項會覆蓋 app.json 的 window 中相同的配置項程帕。

  • sitemap配置
    小程序根目錄下的 sitemap.json 文件用來配置小程序及其頁面是否允許被微信索引

小程序中的模板語法

WXML(WeiXin Markup Language)是框架設計的一套標簽語言,結合基礎組件地啰、事件系統(tǒng),可以構建出頁面的結構讲逛。

1. 數據綁定

WXML 中的動態(tài)數據均來自對應 Page 的 data

  • 簡單綁定
    數據綁定使用 Mustache 語法(雙大括號)將變量包起來亏吝,可以作用于:內容

  • 組件屬性-需要在雙引號之間


  • 運算
    可以在 {{}} 內進行簡單的運算,支持的有如下幾種方式:

    • 三元運算


  • 算數運算


  • 邏輯判斷


  • 字符串運算


  • 列表渲染
    在組件上使用 wx:for 控制屬性綁定一個數組盏混,即可使用數組中各項的數據重復渲染該組件蔚鸥。
    默認數組的當前項的下標變量名默認為 index,數組當前項的變量名默認為 item


    使用 wx:for-item 可以指定數組當前元素的變量名许赃, 使用 wx:for-index 可以指定數組當前下標的變量名:

    block wx:for 實現一個空標簽
    類似 block wx:if止喷,也可以將 wx:for 用在<block/>標簽上,以渲染一個包含多節(jié)點的結構塊混聊。

wx:key

  1. 如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中弹谁,并且希望列表中的項目保持自己的特征和狀態(tài)(如 input 中的輸入內容,switch 的選中狀態(tài))句喜,需要使用 wx:key 來指定列表中項目的唯一的標識符预愤。
  2. wx:key 的值以兩種形式提供 字符串,
  3. 代表在 for 循環(huán)的 array 中 item 的某個 property咳胃,該 property 的值需要是列表中唯一的字符串或數字植康,且不能動態(tài)改變。
  4. 保留關鍵字 *this 代表在 for 循環(huán)中的 item 本身展懈,這種表示需要 item 本身是一個唯一的字符串或者數字销睁。
  5. 當數據改變觸發(fā)渲染層重新渲染的時候供璧,會校正帶有 key 的組件,框架會確保他們被重新排序冻记,而不是重新創(chuàng)建睡毒,以確保使組件保持自身的狀態(tài),并且提高列表渲染時的效率檩赢。
  • 條件渲染


  • block wx:if
    因為 wx:if 是一個控制屬性吕嘀,需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽贞瞒,可以使用一個 <block/> 標簽將多個組件包裝起來偶房,并在上邊使用 wx:if 控制屬性。


?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末军浆,一起剝皮案震驚了整個濱河市棕洋,隨后出現的幾起案子,更是在濱河造成了極大的恐慌乒融,老刑警劉巖掰盘,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異赞季,居然都是意外死亡愧捕,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進店門申钩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來次绘,“玉大人,你說我怎么就攤上這事撒遣∮寿耍” “怎么了?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵义黎,是天一觀的道長禾进。 經常有香客問我,道長廉涕,這世上最難降的妖魔是什么泻云? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮狐蜕,結果婚禮上壶愤,老公的妹妹穿的比我還像新娘。我一直安慰自己馏鹤,他們只是感情好征椒,可當我...
    茶點故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著湃累,像睡著了一般勃救。 火紅的嫁衣襯著肌膚如雪碍讨。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天蒙秒,我揣著相機與錄音勃黍,去河邊找鬼。 笑死晕讲,一個胖子當著我的面吹牛覆获,可吹牛的內容都是我干的。 我是一名探鬼主播瓢省,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼弄息,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了勤婚?” 一聲冷哼從身側響起摹量,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎馒胆,沒想到半個月后缨称,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡祝迂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年睦尽,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片型雳。...
    茶點故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡骂删,死狀恐怖,靈堂內的尸體忽然破棺而出四啰,到底是詐尸還是另有隱情,我是刑警寧澤粗恢,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布柑晒,位于F島的核電站,受9級特大地震影響眷射,放射性物質發(fā)生泄漏匙赞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一妖碉、第九天 我趴在偏房一處隱蔽的房頂上張望涌庭。 院中可真熱鬧,春花似錦欧宜、人聲如沸坐榆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽席镀。三九已至匹中,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間豪诲,已是汗流浹背顶捷。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留屎篱,地道東北人服赎。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像交播,于是被迫代替她去往敵國和親重虑。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,675評論 2 359

推薦閱讀更多精彩內容

  • 項目結構: 創(chuàng)建完一個新的項目后堪侯。會出現以下的目錄結構: project.config.json:項目的配置文件嚎尤。...
    東邪_黃藥師閱讀 262評論 0 0
  • 微信小程序中沒有dom結構,所以操作dom元素從而改變樣式伍宦,進行邏輯操作也無從談起芽死,小程序巧妙使用的“數據綁定”/...
    官清歲月閱讀 563評論 0 2
  • 配置文件 app.json的配置(全局) {// 用來配置頁面的路徑"pages":["pages/index/i...
    Q軒哥閱讀 27,137評論 2 31
  • 配置文件 app.json的配置(全局) { // 用來配置頁面的路徑 "pages":[ "pages/inde...
    左狐偃閱讀 578評論 0 0
  • 一、開發(fā)者工具以及代碼結構 1.開發(fā)者工具 微信小程序開發(fā)是在專門的微信開發(fā)者工具上進行開發(fā)的次洼;下載地址在上微信公...
    笑該動人d閱讀 245評論 0 1