執行環境

微信客戶端給小程式所提供的環境即宿主環境，小程式需要藉助宿主環境提供的能力完成功能實現

• 渲染層：WXML模板、WXSS樣式。每個頁面單獨啟一個WebView執行緒渲染
• 邏輯層：JS指令碼。通過JSCore執行緒執行指令碼，網路請求通過Native轉發

WebView和JSCore經過微信客戶端即 Native 做通訊中轉

1. 當從微信開啟小程式之前，會從網路下載或快取中拿到小程式的程式碼包，注入宿主環境中初始化

2. 通過app.json的pages欄位的第一個頁面查到小程式的首頁，微信會把首頁的程式碼載入渲染出來

3. 根據index.json配置生成一個介面，頂部顏色和文字都可以在json檔案中定義，然後微信載入index.wxml結構和index.wxss樣式，最後載入js指令碼。

4. 初始化之後，app.js定義的App例項的onLaunch()函式會被執行。一個小程式APP只有一個App例項，每個小程式都需要在 app.js 中呼叫 App 方法註冊小程式例項，繫結生命週期回撥函式等。https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

5. 使用者點選右上角關閉小程式或者其他方式離開小程式時，小程式進入後臺情況，App構造器中的onHide()方法被呼叫；當再次回到微信或開啟小程式時，小程式繼續回到前臺狀態，構造器中的onShow()方法被呼叫

程式

程式構造器App()

App()寫在專案根目錄的app.js裡，是一個單例物件。它接受Object引數，前三個函式是小程式的生命週期函式，一般不建議在程式碼中呼叫：

App({
  onLaunch: function(options) {}, //小程式初始化完成時觸發
  onShow: function(options) {},   //小程式啟動，或從後臺進入前臺顯示時觸發
  onHide: function() {},          //小程式從前臺進入後臺時會觸發
  onError: function(msg) {},      //小程式發生指令碼錯誤或 API 呼叫失敗時，會觸發
  其他欄位: anything               //新增任意函式到Object引數中，在App例項回撥this訪問
})

全域性資料：小程式的JS指令碼是執行在JsCore的執行緒裡的，每個頁面都會啟一個渲染執行緒，所以在切換頁面時JS指令碼執行在同一個JsCore執行緒中，實現在不同頁面中共享資料。

App({
  ……
  allGetDate: '我是小周'
 
})
————————————————————
其他JS中獲取:
var appInstance  = getApp()
console.log("全域性資訊："+appInstance.allGetDate)

頁面

小程式的頁面由介面、配置和邏輯組成，分別對應wxml、json、js指令碼描述。頁面路徑需要在小程式程式碼根目錄app.json中的pages欄位宣告，pages欄位中宣告的第一個頁面為首頁

頁面構造器Page()

Page()用於註冊一個小程式頁面，在當前頁面的js腳本里呼叫，Page()接受Object引數，

Page({
  //頁面
  data: { text: "This is page data." }, //頁面初始資料
  onLoad: function(options) { },  //頁面載入監聽
  onReady: function() { },//頁面初次渲染監聽
  onShow: function() { },//頁面顯示監聽
  onHide: function() { },//頁面隱藏監聽
  onUnload: function() { },//頁面解除安裝監聽
   //使用者行為回撥
  onPullDownRefresh: function() { },//監聽下拉動作
  onReachBottom: function() { },//監聽上拉觸底事件
  onShareAppMessage: function () { },//使用者點選右上角轉發
  onPageScroll：function(){} //使用者滑動頁面事件
  其他 : any 新增任意函式或資料，其他函式中用this訪問
})

資料繫結

Page()中定義的data欄位中的資料可以直接在wxml中使用

Page({
  data:{
    text: 'init data',
    arrays:[{msg:"1"},{msg:"2"}]
  }

})
————————————————————
<text>{{text}}</text>
<view>{{arrays[0].msg}}</view>

Page例項的原型中有setData函式，在Page例項下的方法呼叫this.setData把資料傳遞給渲染層，從而更新資料

Page({
    onLoad:function(){
      this.setData({
        text:'setDate函式傳過來的',function(params) {
         console.log(params)  //這裡的回撥沒有生效，不知道為啥
        }
      })
    }
})
---------------------------
<text>{{text}}</text>

而當資料量大時，可以根據自己需要改變最小單位的資料即可提高渲染效能，例如以下例子，data中有多個數據，使用setData更新a的值

Page({
  data:{
    a: 1,b: 2,c: 3,d: 4,
    e:[1,{test:'hello'}, 3,4]
  },
  onLoad:function(){
    this.setData({
      a:3
    })
  }
})
---------------------------
<text>{{a}}</text>

自定義轉發

只有定義onShareAppMessage函式的小程式才會顯示轉發按鈕

Page({
  onShareAppMessage:function(){
    return{
      title: '轉發的標題',
      path:'page/user?id=123'
    }
  }
})

元件

元件是組成小程式頁面的基本單元，在WXML模板檔案宣告中使用，類似HTML標籤。元件名和屬性均為小寫，多個單詞以-連線，容器元件可以宣告在開始結束標籤之間（view）

公有屬性，所有元件都有下列屬性

元件：https://developers.weixin.qq.com/miniprogram/dev/component/

宿主環境API

呼叫微信客戶端提供的能力，wx物件就是小程式的宿主環境所提供的全域性物件，幾乎所有小程式的API都掛載在wx物件底下：網路、媒體、檔案、資料快取、位置、裝置、介面、介面節點資訊等。API一般都是非同步的

相容問題：通過判斷API是否存在做相容

if (wx.openBluetoothAdapter) {
  wx.openBluetoothAdapter()
} else {
  // 如果希望使用者在最新版本的客戶端上體驗您的小程式，可以這樣子提示
  wx.showModal({
    title: '提示',
    content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本後重試。'
  })
}

案例：通過wx.getSystemInfoSync獲取宿主環境資訊

wx.getSystemInfoSync()
/*
  {
    brand: "iPhone",      // 手機品牌
    model: "iPhone 6",    // 手機型號
    platform: "ios",      // 客戶端平臺
    system: "iOS 9.3.4",  // 作業系統版本
    version: "6.5.23",    // 微信版本號
    SDKVersion: "1.7.0",  // 小程式基礎庫版本
    language: "zh_CN",    // 微信設定的語言
    pixelRatio: 2,        // 裝置畫素比
    screenWidth: 667,    // 螢幕寬度
    screenHeight: 375,     // 螢幕高度
    windowWidth: 667,    // 可使用視窗寬度
    windowHeight: 375,     // 可使用視窗高度
    fontSizeSetting: 16   // 使用者字型大小設定
  }
 */

API：https://developers.weixin.qq.com/miniprogram/dev/api/

事件

頁面UI互動包括點選、長按等都是事件，事件就是使用者在渲染層的行為反饋以及元件的部分狀態反饋，事件由渲染層傳遞給邏輯層，格式：key="value"，key以bind或者catch開頭+事件型別。

示例：點選事件

事件通過bindtap繫結在view元件上，對應的事件處理函式是tapName，使用者點選view區域時觸發條件生成事件tap，tapName就會被執行

<!-- page.wxml -->
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

// page.js
   Page({
  tapName: function(event) {
    console.log(event)
  }
})

<!-- page.wxml -->
<view id="tapTest" data-hi="WeChat" <!-- page.wxml -->
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

// page.js
   Page({
  tapName: function(event) {
    console.log(event)
  }
})="tapName"> Click me! </view>

// page.js
   Page({
  tapName: function(event) {
    console.log(event)
  }
})

事件物件屬性