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