零基础学习微信小程序（下）

零基础学习微信小程序（下）

六、模板语法

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

6.1 数据绑定

6.1.1 普遍写法

<view>{{ message }}</view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

6.1.2 组件属性

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

Page({
  data: {
    id: 0
  }
})

• 使用 Boolean 类型充当属性

• 字符串和花括号之间一定不要存在空格，否则会导致识别失败。

6.2 运算

6.2.1 三元运算

<view hidden="{{flag ? true : false}}">Hidden</view>

6.2.2 算数运算

<view>{{a + b}} + {{c}} + d</view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3,
  }
})

6.2.3 逻辑判断

<view wx:if="{{length > 5}}"></view>

6.2.4 字符串运算

<view>{{"hello" + name}}</view>

6.3 列表渲染

6.3.1 wx:for

1. 项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名。

2. 下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名。

3. wx:key 用来提高数组渲染的性能。

4. wx:key 绑定的值，有以下几种选择：

• String 类型，表示循环项中的唯一属性。

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]

保留字 this 它的意思是 item 本身，*this 代表的必须是唯一的字符串和数组。

list[1,2,3,4,5]
wx:key="*this"

1.只有一层循环的时候，wx:for-item="item" 和 wx:for-index="index" 可以省略。

6.3.2 block

• 渲染一个包含多字节的结构块 block 最终不会变成真正的 DOM 元素。

6.4 条件渲染

6.4.1 wx:if

• 在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块。
  

<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>

6.4.2 hidden

    <view hidden="{{condition}}">True</view>

• 类似 wx:if 。
• 频繁切换用 hidden ，不常使用 wx:if 。
• hidden 属性不要和样式 display 一起使用。

七、小程序事件的绑定

1. 小程序绑定事件，通过 bind 关键字来实现。如 bindtap、bindinput、bindchange 等。

2. 不同的组件支持不同的事件。

7.1 wxml

<input bindinput="handleInput" />

7.2 page

Page({
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了！")
  }
})

.3 特别注意

1. 绑定事件时不能带参数，不能带括号，以下为错误写法：

<input bindinput="handleIput(100)" />

2.事件传值，通过标签自定义属性的方式和 value 。

八、常见组件

8.1 view

1. 代替原来的 div 标签。

<view hover-class="h-class">
点击我试试
</view>

8.2 text

1. 文本标签。
2. 只能嵌套 text 。
3. 长按文字可以复制（只有该标签有这个功能）。
4. 可以对空格 回车进行编码。

8.3 image

1. 图片标签，image 组件默认宽度 320px、高度 240px 。

2. 支持懒加载。

8.4 swiper

微信内置轮播图组件。

1. 轮播图外层容器 swiper 。

2. 每一个轮播项 swiper-item 。

3. swiper 标签存在默认样式。

• width：100%
• height：150px
• image 存在默认宽度和高度（1125 * 352 px）
• swiper 高度无法实现由内容撑开。

4.先找出来原图的宽度和高度，等比例给 swiper 定宽度和高度。

• swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度

8.4.1 swiper

• 滑块视图容器

8.5 navigator

导航组件，类似超链接标签

块级元素，默认会换行，可以直接加宽度和高度。

open-type 有效值

8.6 rich-text

富文本标签：

可以将字符串解析成对应标签，类似 Vue 中的 v-html 功能。

通过 HTML String 渲染

<div class="div_class">
  <h1>
    Title
  </h1>
  <p class="p">
    Life is&nbsp;<i>like</i>&nbsp;abox of
    <b>&nbsp;chocolates</b>
  </p>
</div>

8.7 button

<button
   type="defult"
   size="{{defaultSize}}"
   loading="loading"
   plain="plain"
>
  default
</button>

size 的合法值

type 的合法值

open-type 的合法值

8.8 icon

8.9 radio

可以通过 color 属性来修改颜色。

• 需要搭配 radio-group 一起使用。

8.10 checkbox

可以通过 color 属性来修改颜色。

• 需要搭配 checkbox-group 一起使用。

九、自定义组件

类似 Vue 或者 React 中的自定义组件。

• 小程序允许使用自定义组件的方式来构建页面。

9.1 创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。

• 可以在微信开发者工具中快速创建组件的文件结构。

1. 页面 .js 文件中，存放事件回调函数的时候，存放在 data 同层级下。

2. 组件 .js 文件中，存放事件回调函数的时候，必须要存放在 methods 中。

9.2 父组件向子组件传递数据

1. 父组件（页面）向子组件传递数据通过

• 在子组件上进行接收
• 把这个数据当成是 data 中的数据直接用即可。

<!-- 父组件wxml -->
<Tabs aaa="a123a"></Tabs>

// 子组件js
properties: {
  // 需要接收的数据的名称
  aaa: {
    // type:要接收的数据的类型
    type: String,
    // value: 默认值
    value: ''
  }
}

<!-- 子组件的wxml -->
<view>
</view>

9.3 slot 插槽

• 语法同 vue。

9.5 定义段与实例方法

Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。

9.6 组件-自定义组件传参

1. 父组件通过属性的方式给子组件传递参数。

2. 子组件通过事件的方式向父组件传递参数。

十、小程序生命周期

• 分为应用生命周期和页面生命周期。

10.1 应用生命周期

10.2 页面生命周期