代碼構(gòu)成：

1. .json 后綴的 JSON 配置文件
2. .wxml 后綴的 WXML 模板文件
3. .wxss 后綴的 WXSS 樣式文件
4. .js 后綴的 JS 腳本邏輯文件

配置文件：

.json后綴的JSON 配置文件

小程序配置 app.json

小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時時間、底部 tab 等

工具配置 project.config.json

個性化配置，例如界面顏色、編譯配置等等

頁面配置 page.json

每個頁面的一些屬性,例如頂部顏色、是否允許下拉刷新等等

WXML 模板:

充當(dāng)類似 HTML 的角色

1. 封裝一些HTML標(biāo)簽構(gòu)成小程序的組件，比如彈框，選擇框
2. 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達(dá)式

WXSS 樣式：

充當(dāng)類似 CSS 的角色

1. 具有 CSS 大部分的特性
2. 新增了尺寸單位 rpx，解決適配
3. 提供了全局的樣式app.wxss和局部樣式page.wxss

JS 交互邏輯：

和用戶做交互

1. 響應(yīng)用戶的點擊、獲取用戶的位置等等
2. 調(diào)用小程序提供的豐富的 API，例如：例如獲取用戶信息、本地存儲、微信支付等

生命周期:

分為應(yīng)用生命周期和頁面生命周期

App生命周期：

小程序啟動之后，在 app.js 定義的 App 實例的 onLaunch 回調(diào)會被執(zhí)行，可以在這里做一些初始化的工作

整個小程序只有一個 App 實例，是全部頁面共享的，可以通過getApp() 函數(shù)獲取

可以再app.js中定義全局?jǐn)?shù)據(jù)，程序運(yùn)行中可以存儲調(diào)用

詳細(xì)請看app生命周期

Page生命周期

新建一個Page就會自動創(chuàng)建 .json .wxml .wxss .js四個文件

在渲染完界面之后，頁面實例就會收到一個 onLoad 的回調(diào)，你可以在這個回調(diào)處理你的邏輯。

在.js文件的data:{}中設(shè)置頁面的初始化數(shù)據(jù)。數(shù)據(jù)更改通過setData()更改。

詳細(xì)請看

API

框架提供豐富的微信原生API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。

多數(shù) API 的回調(diào)都是異步，你需要處理好代碼邏輯的異步問題。success, fail, complete來接收接口調(diào)用結(jié)果

詳情請看

組件

框架為開發(fā)者提供了一系列基礎(chǔ)組件，開發(fā)者可以通過組合這些基礎(chǔ)組件進(jìn)行快速開發(fā)。

注意： boolean 屬性不管該屬性等于什么，其值都為true，只有組件上沒有寫該屬性時，屬性值才為false

詳情請看

模塊化

將一些公共的代碼抽離成為一個單獨(dú)的 js 文件，作為一個模塊。模塊只有通過 module.exports 或者 exports 才能對外暴露接口

注意：

• 推薦采用 module.exports 來暴露模塊接口
• 不支持直接引入 node_modules , 開發(fā)者需要使用到 node_modules 時候建議拷貝出相關(guān)的代碼到小程序的目錄中
• 在需要使用這些模塊的文件中，使用 require(path) 將公共代碼引入，暫時不支持絕對路徑

路由

在小程序中所有頁面的路由全部由框架進(jìn)行管理。

可以跳過API來跳轉(zhuǎn)頁面，也可以通過組件navigator來完成

路由觸發(fā)的生命周期函數(shù)請看

自定義組件

開發(fā)者可以將頁面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁面中重復(fù)使用；也可以將復(fù)雜的頁面拆分成多個低耦合的模塊，有助于代碼維護(hù)。自定義組件在使用時與基礎(chǔ)組件非常相似。

創(chuàng)建自定義組件類似于頁面，一個自定義組件由 json wxml wxss js 4個文件組成。

在 json 文件中進(jìn)行自定義組件聲明

{
  "component": true
}

組件模板中可以提供一個 <slot> 節(jié)點，用于承載組件引用時提供的子節(jié)點。

<view>這里是組件的內(nèi)部節(jié)點</view>
  <slot></slot>
</view>

需要使用多slot時，可以在組件js中聲明啟用

Component({
  options: {
    multipleSlots: true // 在組件定義時的選項中啟用多slot支持
  }
})

此時，可以在這個組件的wxml中使用多個slot，以不同的 name 來區(qū)分。

<!-- 組件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>這里是組件的內(nèi)部細(xì)節(jié)</view>
  <slot name="after"></slot>
</view>

使用自定義組件，首先要在頁面的 json 文件中進(jìn)行引用聲明。

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

這樣，在頁面的 wxml 中就可以像使用基礎(chǔ)組件一樣使用自定義組件。

<view>
  <!-- 以下是對一個自定義組件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

自定義組件可以觸發(fā)任意的事件，引用組件的頁面可以監(jiān)聽這些事件

<!-- 當(dāng)自定義組件觸發(fā)“myevent”事件時，調(diào)用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以寫成 -->
<component-tag-name bind:myevent="onMyEvent" />
Page({
  onMyEvent: function(e){
    e.detail // 自定義組件觸發(fā)事件時提供的detail對象
  }
})

自定義組件觸發(fā)事件時，需要使用 triggerEvent 方法，指定事件名、detail對象和事件選項：

<!-- 在自定義組件中 -->
<button bindtap="onTap">點擊這個按鈕將觸發(fā)“myevent”事件</button>

Component({
  properties: {}
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail對象，提供給事件監(jiān)聽函數(shù)
      var myEventOption = {} // 觸發(fā)事件的選項
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

模板

簡單的重復(fù)代碼片段，可以用模板來實現(xiàn)，可以實現(xiàn)傳值不同，顯示不同內(nèi)容，在不同地方引用

使用 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'
    }
  }
})