미니 프로그램 개발 소개: WXML 이해

이 기사에서는 소규모 프로그램의 초급 개발에서 WXML에 대해 자세히 설명합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

개발 프레임워크 구성 소개

작은 프로그램의 개발 프레임워크는 크게 WXML, WXSS, WXS, Java Script 네 부분으로 구성됩니다.

1. WXML은 페이지의 내용을 설명하는 데 사용됩니다.

3. WXS는 사용자 논리와 데이터 통신을 처리하는 데 사용됩니다. wxml이 페이지 구조를 신속하게 구축할 수 있도록 요청된 데이터에 대한 계산을 수행할 수 있는 WXML 기능 향상

WXML 구문

WXML(weixin 마크업 언어)

<태그 이름 속성 이름= "속성 이름 1" 속성 이름="속성 이름 2" ...>

WXML 기능

WXML에는 데이터 바인딩이라는 총 4가지 언어 기능이 있습니다. 목록 렌더링, 조건부 렌더링 및 템플릿 참조1. 데이터 바인딩:

<!--index.wxml-->
<view>
  <text>{{message}}</text>
</view>
---------------------------------------------------
<!--index.js-->
Page
( 
  {
     data:
          {
            message:"Hello,world!"
          }
  }
)

2. 목록 렌더링

<!--index.wxml-->
<view>
  <block wx:for="{{items}}"  wx:for-item="{{item}}"  wx:key="index">
    <view>{{index}}:{{item.name}}</view>
  </block>
</view>
------------------------------------------
<!--index.js-->
Page
(
  {
    data:
        {
          items:[
                {name:"商品A"}
                {name:"商品B"}
                ]
        }
  }
)

4. 템플릿 및 참조

<!--index.xwml-->
<view>今天吃什么？<view>
<view wx:if="{{condicition===1}}">当然是吃饺子啦！</view>
<view wx:elif="{{condicition===2}}">可以考虑吃面条！</view>
<view wx:else>米饭把米饭吧</view>
-----------------------------------------------------------
<!--index.js-->
Page
(
 {
   data:
       {
       condicition:Math.floor(Math.random()*3+1)
       }
 }
)

<!--index.wxml 模板-->
<template name="template">
  <view>
    <view>收件人：{{name}}</view>
    <view>联系方式：{{phone}}</view>
    <view>地址：{{address}}</view>
  </view>
</template>
<template is="template" data="{{...item}}" ></template>
--------------------------------------------------------------------
<!--index.js-->
Page
( 
  {
    data:
         {
           item:
                {
                  name="张三",
                  photo="1212123",
                  address="China"
                }
         }
  }
)

참고: 참조는 중첩될 수 없습니다. 참고: 포함마스터 버전을 제외한 모든 콘텐츠 복사

이 문서는 https://blog.csdn.net/yue__shen/article/details/90384729

권장: "

Mini 프로그램 개발 튜토리얼

"
에서 복제되었습니다.

위 내용은 미니 프로그램 개발 소개: WXML 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!