WeChat mini program page development

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>

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 processingLogical 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!'
  }
})

List rendering

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

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'
  }
})

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>

block and wx:for:

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

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!