微信小程式開發記錄_01程式碼構成

小程式程式碼構成：

一　JSON配置檔案

01, app.json  是當前小程式的全域性配置，包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等

02, page.json  頁面級別的配置

03,  project.config.json 工具配置，小程式開發者工具相關的配置屬性，沒太理解

二　　WXML模板　

類似HTML, 只是標籤有所區別， 小程式的  WXML  用的標籤是  view ,  button ,  text  等等，這些標籤就是小程式給開發者包裝好的基本能力，我們還提供了地圖、影片、音訊等等元件能力。

ＷＸＭＬ只管展示，JS只管內容，構建MVVM開發模式，類似Vue的開發理念,比如引入某個欄位

<text>{{msg}}</text>

JS 只需要管理狀態即可:

this.setData({ msg: "Hello World" })

透過  {{ }}  的語法把一個變數繫結到介面上，我們稱為資料繫結。僅僅透過資料繫結還不夠完整的描述狀態和介面的關係，還需要  if / else ,  for 等控制能力，在小程式裡邊，這些控制能力都用  wx:  開頭的屬性來表達

三 WXSS樣式

WXSS  具有  CSS  大部分的特性，小程式在  WXSS  也做了一些擴充和修

四 邏輯互動

在小程式裡邊，我們就透過編寫  JS 指令碼檔案來處理使用者的操作。

<view>{{ msg }}</view><button bindtap="clickMe">點選我</button>

點選  button 按鈕的時候，我們希望把介面上  msg 顯示成  "Hello World"，於是我們在  button 上宣告一個屬性:  bindtap ，在 JS 檔案裡邊宣告瞭  clickMe 方法來響應這次點選操作：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }})

響應使用者的操作就是這麼簡單，更詳細的事件可以參考文件  WXML - 事件 。