微信模版的使用：
新建一個templates目錄，新建header.wxml,footer.wxml兩個模版檔案

header.wxml

<template  name="header1">
   <view class="header">
     <text>這是頭部模版-{{title}}</text>
   </view>
</template>

footer.wxml

<template name="footer1">
   <view class="footer">
     <text
 
>這是底部模版1-{{title}}</text>  
   </view>
</template>

<template name="footer2">
   <view class="footer">
     <text>這是底部模版2-{{title}}</text>
   </view>
</template>

在app.wxss中寫入樣式：

.header{
    width: 100%;
    height: 44px;
    background-color: lightblue
 
;
    text-align: center;
}
.header text{
    line-height: 44px;
}

.footer{
    width: 100%;
    height: 44px;
    background-color: lightblue;
    text-align: center;
}
.footer text{
    line-height: 44px;
}

.content{
    width: 100%;
    height: 400px;
    background-color: green;
}

模版的使用：

<!--include 是把所有的頭部匯入-->
 

<!--<include src="../templates/header"/>-->
<import src="../templates/header"/>
<template is="header1" data="{{title:'index header'}}" />

<view class="content">
   <text>zw learn weixin</text>

</view>



<import src="../templates/footer"/>
<!--指定特定的footer-->
<template is="footer1" data="{{title:'index footer'}}"/>

include和inport的區別：
include是將目標檔案進行內容進行拷貝
inport是將目標檔案進行匯入，可以設定多個模版

點選事件和迴圈操作

<view class="content">
   <text>zw learn weixin</text>
   <button type="warn" size="{{default}}"  bindtap="warnclick"> warn </button>
   <text wx:if="{{isShow}}">{{text}}</text>

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

   <view wx:for="{{news}}" wx:for-index="idx" wx:for-item="new">
      <text>{{idx}}-{{new}}</text>
   </view>
</view>

index.js:

Page({
  data:{
    text:"這是顯示內容",
    isShow:false,
    news:['new1','new2','new3','new4']
  },
  onLoad:function(options){
    // 生命週期函式--監聽頁面載入

  },
  onReady:function(){
    // 生命週期函式--監聽頁面初次渲染完成

  },
  onShow:function(){
    // 生命週期函式--監聽頁面顯示

  },
  onHide:function(){
    // 生命週期函式--監聽頁面隱藏

  },
  onUnload:function(){
    // 生命週期函式--監聽頁面解除安裝

  },
  onPullDownRefresh: function() {
    // 頁面相關事件處理函式--監聽使用者下拉動作

  },
  onReachBottom: function() {
    // 頁面上拉觸底事件的處理函式

  },
  onShareAppMessage: function() {
    // 使用者點選右上角分享
    return {
      title: 'title', // 分享標題
      desc: 'desc', // 分享描述
      path: 'path' // 分享路徑
    }
  },
  warnclick:function(){
     var show = this.data.isShow;
     var newtext = '';
     this.setData({isShow:!show,text:'這是新內容'});
  }
})

效果圖如下：