WXML語(yǔ)法

WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。

1. 數(shù)據(jù)綁定

  <!--數(shù)據(jù)綁定使用 Mustache 語(yǔ)法（雙大括號(hào)）將變量包起來(lái)-->
  <view> {{ message }} </view>
  <view id="item-{{id}}"> </view>
  <view wx:if="{{condition}}"> </view>
  <checkbox checked="{{false}}"> </checkbox>
  <!-- WXML 中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data-->
  Page({
    data: {
      message: 'Hello 微信小程序!',
  	id:0,
  	condition:false
    }
  })

注意事項(xiàng): 小程序中為單項(xiàng)數(shù)據(jù)流 model —> view
修改數(shù)據(jù)： this.setData({message: ‘修改之后的數(shù)據(jù)’}, callback)

2. 列表渲染

   <!--使用 wx:for 綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件-->
   <!--默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item-->
   <view wx:for="{{array}}">
     {{index}}: {{item.name}}
   </view>
   <!--
   	自定義
   	1.使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名
   	2.使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名
   -->
   <view wx:for="{{array}}" wx:for-index="id" wx:for-item="itemName">
     {{id}}: {{itemName.name}}
   </view>
   
   Page({
     data: {
       array: [{
         name: '微信',
       }, {
         name: '小程序'
       }]
     }
   })

wx:for 也可以嵌套

   <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
     <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
       <view wx:if="{{i <= j}}">
         {{i}} * {{j}} = {{i * j}}
       </view>
     </view>
   </view>

在 <block/>標(biāo)簽上用wx:for，可以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。

注意： <block/> 并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會(huì)在頁(yè)面中做任何渲染，只接受控制屬性 。

   <block wx:for="{{[1, 2, 3]}}">
     <view> {{index}}: </view>
     <view> {{item}} </view>
   </block>

wx:key用來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符。

wx:key 的值以兩種形式提供：1. 字符串，數(shù)組中的一個(gè)item的屬性，如id（唯一的字符串或者數(shù)字）；2. 保留關(guān)鍵字*this,表示for循環(huán)中item本身（item本身需要是唯一的）。
當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。
如不提供 wx:key，會(huì)報(bào)一個(gè) warning， 如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序，可以選擇忽略。
3. 條件渲染
wx:if="" 用來(lái)判斷是否需要渲染該代碼塊。

   <view wx:if="{{condition}}">顯示</view>
   <!--也可以使用 wx:elif 和 wx:else -->
   <view wx:if="{{num>=90}}">A</view>
   <view wx:elif="{{num>=70}}">B</view>
   <view wx:elif="{{num>=60}}">C</view>
   <view wx:else>D</view>
   <!-- wx:if 是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè) 標(biāo)簽將多個(gè)組件包裝起來(lái)，并在上邊使用 wx:if控制屬性。 -->
   <block wx:if="{{condition}}">
     <view> view1 </view>
     <view> view2 </view>
   </block>
   
   Page({
   	data:{
   		condition:true,
   		num:85
   	}
   })

wx:if VS hidden

hidden 用法: <view hidden='{{true}}'></view>

wx:if條件為 false 的時(shí)候不加載，條件切換的時(shí)候決定元素銷毀或者重新加載渲染 。

hidden 始終加載元素, 條件切換的時(shí)候決定元素的顯示和隱藏 。

注意： 1. 頻繁切換時(shí)，建議使用hidden；2. 控制條件復(fù)雜時(shí)，建議使用 wx:if 搭配wx:elif、wx:else進(jìn)行展示與隱藏的切換。

4. 模板（template）

在模板中定義代碼片段，然后子啊不同的地方調(diào)用。

   <!--使用 name 屬性，作為模板的名字。然后在<template/>內(nèi)定義代碼片段-->
   <template name="msg">
   	<view>
       	<text> {{index}}: {{msg}} </text>
       	<text> Time: {{time}} </text>
       </view>
   </template>
   <!--使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入-->
   <!--...item:對(duì)象解構(gòu)-->
   <template is="msg" data="{{...item}}"></template>
   
   Page({
     data: {
   	//數(shù)據(jù)源
       item: {
         index: 1,
         msg: '測(cè)試信息',
         time: '2022-05-20'
       }
     }
   })

1. is 屬性可以使用{{item % 2 == 0 ? ‘even’ : ‘odd’}}( Mustache 語(yǔ)法)，來(lái)動(dòng)態(tài)決定具體需要渲染哪個(gè)模板
2. 模板擁有自己的作用域，只能使用 data 傳入的數(shù)據(jù)以及模板定義文件中定義的 <wxs/> 模塊。
3. 引用
   WXML 提供兩種文件引用方式import和include。
   1. import 只會(huì) import 目標(biāo)文件中定義的 template，而不會(huì) import 目標(biāo)文件 import 的 template。
   2. include 可以將目標(biāo)文件除了 <template> <wxs/> 外的整個(gè)代碼引入，相當(dāng)于是拷貝到 include 位置 。

常用組件

詳見組件頁(yè)面：https://developers.weixin.qq.com/miniprogram/dev/component/

事件

什么是事件？

• 事件是視圖層到邏輯層的通訊方式。
• 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
• 事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
• 事件對(duì)象可以攜帶額外信息，如 id, dataset, touches。

事件的使用方式

1. 在組件中綁定一個(gè)事件處理函數(shù)

   <view id="tapTest" data-hi="Weixin" bindtap="tapName">點(diǎn)擊</view>
   

2. 在響應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)

   Page({
       tapName:function(event){
           console.log(event.target.dataset.hi)
       }
   })
   

WXML的常用冒泡事件列表

綁定方式

1. bind 綁定：事件綁定不會(huì)阻止冒泡事件向上冒泡 。

<view bindtap="handleTap" class='start_container'>
 	<text class='start'>開啟小程序之旅</text>
</view>

2. catch 綁定: 事件綁定可以阻止冒泡事件向上冒泡 。

<view catchtap="handleTap" class='start_container'>
 	<text class='start'>開啟小程序之旅</text>
</view>

事件對(duì)象

組件觸發(fā)事件時(shí)，邏輯層綁定該事件的處理函數(shù)會(huì)收到一個(gè)事件對(duì)象。


target 和 currentTarget中包含id和dataset屬性。
id 屬性：當(dāng)前組件的id 。
dataset屬性： 當(dāng)前組件上由data-開頭的自定義屬性組成的集合 （ 用于事件的邏輯處理 ）。
在 WXML 中，這些自定義數(shù)據(jù)以 data- 開頭，多個(gè)單詞由連字符 - 連接。這種寫法中，連字符寫法會(huì)轉(zhuǎn)換成駝峰寫法，而大寫字符會(huì)自動(dòng)轉(zhuǎn)成小寫字符。如：

為組件提供data-自定義屬性傳參，其中代表的是參數(shù)的名字。

event.target 和 event.currentTarget 的區(qū)別

1. event.target 是觸發(fā)事件的對(duì)象，但不一樣是綁定事件的對(duì)象，如： 事件委托， 冒泡 。
2. currentTarget 觸發(fā)時(shí)間的對(duì)象一定是綁定事件的對(duì)象， 沒有事件委托
   事件對(duì)象傳參
   

下拉刷新效果的實(shí)現(xiàn)

1. 啟用下拉刷新有兩種方式:
   ①全局開啟下拉刷新
   在app.json的window節(jié)點(diǎn)中，將enablePullDownRefresh設(shè)置為true
   ②局部開啟下拉刷新
   在頁(yè)面的.json配置文件中，將enablePullDownRefresh設(shè)置為true

2. 在全局或頁(yè)面的.json配置文件中，通過(guò)backgroundColor和backgroundTextStyle來(lái)配置下拉刷新窗口
   的樣式，其中:

   ? backgroundColor用來(lái)配置下拉刷新窗口的背景顏色，僅支持16進(jìn)制的顏色值
   ? backgroundTextStyle用來(lái)配置下拉刷新loading的樣式，僅支持dark和light

3. 在頁(yè)面的.js 文件中，通過(guò)onPullDownRefresh()函數(shù)即可監(jiān)聽當(dāng)前頁(yè)面的下拉刷新事件。

4. 停止刷新的效果

   當(dāng)處理完下拉刷新后，下拉刷新的loading效果會(huì)一-直 顯示，不會(huì)主動(dòng)消失，所以需要手動(dòng)隱藏loading效果。此時(shí)，調(diào)用wx.stopPullDownRefresh()可以停止當(dāng)前頁(yè)面的下拉刷新。

上拉觸底事件

上拉觸底是移動(dòng)端的專有名詞，通過(guò)手指在屏幕上的.上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為。

上拉觸底距離指的是觸發(fā)上拉觸底事件時(shí)，滾動(dòng)條距離頁(yè)面底部的距離。
可以在全局或頁(yè)面的json配置文件中，通過(guò)onReachBottomDistance屬性來(lái)配置.上拉觸底的距離。
小程序默認(rèn)的觸底距離是50px,在實(shí)際開發(fā)中，可以根據(jù)自己的需求修改這個(gè)默認(rèn)值。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-484232.html

微信小程序開發(fā)小技巧

1. 小程序的初學(xué)者可能對(duì)于小程序的官網(wǎng)的眾多內(nèi)容一時(shí)毫無(wú)頭緒，無(wú)從下手不知道從哪 來(lái)找想要的內(nèi)容
2. 當(dāng)在小程序中想要實(shí)現(xiàn)某一種布局，查看：組件
3. 當(dāng)在小程序中想要實(shí)現(xiàn)某一個(gè)功能，查看: API
4. 當(dāng)在小程序中想要進(jìn)行某一個(gè)配置或者某一種頁(yè)面語(yǔ)法，查看: 框架 + 指南
5. 查看小程序官網(wǎng)的時(shí)候要細(xì)心，最好是將要使用的 API 的相關(guān)內(nèi)容看完整，因?yàn)?API 的 配置及限制較多

到了這里，關(guān)于微信小程序——基本語(yǔ)法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！