微信小程序开发《三》 WXML

浅浅的花香味﹌ 2021-09-19 10:48 388阅读 0赞

# 定义 #

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

# 数据绑定 #

< view>\{ \{message\}\}  
// page.js  
Page(\{  
data: \{  
message: ‘Hello MINA!’  
\}  
\})

## 代码 ##

wxml

<text>{
       {msg}}</text>

js:

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    msg:'hello zhang!'
      },

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70]

# 列表渲染 #

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

# 条件渲染 #

< view wx:if="{
       {view == 'WEBVIEW'}}">WEBVIEW</ view>
    < view wx:elif="{
       {view == 'APP'}}">APP</view>
    < view wx:else="{
       {view == 'MINA'}}">MINA</view>
    // page.js
    Page({
      data: {
        view: 'MINA'
      }
    })

# 模板 #

使用模板  
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<template name="staffName">
      < view>FirstName: {
       {firstName}}, LastName: {
       {lastName}}</view>
    </template>
    
    <template is="staffName" data="{
       {...staffA}}"></template>
    <template is="staffName" data="{
       {...staffB}}"></template>
    <template is="staffName" data="{
       {...staffC}}"></template>
    // page.js
    Page({
      data: {
        staffA: {firstName: 'Hulk', lastName: 'Hu'},
        staffB: {firstName: 'Shang', lastName: 'You'},
        staffC: {firstName: 'Gideon', lastName: 'Lin'}
      }
    })

# 代码 #

<text>{
       {msg}}</text>
    
    
    <view wx:for="{
       {array}}">{
       {item}}</view>
    
    
    <view wx:if="{
       {view == 'WEBVIEW'}}">WEBVIEW</view>
    <view wx:elif="{
       {view == 'APP'}}">APP</view>
    <view wx:else="{
       {view == 'MINA'}}">MINA</view>
    
    
    
    <template name="staffName">
      <view>FirstName: {
       {firstName}},----- LastName: {
       {lastName}}</view>
    </template>
    
    <template is="staffName" data="{
       {...staffA}}"></template>
    <template is="staffName" data="{
       {...staffB}}"></template>
    <template is="staffName" data="{
       {...staffC}}"></template>

data: {
        msg:'hello zhang!',
        view:'APP111',
        array: [1, 2, 3, 4, 5],
        staffA: { firstName: 'Hulk', lastName: 'Hu' },
        staffB: { firstName: 'Shang', lastName: 'You' },
        staffC: { firstName: 'Gideon', lastName: 'Lin' }
      },

效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 1]

官网文档地址： [微信平台官网][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70]: /images/20210726/842b11ed8fa748bda829fb04e5bddaab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 1]: /images/20210726/e8037b5ab1e5464c900f04b77c297c08.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/index.html