> 위챗 애플릿 > 위챗 개발 > WeChat 미니 프로그램 페이지 개발

WeChat 미니 프로그램 페이지 개발

hzc
풀어 주다: 2020-07-02 09:46:46
앞으로
3255명이 탐색했습니다.

WXML(WeiXin Markup Language)은 프레임워크에 의해 설계된 태그 언어 세트이며 기본 구성 요소 및 이벤트 시스템과 결합되어 페이지의 구조를 구축할 수 있습니다.

WXML은 수직, 수평, 논리적 처리의 3가지 차원을 통해 도입될 수 있다고 생각합니다. 또한, 작은 프로그램을 개발하는 데에도 기초가 되며 필요할 때 문서에 따라 사용할 수 있습니다. 나중에 특정 기능을 소개할 때 확장하세요.

Vertical

Vertical: 즉, 시스템 구성 요소, 타사 구성 요소, 사용자 정의 구성 요소를 포함한 구성 요소의 조합입니다.

예:

<view class="container">
  <view class="userinfo">
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname"> 用户名 </text>
  </view>
</view>
로그인 후 복사

System 구성 요소:

  • View 컨테이너: 덮개- 이미지, 표지 보기, 이동 가능 영역, 이동 가능 보기, 스크롤 보기, swiper, swiper-item, view

  • 기본 콘텐츠: 아이콘, 진행률, 서식 있는 텍스트, 텍스트

  • 양식 구성 요소: 버튼, 체크박스, 체크박스 -그룹, 편집기, 양식, 입력, 라벨, 선택기, 선택기 보기, 선택기 보기 열, 라디오, 라디오 그룹, 슬라이더, 스위치, 텍스트 영역

  • 탐색: 기능 페이지 탐색기, 탐색기

  • 미디어 구성 요소: 오디오, 카메라, 이미지, 라이브 플레이어, 라이브 푸셔, 비디오

  • Map: map

  • Canvas: canvas

  • Open 기능: 광고, 공식 계정, open -data, web-view

  • 네이티브 구성 요소 설명: 기본 구성 요소

  • 접근성: aria-comComponent

  • 탐색 모음: Navigation-bar

  • 페이지 속성 구성 노드: page-meta

사용을 위한 구체적인 참조:
https://developers.weixin.qq.com/miniprogram/dev/comComponent/native-comComponent.html

타사 구성 요소: 예를 들어 WeUI 구성 요소 라이브러리 등 .

사용자 정의 구성 요소 : 사용자 정의 구성 요소에는 자체 wxml 템플릿과 wxss 스타일이 있습니다.

수평

수평: 구성 요소 속성

logic processing logic processing : bound 데이터 바인딩
속성 이름 Description
id 고유 식별
class 스타일 시트
style inline style
hidden hidden
data-* 이벤트 전달 데이터
bind* /catch* 구성 요소 이벤트

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})
로그인 후 복사

rendering rendering

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})
로그인 후 복사
rendering
<!--wxml-->
<view wx:if="{{view == &#39;WEBVIEW&#39;}}"> WEBVIEW </view>
<view wx:elif="{{view == &#39;APP&#39;}}"> APP </view>
<view wx:else="{{view == &#39;MINA&#39;}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})
로그인 후 복사

에 기초하여 뷰를 표시하는 방법을 결정합니다. 뷰 컴포넌트 래핑

뷰 컨테이너를 wx:for 및 wx:if로 렌더링하려면 블록 태그로 래핑하면 됩니다. 블록 태그는 컴포넌트가 아니라 패키징용 요소입니다. wx:.. 제어 속성만 허용됩니다.

block 및 wx:if:

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
로그인 후 복사
block 및 wx:for:

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
로그인 후 복사
추천 튜토리얼: "WeChat Mini Program"

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

관련 라벨:
원천:jianshu.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿