Home > WeChat Applet > WeChat Development > WeChat mini program page development

WeChat mini program page development

hzc
Release: 2020-07-02 09:46:46
forward
3316 people have browsed it

WXML (WeiXin Markup Language) is a set of tag languages ​​designed by the framework. Combined with basic components and event systems, it can build the structure of the page.

I think WXML is introduced through three dimensions: vertical, horizontal, and logical processing. Here is a brief introduction. They are also the basis for developing small programs. You can use them according to the document when needed. The details will be introduced later. The function will be expanded when time comes.

Vertical

Vertical: That is, the combination of components, including: system components, third-party components, custom components.

For example:

<view class="container">
  <view class="userinfo">
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname"> 用户名 </text>
  </view>
</view>
Copy after login

System components:

  • View container: cover-image, cover-view, movable-area, movable-view, scroll-view, swiper, swiper-item, view

  • Basic content: icon, progress, rich-text, text

  • Form components: button, checkbox, checkbox-group, editor, form , input, label, picker, picker-view, picker-view-column, radio, radio-group, slider, switch, textarea

  • Navigation: functional-page-navigator, navigator

  • Media components: audio, camera, image, live-player, live-pusher, video

  • Map: map

  • Canvas: canvas

  • ##Open capabilities: ad, official-account, open-data, web-view

  • Native Component description: native-component

  • Accessibility: aria-component

  • Navigation bar: navigation-bar

  • Page attribute configuration node: page-meta

Specific reference:


https://developers.weixin.qq.com/miniprogram/dev /component/native-component.html

##Third-party components

: For example, WeUI component library, etc.

Custom components

: Custom The component has its own wxml template and wxss styleHorizontal

Horizontal: component attributes

##Attribute name DescriptionidUnique identificationclassStyle SheetstyleInline stylehiddenhiddendata-*Event delivery databind* /catch*Component eventLogical processing
Logical processing: Determine how to display the view based on the bound data

Data binding

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})
Copy after login
List rendering

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})
Copy after login
Conditional 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'
  }
})
Copy after login
The block used to wrap the view component

If wx: for, wx:if To render a view container, you can wrap it with a block tag. The block tag is not a component, but an element used for packaging. It will not be rendered and only accepts wx:.. control attributes.

block and wx:if:

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
Copy after login
block and wx:for:

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
Copy after login
Recommended tutorial: "

WeChat Mini Program

"

The above is the detailed content of WeChat mini program page development. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template