小程序的视图与渲染

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

组件的基本使用

<!--index.wxml-->
<button type='default' hover-class='other-button-hover'>default</button>
<button type='primary'>primary</button>

编译后显示：

数据绑定

微信小程序开发者文档

<!--index.wxml-->
<button type='default' hover-class='other-button-hover'>default</button>
<button type='primary'>primary</button>

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

双括号内是被绑定的数据，我们需要在index.js文件中给该数据赋值。

编译之后，我们的页面就会出现text的内容：

我们还可以为按钮设置绑定的文字：

<!--index.wxml-->
<button type='default' hover-class='other-button-hover'>default</button>
<button type='primary'>{{btnText}}</button>

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

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    text : "这里是内容",
    btnText : "这是按钮的内容",
    motto: 'Hello World',
    userInfo: {},
    dots:true
  },
  ...
})

如何动态更改绑定的数据的内容呢？我们可以给按钮添加一个点击事件，首先先来尝试添加一个点击事件。

<!--index.wxml中给button绑定点击事件btnClick-->
<button type='primary' bindtap='btnClick'>{{btnText}}</button>

// index.js中添加如下的函数
 btnClick : function() {
    console.log("按钮被点击了")
  },

这里写图片描述
点击按钮，后台会打印出我们要打印的内容，说明正常监听到了按钮的点击事件，下面通过点击按钮来实现动态改变数据。

btnClick : function() {
    console.log("按钮被点击了")
    this.setData({text:"这是新更改的内容"})
  },

点击按钮，原来text的内容为“这里是内容”，现在变成了“这是新更改的内容”，我们的动态更改数据就成功了，js文件中更改数据都是调用下面这个函数。

this.setData({
    ...
    })

渲染标签

微信小程序开发者文档
微信小程序为我们提供了两种类型的渲染标签，一种是条件标签。

<!--index.wxml-->
<button type='default' hover-class='other-button-hover'>default</button>
<button type='primary' bindtap='btnClick'>{{btnText}}</button>

<view wx:if="{{false}}">{{text}}</view>

<view wx:if="{{false}}">{{text}}</view>

此时即使点击按钮，也不会显示任何内容，因为条件是永假的，所以text的内容永远不会显示。
现在添加一个变量show来控制内容的显示与否。

data: {
    text : "这里是内容",
    btnText : "这是按钮的内容",
    show : true,
    ...
  },
 btnClick : function() {
    console.log("按钮被点击了")
    var isShow = this.data.show
    this.setData({text:"这是新更改的内容", show:!isShow})
  },

<view wx:if="{{show}}">{{text}}</view>

这时再点击按钮，则该view会连续地切换显示与不显示。下面再添加一个else标签。

<view wx:if="{{show}}">{{text}} 1 </view>
<view wx:else>{{text}} 2 </view>

这样因为上下两个标签一个条件为真，另一个就为假，所以会轮换地显示1和2。
除了条件标签外，还有循环标签。
在index.wxml 中添加一个循环渲染标签，循环的数组里共有三个元素，所以界面会显示三次“循环内容…”。

<view wx:for="{{['aaa','bbb','ccc']}}">
   循环内容...
</view>

循环的数组更常见的是data中定义的数组，{{item}} 代表数组的每一个元素。

data: {
    text : "这里是内容",
    btnText : "这是按钮的内容",
    show : true,
    news: ['aaa', 'bbb', 'ccc'],
   ...
  },

<view wx:for="{{news}}"> {{item}} </view>

如果不想让我们循环数组的元素名为item，我们也可以更改它的名字。

<view wx:for="{{news}}" wx:for-item="itemx"> {{itemx}} </view>

还可以通过index 来显示当前循环的索引。

<view wx:for="{{news}}" wx:for-item="itemx"> {{index}} {{itemx}} </view>

现在来试试动态更改news数组的值，再次在点击按钮的事件中添加一些操作。

btnClick : function() {
    console.log("按钮被点击了")
    var isShow = this.data.show
    var newsData = this.data.news
    newsData.shift()  // 删除第一个元素
    this.setData({text:"这是新更改的内容", show:!isShow, news:newsData})
  },

点击按钮后bbb变成了第一个元素，数组的动容实现了动态更改，页面的显示内容也由于和数组的变化而实时地发生了改变。
index 的名字也是可以更改的，方法和item 的类似。

<view wx:for="{{news}}" wx:for-item="itemx" wx:for-index="indexx"> {{indexx}} {{itemx}} </view>

模板的使用

我们的小程序中，可能很多页面都是使用同一个顶部与同一个底部，这一部分的代码就可以被很多页面所共用，这种情况下，我们就可以把这部分内容单独提取成一个模板，每个页面都将其加载进来即可。
在Pages目录下新建一个目录名为template，在其下新建一个wxml文件，我们在这个文件里写我们的模板。

然后，在其他页面要显示这个模板的地方，将这个wxml包含进来。

效果如下：

还有另一种方式添加模板，我们再在template目录下新建一个footer.wxml文件，编写另外一种方式的模板。

<template> 不能通过include 的方式加载，要用import。

每个页面要在模板中显示的数据可能不同，这时我们可以给模板中添加绑定的数据：

<template name="footer"> 这里是底部内容 - {{text}} </template>

在显示模板处给模板中的数据赋值：

<import src="../template/footer" />
<template is="footer" data="{{text:'导入设置的内容'}}"/>