5.2 文件介紹 *

js ---------- javaScrip文件  json -------- 項目配置文件，負責窗口顏色等等wxml ------- 類似HTML文件wxss ------- 類似CSS文件

在根目錄下用app來命名的這四中類型的文件，就是程序入口文件。

app.json

必須要有這個文件，如果沒有這個文件，IDE會報錯，因為微信框架把這個作為配置文件入口，你只需創建這個文件，里面寫個大括號就行以后我們會在這里對整個小程序的全局配置。記錄了頁面組成，配置小程序的窗口 背景色，配置導航條樣式，配置默認標題。

app.js

必須要有這個文件，沒有也是會報錯！但是這個文件創建一下就行 什么都不需要寫以后我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。

app.wxss

這個文件不是必須的。因為它只是個全局CSS樣式文件

app.wxml

這個也不是必須的，而且這個并不是指主界面哦~因為小程序的主頁面是靠在JSON文件中配置來決定的

有了這兩個文件你運行程序，IDE就不會報錯了，也意味著這是最簡單的微信小程序

5.3 框架介紹

app.json配置

以下是一個包含了所有配置選項的簡單配置app.json ：

{  "pages": [    "pages/index/index",    "pages/logs/index"  ],  "window": {    "navigationBarTitleText": "Demo"  },  "tabBar": {    "list": [{      "pagePath": "pages/index/index",      "text": "首頁"    }, {      "pagePath": "pages/logs/logs",      "text": "日志"    }]  },  "networkTimeout": {    "request": 10000,    "downloadFile": 10000  },  "debug": true}
app.json 配置項列表
屬性
類型
必填
描述
pages
String Array
是
設置頁面路徑
window
Object
否
設置默認頁面的窗口表現
tabBar
Object
否
設置底部 tab 的表現
networkTimeout
Object
否
設置網絡超時時間
debug
Boolean
新建頁面在pages 中新增一個  "pages/news/news"即可出現一個新的news文件夾
 "pages": [    "pages/index/index",    "pages/logs/index"  ]
5.4數據綁定
WXML 中的動態數據均來自對應 Page 的 data。
簡單綁定
數據綁定使用 Mustache 語法（雙大括號）將變量包起來，可以作用于：
內容
<view> {{ message }} </view>
Page({  data: {    message: 'Hello MINA!'  }})
組件屬性(需要在雙引號之內)
<view id="item-{{id}}"> </view>
Page({  data: {    id: 0  }})
控制屬性(需要在雙引號之內)
<view wx:if="{{condition}}"> </view>
Page({  data: {    condition: true  }})
關鍵字(需要在雙引號之內)
true：boolean 類型的 true，代表真值。
false： boolean 類型的 false，代表假值。
<checkbox checked="{{false}}"> </checkbox>
特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型后代表真值。
運算
可以在 {{}} 內進行簡單的運算，支持的有如下幾種方式：
三元運算
<view hidden="{{flag ? true : false}}"> Hidden </view>
算數運算
<view> {{a + b}} + {{c}} + d </view>
Page({  data: {    a: 1,    b: 2,    c: 3  }})
view中的內容為 3 + 3 + d。
邏輯判斷
<view wx:if="{{length > 5}}"> </view>
字符串運算
<view>{{"hello" + name}}</view>
Page({  data:{    name: 'MINA'  }})
數據路徑運算
<view>{{object.key}} {{array[0]}}</view>
Page({  data: {    object: {      key: 'Hello '    },    array: ['MINA']  }})
組合
也可以在 Mustache 內直接進行組合，構成新的對象或者數組。
數組
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({  data: {    zero: 0  }})
最終組合成數組[0, 1, 2, 3, 4]。
對象
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({  data: {    a: 1,    b: 2  }})
最終組合成的對象是 {for: 1, bar: 2}
也可以用擴展運算符 ... 來將一個對象展開
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({  data: {    obj1: {      a: 1,      b: 2    },    obj2: {      c: 3,      d: 4    }  }})
最終組合成的對象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。
如果對象的 key 和 value 相同，也可以間接地表達。
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({  data: {    foo: 'my-foo',    bar: 'my-bar'  }})
最終組合成的對象是 {foo: 'my-foo', bar:'my-bar'}。
注意：上述方式可以隨意組合，但是如有存在變量名相同的情況，后邊的會覆蓋前面，如：
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({  data: {    obj1: {      a: 1,      b: 2    },    obj2: {      b: 3,      c: 4    },    a: 5  }})
最終組合成的對象是 {a: 5, b: 3, c: 6}。
5.5條件渲染
wx:if
在框架中，我們用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 來添加一個 else 塊：
<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>
5.6列表渲染
wx:for
在組件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。
默認數組的當前項的下標變量名默認為index，數組當前項的變量名默認為item
<view wx:for="{{array}}">  {{index}}: {{item.message}}</view>
Page({  data: {    array: [{      message: 'foo',    }, {      message: 'bar'    }]  }})
使用 wx:for-item 可以指定數組當前元素的變量名，
使用 wx:for-index 可以指定數組當前下標的變量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">  {{idx}}: {{itemName.message}}</view>
5.7模板
WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調用。
定義模板
使用name屬性，作為模板的名字。然后在<template/>內定義代碼片段，如：
<!--  index: int  msg: string  time: string--><template name="msgItem">  <view>    <text> {{index}}: {{msg}} </text>    <text> Time: {{time}} </text>  </view></template>
使用模板
使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入，如：
<template is="msgItem" data="{{...item}}"/>
Page({  data: {    item: {      index: 0,      msg: 'this is a template',      time: '2016-09-15'    }  }})
is 屬性可以使用 Mustache 語法，來動態決定具體需要渲染哪個模板：
<template name="odd">  <view> odd </view></template><template name="even">  <view> even </view></template><block wx:for="{{[1, 2, 3, 4, 5]}}">    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/></block>
5.8事件
在組件中綁定一個事件處理函數。
如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>在相應的Page定義中寫上相應的事件處理函數，參數是event。
Page({  tapName: function(event) {    console.log(event)  }})
5.9引用
WXML 提供兩種文件引用方式import和include。
import
import可以在該文件中使用目標文件定義的template，如：
在 item.wxml 中定義了一個叫item的template：
<!-- item.wxml --><template name="item">  <text>{{text}}</text></template>
在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src="item.wxml"/><template is="item" data="{{text: 'forbar'}}"/>