微信小程序学习笔记 2.3.1 视图与渲染

主要记录自极客学院微信小程序学习视频

• 组件的基本使用
• 数据绑定
• 渲染标签
• 模板的使用

---

组件的基本使用

可查阅官网的基本教程：组件官网

数据绑定

//xx.wxml <text>{{textValue}}</text>   //用双大括号括起数据属性

//xx.jsPage({  /**   * 页面的初始数据   */  data: {    textValue : "内容"  // 在js文件的data中为 textValue 赋值  },  ...}

为按钮等添加点击事件

//xx.wxml<button type="primary" bindtap="btnClick" > {{btnText}} </button> <!-- bindtap="btnClick"即为为该button注册了按钮点击事件，响应的方法名为 "btnClick" --> 

//xx.jsPage({  /**   * 页面的初始数据   */  data: {    text : "内容",    btnText: "按钮内容"  },  ...  //按钮点击响应事件  btnClick: function () {      console.log("按钮被点击了")    this.setData({ text:"this is new content"});//动态修改了data中text的内容  }})

渲染标签

包括两种：条件标签、循环标签
参考资料

• 条件标签

<!-- 条件标签： wx:if="{{booleanValue}}" booleanValue为true/false，booleanValue也可设在js文件的data中--><view wx:if="{{false}}">{{text}}</view><view wx:else>{{text}} 2</view>

• 循环标签（列表渲染）
  关键语法：wx:for="" ，内容为数组{{['aaa','bbb','ccc']}},用两个大括号括起来。使用数组中的各项数据重复渲染该组件。默认数组当前项的下标变量名为index，数组当前项的变量名为item

<view wx:for="{{['aaa','bbb','ccc']}}">  {{index}} - {{item}}</view>

动态更改数组的值
shift() 方法可以剔除数组尾部的一个元素

Page({  /**   * 页面的初始数据   */  data: {    text : "内容",    btnText: "按钮内容",    show : false,    news: ['aaa', 'bbb', 'ccc']  },  ...  btnClick: function () {    console.log("按钮被点击了")    var newsData = this.data.news;    newsData.shift();//从数组尾部剔除一个元素    this.setData({      text:"新内容",      show:!this.data.show,      news:newsData    });  }})

模板的使用

• include导入模板

新建 header.wxml 文件

<text>这里是头部哈哈哈</text>

在其他wxml 文件中使用该头部模板

<include src="../templates/header"/>

• import 导入模板

新建 footer.wxml 文件,template即模板，使用name属性定义模板的名字

<template name="footer1">  这是底部内容1</template><template name="footer2">  这是底部内容2</template>

在其他wxml 文件中使用该头部模板

<import src="../templates/footer.wxml"/> //根据模板文件路径导入<template  is="footer1"/>  //使用is属性，声明需要使用的模板

参考资料

w3cschool-微信小程序 WXML