微信小程序的開發與原理 1, 小程序與普通網?開發的區別 2, 小程序結構中的 JSON 語法
小程序里JSON配置的一些注意事項。
JSON文件都是被包裹在一個大括號中 {}，通過key-value的方式來表達數據。JSON的Key必須包裹在一個雙引號中，在實踐中，編寫 JSON 的時候，忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常?錯誤。
JSON的值只能是以下幾種數據格式，其他任何格式都會觸發報錯，例如 中的 。
3，小程序的運行時 渲染層和邏輯層
小程序的運行環境分成渲染層和邏輯層，其中 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。
小程序的渲染層和邏輯層分別由2個線程管理: 渲染層的界面使用了 進行渲染, 邏輯層采用 線程運行JS腳本。一個小程序存在多個界面，所以渲染層存在多個線程，這兩個線程的通信會經由微信客戶端做中轉，邏輯層發送網絡請求 也經由微信客戶端轉發。
邏輯層 App
小程序開發框架的邏輯層使用 引擎為小程序提供開發者 代碼的運行環境以及微信小程序的特有功能。
邏輯層將數據進行處理后發送給視圖層，同時接受視圖層的事件反饋。
開發者寫的所有代碼最終將會打包成一份 文件，并在小程序啟動的時候運行，直到小程序銷毀。這一行為類似 ，所以邏輯層也稱之為 App
4, 小程序運行機制
前臺/后臺狀態, 小程序啟動后，界面被展示給用戶，此時小程序處于前臺狀態,
當用戶點擊右上?膠囊按鈕關閉小程序，或者按了設備 Home 鍵離開微信時，小程序并沒有完全終止運行，而是進入了后臺狀態，小程序還可以運行一小段時間, 當用戶再次進入微信或再次打開小程序，小程序又會從后臺進入前臺。但如果用戶很久沒有再進入小程序，或者系統資源緊張，小程序可能被銷毀，即完全終止運行。
小程序啟動可以分為兩種情況: 一種是冷啟動，一種是熱啟動。
小程序銷毀時機:
通常，只有當小程序進入后臺一定時間，或者系統資源占用過高，才會被銷毀。具體而言包括以下幾種情形:
退出狀態
每當小程序可能被銷毀之前，?面回調函數 會被調用。如果想保留?面中的狀態，可以在這個回調函數中“保存”一些數據，下次啟動時可以通過 獲得這些已保存數據。
5, 小程序的開發
在 的基礎上，我們增加了一些功能，以方便小程序的開發:
注意: 小程序框架的邏輯層并非運行在瀏覽器中，因此 在 web 中一些能力都無法使用，如 ， 等。
app.js
微信客戶端在打開小程序之前，會把整個小程序的代碼包下載到本地。緊接著通過 app.json 的 pages 字段就可以知道你當前小程序的所有?面路徑。
寫在app.json中 pages 字段的第一個?面就是這個小程序的首?
于是微信客戶端就把首?的代碼裝載進來，通過小程序底層的一些機制，就可以渲染出這個頁面
小程序啟動之后，在 app.js 定義的 App 實例的 回調會被執行，整個小程序只有一個 App 實例，是全部?面共享的
var api = require('./utils/request.js').default
App({
onLaunch: function () {},
onShow() {},
onHide() {},
onError(msg) {console.log(msg)},
globalData: 'I am global data'
})
可以通過 方法獲取到全局唯一的 App 示例，獲取App上的數據或調用開發者注冊在 App 上的函數。
const appInstance = getApp()
this.setData({
globalData: appInstance.globalData
})
{{globalData}} // I am global data
Page
小程序里邊包含了不同類型的文件:
在js文件中，Page 是一個?面構造器微信小程序系統原理圖，這個構造器就生成了一個?面。在生成?面的時候，小程序框架會把 data 數據和 index.wxml 一起渲染出最終的結構，于是就得到了你看到的小程序的樣子。
在渲染完界面之后，?面實例就會收到一個 的回調，可以在這個回調處理對應的邏輯。
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// ?面創建時執行
},
onShow: function() {
// ?面出現在前臺時執行
},
onReady: function() {
// ?面首次渲染完畢時執行
},
onHide: function() {
// ?面從前臺變為后臺時執行
},
onUnload: function() {
// ?面銷毀時執行
},
onPullDownRefresh: function() {
// 觸發下拉刷新時執行
},
onReachBottom: function() {
// ?面觸底時執行
},
onShareAppMessage: function () {
// ?面被用戶分享時執行
},
onPageScroll: function() {
// ?面滾動時執行
},
onResize: function() {
// ?面尺寸變化時執行
},
onTabItemTap(item) {
// tab 點擊時執行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件響應函數
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由數據
customData: {
hi: 'MINA'
}
})
框架的核心是一個響應的數據綁定系統，可以讓數據與視圖非常簡單地保持同步。數據修改時
, 只需要在邏輯層修改數據，視圖層就會做相應的更新。
Hello {{name}}
data: {
name: 'xiaowang'
},
changeName: function (e) {
this.setData({
name: 'Jerry'
})
},
組件
小程序提供了豐富的基礎組件，開發者可以像搭積木一樣，組合各種組件拼合成自己的小程
序。
就像 HTML 的 div、p 等標簽一樣，在小程序里邊，你只需要在 WXML 寫上對應的組件標簽名字就可以把該組件顯示在界面上，例如，你需要在界面上顯示地圖，你只需要這樣寫即可:
使用組件的時候，還可以通過屬性傳遞值給組件，讓組件可以以不同的狀態去展現，例如，我們希望地圖一開始的中心的經緯度是廣州，那么你需要聲明地圖的 (中心經度) 和 (中心 緯度)兩個屬性:
api
為了讓開發者可以很方便的調起微信提供的能力，例如獲取用戶信息、微信支付等等，小程序提供了很多 API 給開發者使用。需要注意的是: 多數 API 的回調都是異步，需要處理好代碼邏輯的異步問題。例如
自定義組件
開發者可以將?面內的功能模塊抽象成自定義組件，以便在不同的?面中重復使用，也可以將復雜的?面拆分成多個低耦合的模塊，有助于代碼維護。
自定義組件在使用時與基礎組件非常相似。開發自定義組件，類似于?面，一個自定義組件由 json、wxml、wxss、js 4個文件組成:
// json文件
{
"component": true // 設置為 自定義組件
}
在自定義組件的 js 文件中，需要使用 () 來注冊組件，并提供組件的屬性定義、內部數據和 自定義方法。組件的屬性值和內部數據將被用于組件 wxml 的渲染，其中，屬性值是可由組件外部傳入的。
Component({
properties: {
// 這里定義了innerText屬性，屬性值可以在組件使用時指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 這里是一些組件內部的數據
someData: {
},
methods: {
// 這里是一個自定義方法
customMethod: function () {}
},
}
})
使用自定義組件
使用已注冊的自定義組件前，首先要在?面的 json 文件中進行引用聲明。此時需要提供每個自定義組件的標簽名和對應的自定義組件文件路徑:
// 使用足定義組件的頁面的 json 文件
{
"usingComponents": {
"component-tag-name": "../../components/HelloWorld/index"
}
}
// 使用足定義組件的頁面的 wxml 文件
6, 常?的 操作錯誤 1. 頻繁的去
頻繁(毫秒級)的去，會導致了:
下用戶在滑動時會感覺到卡頓，操作反饋延遲嚴重，因為 JS 線程一直在編譯執行渲染，未能及時將用戶操作事件傳遞到邏輯層，邏輯層亦無法及時將操作處理結果及時傳遞到視圖層，渲染有出現延時，由于 的 JS 線程一直處于忙碌狀態微信小程序系統原理圖，邏輯層到?面層的通信耗時上升，視圖層收到的數據消息時距離發出時間已經過去了幾百毫秒，渲染的結果并不實時
每次都傳遞大量新數據
由的底層實現可知，我們的數據傳輸實際是一次 腳本過程，當數據量過大時會增加腳本的編譯執行時間，占用 JS 線程，
后臺?面進行
當?面進入后臺態(用戶不可?)，不應該繼續去進行，后臺態?面的渲染用戶是無法感知的，另外后臺態?面去也會搶占前臺?面的執行。
7，分包
某些情況下，開發者需要將小程序劃分成不同的子包，在構建時打包成不同的分包，用戶在使用時按需進行加載。
在構建小程序分包項目時，構建會輸出一個或多個分包。每個使用分包小程序必定含有一個主包。所謂的主包，即放置默認啟動?面/?面，以及一些所有分包都需用到公共資源/JS 腳本，而分包則是根據開發者的配置進行劃分。
在小程序啟動時，默認會下載主包并啟動主包內?面，當用戶進入分包內某個?面時，客戶端會把對應分包下載下來，下載完成后再進行展示。
目前小程序分包大小有以下限制：