代碼組成
小程序由配置文件json，模板文件wxml，樣式代碼wxss，以及邏輯代碼javascript組成
一、JSON配置
小程序中，JSON扮演靜態(tài)配置角色
在創(chuàng)建的小程序的根目錄下，有兩個(gè)json文件，app.json和project.config.json，在每個(gè)pages頁面目錄下，也有一個(gè)json文件，這幾個(gè)json文件分別是什么功能呢？
app.json
app.json文件是當(dāng)前小程序的全局配置，包括所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部TAB等，配置方式如下
代碼片段1-1：
"pages": ["pages/index/index", "pages/logs/logs"],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
其中：
pages字段 —— 用于描述當(dāng)前小程序所有頁面路徑，這是為了讓微信客戶端知道當(dāng)前你的小程序頁面定義在哪個(gè)目錄。
window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義等。
工具配置 project.config.json
你在工具上做的任何配置都會(huì)寫入到project.config.json這個(gè)文件中，當(dāng)你重新安裝工具或者換電腦工作時(shí)，你只要載入同一個(gè)項(xiàng)目的代碼包，開發(fā)者工具就自動(dòng)會(huì)幫你恢復(fù)到當(dāng)時(shí)你開發(fā)項(xiàng)目時(shí)的個(gè)性化配置，其中會(huì)包括編輯器的顏色、代碼上傳時(shí)自動(dòng)壓縮等等一系列選項(xiàng)。
頁面配置 page.json
用于對(duì)單個(gè)頁面進(jìn)行配置，頁面的配置只能設(shè)置 app.json 中部分 window 配置項(xiàng)的內(nèi)容，頁面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)
二、WXML
wxml在小程序中充當(dāng)html的角色，wxml也由標(biāo)簽和屬性構(gòu)成，但也有不一樣的地方
1.小程序中的標(biāo)簽是包裝好的標(biāo)簽，如view, button, text ，還提供了地圖、視頻、音頻等等組件能力
2.多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達(dá)式，使用方式與vue等MVVM框架相似
模板語法
通過{{}}將變量綁定到界面上：<text> {{text}}</text>
屬性也可以動(dòng)態(tài)綁定：<text data-test="{{test}}"> hello world</text>
注意：沒有被定義的變量的或者是被設(shè)置為 undefined 的變量不會(huì)被同步到 wxml 中
邏輯語法
{{}}內(nèi)可以進(jìn)行簡(jiǎn)單的邏輯運(yùn)算
三元運(yùn)算：<text>{{ a === 10? "變量 a 等于10": "變量 a 不等于10"}}</text>
算數(shù)運(yùn)算：<view> {{a + b}} + {{c}} + d </view>
字符串拼接：<view>{{"hello " + name}}</view>
{{ }}中還可以直接放置數(shù)字、字符串或者是數(shù)組
<text>{{[1,2,3]}}</text>
<!-- 輸出 1,2,3 -->
<text>{{"hello world"}}</text>
<!-- 輸出 hello world -->
條件邏輯
WXML中使用 wx:if="{{condition}}"進(jìn)行邏輯渲染
<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>
列表渲染
在組件上使用wx:for進(jìn)行列表渲染，默認(rèn)變量index為數(shù)組當(dāng)前下標(biāo)，變量item為數(shù)組的當(dāng)前項(xiàng)
<!--WXML-->
<view wx:for="{{list}}">{{index}}: {{item.message}</view>
<!--對(duì)應(yīng)的腳本-->
Page({
data: {
list: [{message: 1},{message: 2},{message: 2}]
}
})
可以使用wx:for-item指定數(shù)組當(dāng)前元素的變量名，可以使用wx:for-index指定數(shù)組當(dāng)前下標(biāo)的變量名
<view wx:for="list" wx:for-item="name" wx:for-index="idx">{{idx}}:{{name}}</view>
wx:key用來指定列表中項(xiàng)目的唯一標(biāo)識(shí)符，取值可以是以下兩種
1.字符串。必須是列表中的某一個(gè)屬性值，且該屬性值在列表中必須是唯一的
2.使用關(guān)鍵字this與item本身進(jìn)行綁定，這就要求item本身是唯一的數(shù)字或字符串
在數(shù)據(jù)發(fā)生改變的時(shí)候，綁定了key的組件只會(huì)被重新排序，不會(huì)被重新渲染，以確保組件保持自身的狀態(tài)
<!--this綁定示例-->
<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>
模板
WXML提供模板，可以在模板中定義代碼片段，在別處調(diào)用
<!--
{
index: 0,
msg: 'this is a template',
time: '2016-06-18'
}
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
<template is="msgItem" data="{{...item}}"/> //使用data傳入模板需要的數(shù)據(jù)
<!-- 輸出
0: this is a template Time: 2016-06-18
-->
is可以動(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>
引用
WXML提供了兩種文件引用方式import和include
在一個(gè)wxml文件中通過import的方式可以使用另一個(gè)wxml文件中定義的模板
在 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'}}"/>
需要注意的是 import 有作用域的概念，即只會(huì) import 目標(biāo)文件中定義的 template，而不會(huì) import 目標(biāo)文件中 import 的 template，簡(jiǎn)言之就是 import 不具有遞歸的特性。
include 可以將目標(biāo)文件中除了 <template/> <wxs/> 外的整個(gè)代碼引入，相當(dāng)于是拷貝到 include 位置
共同屬性
所有wxml標(biāo)簽都支持的屬性稱為共同屬性
三、WXSS
介紹
wxss充當(dāng)css的角色
app.wxss中為項(xiàng)目公共樣式
pages下的wxss為頁面樣式
其它樣式可以被公共樣式和頁面樣式引用
在小程序開發(fā)中不必考慮樣式文件的請(qǐng)求數(shù)量，樣式代碼最終會(huì)被編譯優(yōu)化
尺寸單位
wxss是使用rpx作為尺寸單位
樣式引用
@import './test_0.wxss'
小程序中的樣式文件引用不會(huì)產(chǎn)生多余的文件請(qǐng)求
內(nèi)聯(lián)樣式
小程序支持動(dòng)態(tài)更新內(nèi)聯(lián)樣式
<view style="color: {{color}};font-size: {{fontSize}}"></view>
選擇器
小程序支持id，類，標(biāo)簽和偽元素（after,before）選擇器
樣式優(yōu)先級(jí)
小程序樣式優(yōu)先級(jí)與css相同
官方樣式庫
小程序提供了WeUI.wxss基礎(chǔ)樣式庫 https://github.com/Tencent/weui-wxss
WeUI是一套與微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。
javascript腳本
瀏覽器中的javascript由ECMAScript，BOM和DOM組成
小程序中的javascript由ECMAScript 以及小程序框架和小程序 API 來實(shí)現(xiàn)的，沒有BOM和DOM對(duì)象，所以類似 JQuery、Zepto這種瀏覽器類庫是無法在小程序中運(yùn)行起來的
作用域
在文件中聲明的變量和函數(shù)只在該變量?jī)?nèi)有效
如果想定義全局函數(shù)：global.globalValue = 'globalValue'
需要注意的是必須保證全局變量定義的文件需要在使用的文件之前執(zhí)行，當(dāng)需要保證全局的數(shù)據(jù)可以在任何文件中安全的被使用到，那么可以在 App() 中進(jìn)行設(shè)置
//app.js 定義全局變量
App({
globalData: 1
})
//a.js使用全局變量
var app = getApp()
//改變?nèi)肿兞康闹?app.globalData++
