5.2 文件介紹 *

js ---------- javaScrip文件  json -------- 項(xiàng)目配置文件，負(fù)責(zé)窗口顏色等等wxml ------- 類似HTML文件wxss ------- 類似CSS文件

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

app.json

必須要有這個(gè)文件，如果沒有這個(gè)文件，IDE會(huì)報(bào)錯(cuò)，因?yàn)槲⑿趴蚣馨堰@個(gè)作為配置文件入口，你只需創(chuàng)建這個(gè)文件，里面寫個(gè)大括號(hào)就行以后我們會(huì)在這里對(duì)整個(gè)小程序的全局配置。記錄了頁面組成，配置小程序的窗口 背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。

app.js

必須要有這個(gè)文件，沒有也是會(huì)報(bào)錯(cuò)！但是這個(gè)文件創(chuàng)建一下就行 什么都不需要寫以后我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。

app.wxss

這個(gè)文件不是必須的。因?yàn)樗皇莻€(gè)全局CSS樣式文件

app.wxml

這個(gè)也不是必須的，而且這個(gè)并不是指主界面哦~因?yàn)樾〕绦虻闹黜撁媸强吭贘SON文件中配置來決定的

有了這兩個(gè)文件你運(yùn)行程序，IDE就不會(huì)報(bào)錯(cuò)了，也意味著這是最簡單的微信小程序

5.3 框架介紹

app.json配置

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