繁體中文

English
한국어
日本語
ภาษาไทย
Tiếng Việt
Türkçe
Português
Español
Français

繁體中文

English
한국어
日本語
ภาษาไทย
Tiếng Việt
Türkçe
Português
Español
Français

小程序介紹與開發環境 ​

小程序是一種全新的連接用戶與服務的管道，它可以在應用內被便捷地獲取和傳播，同時具有出色的使用體驗任何一個普通的開發者，經過簡單的學習和練習後，都可以輕鬆地完成一個小程序的開發和發佈。

1.Hello World ​

在詳細介紹小程序歷史和科技細節前，請先跟隨我們的步驟完成開發Hello World例子。

  • 第一步，根據自己的作業系統下載對應的安裝包進行安裝。
  • 第二步，打開Luffa Cloud開發者工具，選擇新建小程序項目，我們先不需理解AppID的概念，新建項目時選擇無AppID，並取消勾選'建立普通快速啟動模版'的選項。
  • 最後一步，我們來添加必要的代碼。
在根目錄下創建app.json，其內容如下。
js
{

  "pages": ["pages/index/index"]

}
在根目錄下新建pages目錄，然後在pages目錄下新建index目錄，接著在index目錄下創建兩個文件index.wxml和index.js。

index.wxml的內容如下所示。

js
<text>Hello World</text>
index.js的內容如下所示。
js
Page({})
通過編寫以上短短的幾行代碼，Luffa Cloud開發者工具的模擬器介面上顯示出Hello World。

2.小程序介紹 ​

2.1 小程序科技發展歷史 ​

從科技的維度看，小程序並非憑空冒出來的一個概念當WebView逐漸成為移動Web的一個重要入口時，JS API也應運而生了，如下代碼所示：

js
WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // URL list of all images, array format
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})
這是一個調用原生組件瀏覽圖片的JS API，相比於額外引入一個JS圖片預覽組件庫，這種調用管道顯得非常簡潔和高效。
實際上，Luffa官方是沒有對外暴露過如此調用的，此類API最初是提供給Luffa內部一些業務使用，很多外部開發者發現了之後，依葫蘆畫瓢地使用了，逐漸成為Luffa中網頁的事實標準。
平臺內寘了一整套網頁開發套件，稱之為JS-SDK，開放了拍攝、錄音、語音辨識、二維碼、地圖、支付、分享、卡券等幾十個API給所有的Web開發者打開了一扇全新的窗戶，讓所有開發者都可以使用到宿主應用內的原生能力，去完成一些之前做不到或者難以做到的事情了。
同樣是調用原生的瀏覽圖片，調用管道如下代碼所示：
js
wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // URL list of all images, array format
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})
JS-SDK解决了移動網頁能力不足的問題，通過暴露宿主應用的介面使得Web開發者能够擁有更多的能力，然而在更多的能力之外，JS-SDK的模式並沒有解决使用移動網頁遇到的體驗不良的問題。
用戶在訪問網頁的時候，在瀏覽器開始顯示之前都會有一個的白屏過程，在移動端，受限於設備效能和網絡速度，白屏會更加明顯我們團隊把很多科技精力放置在如何幫助平臺上的Web開發者解决這個問題囙此我們設計了一個JS-SDK的增强版本，其中有一個重要的功能，稱之為'Web資源離線存儲'。
這個設計有點類似HTML5的Application Cache，但在設計上規避了一些Application Cache的不足。
在內部測試中，我們發現離線存儲能够解决了一些問題，但是對於一些複雜的頁面依然會有白屏的問題，例如頁面加載了大量的CSS或者是JavaScript文件，這些文件的執行時間佔用了大量的UI線程，這種時候，即使通過離線存儲快速的加載資源，但是依舊會有頁面的白屏現象，同時這樣分文件的Cache在處理代碼文件更新的時候操作較為繁雜，對開發者的要求較高。
除了白屏，影響Web體驗的問題還有缺少操作的迴響，主要表現在兩個方面：頁面切換的生硬和點擊的遲滯感。
對於一些有經驗的Web開發者而言，會使用一些SPA的框架，來類比用戶端原生的頁面切換過渡通常的管道是在一個WebView中去類比多個頁面，通過CSS處理，加之精細化的腳本代碼做到點擊迴響和頁面切換，獲得較好的體驗然而並不是所有的開發者都有足够的時間和精力來使得頁面的體驗變得出色。
宿主應用隨之面臨的問題是如何設計一個比較好的系統，使得所有開發者在宿主應用中都能獲得比較好的體驗這個問題是之前的JS-SDK所處理不了的，需要一個全新的系統來完成，它需要使得所有的開發者都能做到：
  • 快速的加載
  • 更强大的能力
  • 原生的體驗
  • 易用且安全的數據開放
  • 高效和簡單的開發
這一系統就是本書中需要詳細闡述的小程序。

2.2 小程序與普通網頁開發的區別 ​

小程序的主要開發語言是JavaScript，所以通常小程序的開發會被用來同普通的網頁開發來做對比兩者有很大的相似性，對於前端開發者而言，從網頁開發遷移到小程序的開發成本並不高，但是二者還是有些許區別的。
網頁開發渲染執行緒和腳本執行緒是互斥的，這也是為什麼長時間的腳本運行可能會導致頁面失去回應，而在小程序中，二者是分開的，分別運行在不同的執行緒中。網頁開發者可以使用到各種瀏覽器暴露出來的 DOM API，進行 DOM 選取和操作。而如上文所述，小程序的邏輯層和渲染層是分開的，邏輯層運行在 JSCore 中，並沒有一個完整瀏覽器對象，因而缺少相關的 DOM API 和 BOM API。這一區別導致了前端開發非常熟悉的一些函式庫，例如 jQuery、 Zepto 等，在小程序中是無法運作的。同時 JSCore 的環境同 NodeJS 環境也是不盡相同，所以有些 NPM 的套件在小程序中也是無法運作的。
網頁開發者需要面對的環境是各式各樣的瀏覽器，PC 端需要面對 IE、Chrome、QQ 瀏覽器等，在行動端需要面對 Safari、Chrome 以及 iOS、Android 系統中的各式 WebView。而小程序開發過程中需要面對的是兩大作業系統 iOS 和 Android 的宿主應用用戶端，以及用於輔助開發的小程序開發者工具，小程序中三大運行環境也是有所區別的，如下表所示。
運行環境
邏輯層
渲染層
iOS
JavaScriptCore
WKWebView
安卓
X5 JSCore
X5瀏覽器
小程序開發者工具
NWJS
Chrome WebView
網頁開發者在開發網頁的時候，只需要使用到瀏覽器，並且搭配上一些輔助工具或者編輯器即可小程序的開發則有所不同，需要經過申請小程序帳號、安裝小程序開發者工具、配置項目等等過程方可完成。

3.小程序的特色 ​

對於一般用戶，小程序實現了應用程序的觸手可及，只需要透過掃描二維碼、搜尋或是朋友的分享就可以直接打開，加上優秀的體驗，小程序使得服務提供者的觸達能力變得更強。
對開發者而言，小程序框架本身所具有的快速載入和快速渲染能力，加上配對的雲能力、維運能力和資料彙總能力，使得開發者不需要去處理瑣碎的工作，可以把精力放置在具體的業務邏輯的開發上。

3.小程序開發準備 ​

開發者可以在平臺創建小程序後會自動生成對應的App ID，並且提供不同版本的IDE下載地址，開發者可以自行選擇合適版本進行下載，部分操作可參攷 快速入門