搜尋
首頁微信小程式微信開發微信小程式頁面開發
微信小程式頁面開發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刪除
微信小程序架构原理基础详解微信小程序架构原理基础详解Oct 11, 2022 pm 02:13 PM

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于基础架构原理的相关内容,其中包括了宿主环境、执行环境、小程序整体架构、运行机制、更新机制、数据通信机制等等内容,下面一起来看一下,希望对大家有帮助。

微信小程序云服务配置详解微信小程序云服务配置详解May 27, 2022 am 11:53 AM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于云服务的配置详解,包括了创建使用云开发项目、搭建云环境、测试云服务等等内容,下面一起来看一下,希望对大家有帮助。

微信小程序常用API(总结分享)微信小程序常用API(总结分享)Dec 01, 2022 pm 04:08 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要总结了一些常用的API,下面一起来看一下,希望对大家有帮助。

浅析微信小程序中自定义组件的方法浅析微信小程序中自定义组件的方法Mar 25, 2022 am 11:33 AM

微信小程序中怎么自定义组件?下面本篇文章给大家介绍一下微信小程序中自定义组件的方法,希望对大家有所帮助!

微信小程序实战项目之富文本编辑器实现微信小程序实战项目之富文本编辑器实现Oct 08, 2022 pm 05:51 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于富文本编辑器的实战示例,包括了创建发布页面、实现基本布局、实现编辑区操作栏的功能等内容,下面一起来看一下,希望对大家有帮助。

西安坐地铁用什么小程序西安坐地铁用什么小程序Nov 17, 2022 am 11:37 AM

西安坐地铁用的小程序为“乘车码”。使用方法:1、打开手机微信客户端,点击“发现”中的“小程序”;2、在搜索栏中输入“乘车码”进行搜索;3、直接定位城市西安,或者搜索西安,点击“西安地铁乘车码”选项的“去乘车”按钮;4、根据腾讯官方提示进行授权,开通“乘车码”业务即可利用该小程序提供的二维码来支付乘车了。

微信小程序开发工具介绍微信小程序开发工具介绍Oct 08, 2022 pm 04:47 PM

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于开发工具介绍的相关内容,包括了下载开发工具以及编辑器总结等内容,下面一起来看一下,希望对大家有帮助。

简单介绍:实现小程序授权登录功能简单介绍:实现小程序授权登录功能Nov 07, 2022 pm 05:32 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了怎么实现小程序授权登录功能的相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

Safe Exam Browser

Safe Exam Browser

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

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),