1. 视图与渲染

1、组件的基本使用
组件一览：https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html
2、数据绑定
2.1绑定数据
例：<text>{{text}}</text>
在Page的data中定义
如:

Page({

 /**
  * 页面的初始数据
  */
 data: {
   text : "这里是内容",
   btnText : "这里是按钮文字"
 },

2.2数据动态变化

<text>{{text}}</text>
<button type="primary" size="{{primarySize}}" bindtap="btnClick"> primary </button>

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

3、渲染标签
if...else 和 for渲染

在视图层中用if...else条件来控制组件的显示与否，判断逻辑可以从data中拿；
可以在组件中循环输出data中的数据，如：
<!-- 条件判断标签-->
<view wx:if="{{show}}">{{text}}1</view>
<view wx:else>{{text}}2</view>
<button type="primary" size="{{primarySize}}" bindtap="btnClick"> primary </button>

<!-- 循环标签-->
<view wx:for="{{news}}" wx:for-item="itemx" wx:for-index="indexs">
{{indexs+1}}.{{itemx}}
</view>
<button type="primary" size="{{primarySize}}" bindtap="changeNews">更改新闻数据</button>


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

btnClick: function(){
    console.log("按钮被点击了");
    var isShow = this.data.show;
    this.setData({text:"这是一个新的内容",show:!isShow});
},
changeNews: function(){;
    var data = this.data.news;
    data.shift();
    this.setData({ news: data.reverse()});
}

4、模板的使用

<!-- 模板使用 -->
<!--
    使用情况：剥离页面公共部分，如公共头部和公共底部
    使用方法：include
-->
<include src="../templates/header" />
// 对应的模板内容
<text>
这里是头部控件的组件...
</text>

<import src="../templates/footer" />
<template is="footer2" data="{{text:'导入设置的内容'}}"/>
//对应的模板内容
<template name="footer1">
这是底部内容1
</template>
<template name="footer2">
这是底部内容2 - {{text}}
</template>