WXML 模板

從事過網(wǎng)頁編程的人知道，網(wǎng)頁編程采用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結(jié)構(gòu)，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和用戶的交互。

同樣道理，在小程序中也有同樣的角色，其中 WXML 充當?shù)木褪穷愃?HTML 的角色。打開 pages/index/index.wxml，你會看到以下的內(nèi)容:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

和 HTML 非常相似，有標簽、屬性等等構(gòu)成。但是也有很多不一樣的地方，我們來一一闡述一下：

1. 標簽名字有點不一樣 往往寫 HTML 的時候，經(jīng)常會用到的標簽是 div, p, span，開發(fā)者在寫一個頁面的時候可以根據(jù)這些基礎(chǔ)的標簽組合出不一樣的組件，例如日歷、彈窗等等。換個思路，既然大家都需要這些組件，為什么我們不能把這些常用的組件包裝起來，大大提高我們的開發(fā)效率。 從上邊的例子可以看到，小程序的 WXML 用的標簽是 view, button, text 等等，這些標簽就是小程序給開發(fā)者包裝好的基本能力，我們還提供了地圖、視頻、音頻等等組件能力 更多詳細的組件講述參考下個章節(jié) 小程序的能力

   • 共2頁:
   • 上一頁
   • 1
   • 2
   • 下一頁
   轉(zhuǎn)載請注明本文地址：http://m.szhjhs.com/miniprogram/25.html

2. 上一篇：JSON 配置
3. 下一篇：小程序在 WXSS 也做了一些擴充和修改。