43/666 HJDS| 微信小程序之WXML特性

hongjun

这是666计划的第43篇笔记

本微信小程序是极客时间“9小时搞定微信小程序开发”系列的笔记。

微信小程序开发框架--基本构成

image

wxml是描述内容

wxss是描述样式

wxs是对wxml之上的增强

WXML语法

image

<view class='classname' data-name="A">
  Helloworld
  <view>Hello China</view>
</view>

效果：

image

WXML特性1： 数据绑定

数据绑定的意思是， 可以在页面动态显示数据， 传递变量值。

index.wxml

<view>
    <text>{{message}}</text>
</view>

index.js

Page({
    data: {
        message: "Hello, world"
    }
})

WXML特性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"},
      { name: "商品C"},
      { name: "商品D"},
      { name: "商品E"}
    ]
  }
})

WXML特性3： 条件渲染

index.wxml:

<view>
  今天吃什么？
</view>

<view wx:if="{{condition === 1}}"> 饺子 </view>

<view wx:elif="{{condition === 2}}"> 米饭 </view>

<view wx:else> 面食 </view>

index.js

Page({
  data: {
    condition: Math.floor(Math.random()*3+1)
  }
})

效果：

image

hidden 和ifelse的区别

hidden初始化消耗较大， 所以适合后期的频繁切换

ifelse有切换消耗， 适合非频繁切换

WXML特性4： 模板与模板引用

作用： 复用页面元素

index.wxml:

<template name="tempItem">
  <view>
    <view>收件人： {{name}}</view>
    <view>phone： {{phone}}</view>
    <view>地址： {{address}}</view>
  </view>
</template>

<template is="tempItem" data="{{...item}}"></template>
<!--
这里的... 用法， 是es6的一个扩展运算符语法，可以将对象或数组进行解构赋值
>

wxml也可以不用三个点解构方式：

<template name="tempItem">
  <view>
    <view>收件人： {{item.name}}</view>
    <view>phone： {{item.phone}}</view>
    <view>地址： {{item.address}}</view>
  </view>
</template>

<template is="tempItem" data="{{item}}"></template>

index.js

Page({
  data: {
    item: {
      name: "张三",
      phone: "19988999999",
      address: "中国"
    }
  }
})

模板引用 import

index.wxml:

<import src="a.wxml"></import>
<template is="a"></template>

a.wxml:

<import src="b.wxml"/>
<template name="a">
 This is a.wxml
</template>

<!-- 引用了b， 但是b显示不出来， 只显示a， 避免了死循环>
<template is="b"> </template>

b.wxml:

<template name="b">
 this is b.wxml
</template>

理解： 微信小程序对import做了限制， 只能引用明确的template is的模板， 嵌套的内容不予理会。

模板引用之include

就是简单的copy代码过来。 和include自身的含义一致。