搜尋
首頁微信小程式微信開發微信小程式頁面開發

微信小程式頁面開發

Jul 02, 2020 am 09:46 AM
微信小程式

WXML(WeiXin Markup Language)是框架設計的一套標籤語言,結合基礎元件、事件系統,可以建構出頁面的結構。

我覺得WXML 透過三個緯度來介紹:縱向、橫向、邏輯處理. 這裡先介紹個簡單介紹,它們也是開發小程式的基礎,需要的時候可以根據文檔具體使用, 以後介紹具體功能時候再擴充。

縱向

縱向: 也就是元件的組合,包括:系統元件、第三方元件、自訂元件.

#例如:

<view>
  <view>
      <image></image>
      <text> 用户名 </text>
  </view>
</view>

系統元件:

  • 檢視容器:cover-image、cover-view、movable-area、movable-view、scroll-view、swiper、swiper-item、view

  • 基礎內容:icon、progress、rich-text、text

  • 表單元件:button、checkbox、checkbox-group、editor、form 、input、label、picker、picker-view、picker-view-column、radio、radio-group、slider、switch、textarea

  • 導覽:functional-page-navigator、navigator

  • 媒體元件:audio、camera、image、live-player、live-pusher、video

  • 地圖:map

  • 畫布:canvas

  • 開放能力:ad、official-account、open-data、web-view

  • 原生元件說明:native-component

  • 無障礙存取:aria-component

  • 導覽列:navigation-bar

  • #頁面屬性配置節點:page-meta

具體使用參考:
https://developers.weixin.qq.com/miniprogram/dev /component/native-component.html

第三方元件: 例如WeUI 元件庫等

##自訂元件:自訂元件擁有自己的wxml 範本和wxss 樣式

橫向

橫向: 元件的屬性

屬性名稱#描述id唯一識別class樣式表style內聯樣式#hiddenhidden#data-*事件傳遞資料

bind* /catch*

#元件事件

邏輯處理

邏輯處理: 根據綁定好的資料決定怎麼顯示視圖

#資料綁定

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})
清單渲染

<!--wxml-->
<view> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

條件渲染

<!--wxml-->
<view> WEBVIEW </view>
<view> APP </view>
<view> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

用於包裹檢視元件的block

如果wx: for、wx:if 要渲染視圖容器,可以用block 標籤包裹,block 標籤不是一個元件,只是一個用於包裝的元素,不會被渲染,並且只接受wx:.. 控制屬性。 ######block 和 wx:if:###
<block>
  <view> view1 </view>
  <view> view2 </view>
</block>
###block 和 wx:for:###
<block>
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
###推薦教學:《###微信小程式###》###

以上是微信小程式頁面開發的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:简书。如有侵權,請聯絡admin@php.cn刪除

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具