微信小程序开发《3. 视图与渲染》

1 . 组件的基本使用

组件这里不详细记录了，就当做一个帮助文档来阅读；

官方文档

2 .数据的绑定

主要通过{{xxx}}来绑定数据

2.1 .js文件里面data的设置

Page({
  data: {
    text:'这里是内容！',
  }
})

2.2 .wxml里面的设置

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

3 .渲染标签的使用

可以通过事件来进行切换；

.js文件

Page({
  data: {
    news: ['aaa', 'bbb', 'ccc'],
    show : false,
    primary:'默认',
    text:'这里是内容！',
    },

  btnClick :function(){
    console.log('绑定事件，会输出事件~！')

    var isShow = this.data.show;
    console.log("isShow :"+isShow)

    var newsdata= this.data.news;
    newsdata.shift()

    this.setData({text:"修改text的值！",show:!isShow,news:newsdata})

   
  }
})

.wxml文件

<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="btnClick"> {{primary}} </button>

3.1 条件标签

.wxml文件

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

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

3.2 循环标签

.wxml文件

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

4 .模板的使用

4.1 include方式

header.wxml

<text>头模板文件</text>

first.wxml

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

4.2 template 方式

footer.wxml

<template name = "footer1">底部内容1</template>

<template name = "footer2">底部内容2{{text}}</template>

first.wxml

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

练习程序：