在上一篇教程中，我們教大家使用微信官方Demo快速搭建了一個小相冊，並學會了如何安裝開發者工具，如何創建小程序，如何做服務端配置。並利用騰訊雲COS實現相冊上傳下載功能。
這次教程中，我們將教大家快速入門小程序開發，以Hello World不同的Level爲例，瞭解小程序基本配置，學習小程序整體開發框架，最終完成開發到發佈流程。
Hello World - 入門
在第一階段，我們不需要了解小程序歷史和技術細節，您只需要跟隨我們完成基本的Hello World例子即可。
第一步
參考上一篇教程，下載微信開發者工具，並根據自己對應的操作系統進行安裝。
第二步
打開微信開發者工具，選擇新建小程序項目，我們先不需理解AppID的概念，新建項目時選擇或使用測試號：小程序系統會給你分配測試賬號，並取消勾選“建立普通快速啓動模板”的選項，然後點擊確定，如圖。
第三步
在根目錄下創建app.json，然後填入如下代碼。
{
"pages": ["pages/index/index"]
}
在根目錄下新建pages目錄，然後在pages目錄下新建index目錄，接着在index目錄下創建index.wxml，然後填入以下代碼。
<text>Hello World</text>
然後點擊菜單欄的項目—保存，系統會自動創建index.js、index.json、index.wxss等目錄文件，並進行編譯，最終我們將看到小程序已經顯示我們編寫的代碼Hello World文件。
恭喜你，已經你已經成功開發出你的第一個小程序啦！這時，你在嘗試修改修改index.wxml中的hello world，然後保存，看看會發生什麼？
Hello World - 小程序代碼組成
在進階實驗前，我們先講講小程序的歷史及上一步中配置文件的含義。
歷史
從技術的維度看，小程序並非憑空冒出來的一個概念。2015年初，微信發佈了一整套網頁開發工具包，稱之爲 JS-SDK，開放了拍攝、語音識別、二維碼等幾十個API。給所有的 Web 開發者打開了一扇全新的窗戶，讓所有開發者都可以使用到微信的原生能力，去完成一些之前做不到或者難以做到的事情了。
但是在內部測試中，微信團隊發現一些複雜的頁面會有白屏的問題，例如頁面加載了大量的 CSS 或者是 JavaScript 文件，這些文件的執行時間佔用了大量的 UI 線程，除了白屏，影響 Web 體驗的問題還有缺少操作的反饋，主要表現在頁面切換的生硬和點擊的遲滯感。微信面臨的問題是如何設計一個比較好的系統，使得所有開發者在微信中都能獲得比較好的體驗。微信團隊需要一個快速的加載、更強大的能力、原生的體驗、易用且安全的微信數據開放、高效和簡單的開發的系統，而這一系統就是本文中需要詳細闡述的小程序。
配置文件含義
在上一步中，我們創建了一個app.json文件，還創建了一個index.wxml文件，系統還爲我們創建了index.js、index.json、index.wxss等目錄文件，接下來，將爲大家闡述着幾個文件到底是幹什麼的。爲了更直觀的展現。我們還是以Hello world爲例。
第一步 - json文件
打開剛纔的開發工具編輯器，然後在根目錄下找到app.json文件，雙擊打開代碼，然後用下面的代碼進行替換。
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
我們看到，當前界面發生了很大的變化，標題欄由原來的黑色變爲了白色，在頭部多了一個名爲WeChat的字符，然後，我們更改navigationBarTitleText內的字符，將WeChat改爲自己想設定的字符，我這裏改爲你自己想設定的字符，然後將原本的navigationBarBackgroundColor內部的#fff改爲#ddd，然後保存，看看會發生什麼。
我們注意到，開發者工具刷新後，頂部的bar的文字由原來的Wechat變爲了你自定義的字符，bar的顏色也發生了變化。
現在明白了嗎？JSON文件在小程序代碼中扮演靜態配置的作用，在小程序運行之前就決定了小程序一些表現，需要注意的是小程序是無法在運行過程中去動態更新JSON 配置文件從而發生對應的變化的。
第二步 - wxml文件
打開入門中創建的index.wxml文件，使用下面的代碼替換原有的代碼。
<text>當前時間：{{time}}</text>然後在打開系統創建的index.js文件，找到data: {}行，然後在大括號之間填入下面的代碼，如圖。
time: (new Date()).toString()
接着，我們按下保存鍵，看看會發生什麼。
我們看到系統自動將{{time}}變成了當前的時間，那這裏是如何實現的呢？原來，在小程序中，我們可以說使用JavaScript代碼來通過Dom接口來完成界面的實時更新，WXML 通過 {{變量名}} 來綁定 WXML 文件和對應的 JavaScript 文件中的 data 對象屬性。我們在index.js定義了當前時間的變量，然後通過WXML中的{{time}}去獲取其中的變量。怎麼樣，大概明白WXML是幹什麼的了嘛？沒明白？沒事，我們進行在進行一個實驗。
在index.wxml文件中，添加下面的代碼。
<view> {{a + b}} + {{c}} = d</view>
<view wx:if="{{c > 1}}"> True </view>和剛纔一樣，在index.js內的data: {}行，插入以下代碼。
time: (new Date()).toString(), a: 1, b: 2, c:3
我們看到，系統已經將我們的a、b、c變量通過邏輯運算並渲染出來，同時，我們使用wx:if來判斷數字c的值是否大於1，如果大於這展示True字符。
現在，大概明白WXML是幹嘛的了嘛？我們先用官方文檔說明下，WXML 全稱是 WeiXin Markup Language，是小程序框架設計的一套標籤語言，結合小程序的基礎組件、事件系統，可以構建出頁面的結構。是不是有點看不懂，沒關係，我這介紹下，WXML是一種類似HTML超文本標記語言，可以描述你小程序前端展示的長相，可以將你的代碼轉換爲展示頁面，後續配合WXSS及JavaScript腳本，可以寫出非常漂亮的小程序。
第三步、wxss文件
現在，打開你的index.wxss文件，然後輸入下面的代碼。
/* pages/index/index.wxss */
.text-red{
color: red
}
.text-blue{
color: blue
}
.text-yellow{
color: yellow
}然後，打開index.wxml文件，使用下面的代碼替換所有文件
<text class='text-red'>當前時間：{{time}}</text>
<view class='text-blue'> {{a + b}} + {{c}} = d</view>
<view class='text-yellow' wx:if="{{c > 1}}"> True </view>保存後看看效果。
我們看到，原來顯示爲黑色的小程序的字變色爲紅色、藍色、黃色。這裏改變的顏色剛好與我們編輯index.wxss文件中指定的顏色相同。所以，你明白wxss文件是幹什麼的了嘛？對的，WXSS與Web開發中的CSS類似。爲了更適合小程序開發，WXSS對CSS做了一些補充以及修改。WXSS（WeiXin Style Sheets）是一套用於小程序的樣式語言，用於描述WXML的組件樣式，也就是視覺上的效果。
第四步、js文件
js文件使用我們已經在第二步中體驗過了，小程序的主要開發語言是 JavaScript ，開發者使用 JavaScript 來開發業務邏輯以及調用小程序的 API 來完成業務需求。但是，嚴格的意義上來說，小程序中 JavaScript 的同瀏覽器中的 JavaScript 以及 NodeJS 中的 JavaScript 是不相同的。
瀏覽器中的JavaScript 是由 ECMAScript 和 BOM（瀏覽器對象模型）以及 DOM（文檔對象模型）組成的，Web前端開發者會很熟悉這兩個對象模型，它使得開發者可以去操作瀏覽器的一些表現，比如修改URL、修改頁面呈現、記錄數據等等。
NodeJS中的JavaScript 是由 ECMAScript 和 NPM以及Native模塊組成，NodeJS的開發者會非常熟悉 NPM 的包管理系統，通過各種拓展包來快速的實現一些功能，同時通過使用一些原生的模塊例如 FS、HTTP、OS等等來擁有一些語言本身所不具有的能力。
小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 來實現的。同瀏覽器中的JavaScript 相比沒有 BOM 以及 DOM 對象，所以類似 JQuery、Zepto這種瀏覽器類庫是無法在小程序中運行起來的，同樣的缺少 Native 模塊和NPM包管理的機制，小程序中無法加載原生庫，也無法直接使用大部分的 NPM 包。
明白了小程序中的 JavaScript 同瀏覽器以及NodeJS有所不同後，開發者還需要注意到另外一個問題，不同的平臺的小程序的腳本執行環境也是有所區別的。
小程序目前可以運行在三大平臺：
- iOS平臺，包括iOS9、iOS10、iOS11
- Android平臺
- 小程序IDE
這種區別主要是體現三大平臺實現的 ECMAScript 的標準有所不同。截止到當前一共有七個版本的ECMAScript 標準，目前開發者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的標準，但是在小程序中， iOS9和iOS10 所使用的運行環境並沒有完全的兼容到 ECMAScript 6 標準，一些 ECMAScript 6 中規定的語法和關鍵字是沒有的或者同標準是有所不同的，所以一些開發者會發現有些代碼在舊的手機操作系統上出現一些語法錯誤。爲了幫助開發者解決這類問題，小程序IDE提供語法轉碼工具幫助開發者，將 ECMAScript 6代碼轉爲 ECMAScript 5代碼，從而在所有的環境都能得到很好的執行。開發者需要在項目設置中，勾選 ES6 轉 ES5 開啓此功能。
Hello World - 小程序的能力
在上一個步驟中，我們已經熟悉了小程序的組成及代碼佈局，這一步，我們將介紹小程序的部分能力，組件及API。和以前一樣，我們通過Hello world來進行學習。
小程序的組件與API
我們打開小程序代碼組成步驟中的index.wxml文件，然後在以前的代碼中，加入下面的代碼。
<camera device-position="front" flash="auto" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view class='text-red'>預覽</view>
<image mode="widthFix" src="{{src}}"></image>然後打開index.js文件，在page({後面加入下述代碼，如圖。
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
error(e) {
console.log(e.detail)
}
})
然後，在你的根目錄下創建一個名爲app.js的文件，什麼內容暫時都不要填寫，保存。接下來，我們點擊菜單欄的預覽按鈕，然後用手機掃描彈出的二維碼，即可使用手機進行拍照，拍照彈出的照片將附在預覽字符下方。
預覽效果如圖
我們看到，小程序已經能夠正常拍照了。那麼有同學有疑問了，這裏的代碼到底做了什麼呢？接下來，我將對其解釋。
組件
在上面的教程中，我們調用了下面這段代碼。
<camera device-position="front" flash="auto" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view class='text-red'>預覽</view>
<image mode="widthFix" src="{{src}}"></image>先不管其他內容，我們主要看看<camera ....... </camera>中間代碼的含義。我們看到我們定義了device-position、flash、binderror、style這幾個屬性。那麼這幾個屬性到底是什麼意思呢？我們可以看看官方組件文檔，找到camera組件，會看到如下表的信息。
屬性名 | 類型 | 默認值 | 說明 | 最低版本 |
|---|---|---|---|---|
mode | String | normal | 有效值爲 normal, scanCode | |
device-position | String | back | 前置或後置，值爲front, back | |
flash | String | auto | 閃光燈，值爲auto, on, off | |
bindstop | EventHandle | 攝像頭在非正常終止時觸發，如退出後臺等情況 | ||
binderror | EventHandle | 用戶不允許使用攝像頭時觸發 | ||
bindscancode | EventHandle | 在成功識別到一維碼時觸發，僅在 mode="scanCode" 時生效 |
我們看到，表中剛好有我們定義的device-position、flash、binderror這幾個內容，原來device-position我們設置的front是選擇前置攝像頭還是後置攝像頭，binderror是顯示用戶不允許使用攝像頭會觸發的事件。flash是當前選擇是否打開閃光燈，這裏我們設置的是auto也就是自動狀態。style我們可以暫時不用在意，這裏指的是上一步中wxss應該寫的內容，我們只是寫在了wxml文件中。
我們看到，組件是小程序的一個很重要的功能，組件是小程序的基本組成單元，爲了讓開發者可以快速進行開發，小程序的宿主環境提供了一系列基礎組件。我們剛纔使用的camera組件，就是官方提供調用系統底層相機的組件。代碼中所展示的button、view、image都是一種組件。
限於篇幅，我們不在本文展開所有組件的屬性說明，請在使用時前往官方文檔進行查閱相關組件說明https://developers.weixin.qq.com/miniprogram/dev/component/。
API
在上文中，我們其實已經調用了官方的api，不信？我們看看下面的代碼。
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
error(e) {
console.log(e.detail)
}
})熟悉吧，這段代碼中，我們已經調用了微信官方給出的wx.createCameraContext()，API文件。關於此API的詳細使用，可以參考官方API文檔。
在這段代碼中，我們首先使用const ctx = wx.createCameraContext()這段代碼來將wx.createCameraContext()定義爲ctx。然後使用ctx.takePhoto調用takePhoto方法進行拍照。關於takePhoto方法的使用，大家可以參考官方文檔。我們在代碼中定義了quality、success這兩個函數。文檔中指出，quality指定的是成像質量，我們選擇high高質量。success是回調函數，最終存放我們的照片文件。這裏存放的是tempImagePath照片文件的臨時路徑。
然後，我們在index.wxml的button調用index.js中的takePhoto函數。然後在image中調用scr變量做展示。
小程序發佈
爲了保證小程序的質量，以及符合相關的規範，小程序的發佈是需要經過審覈的。建議先自行審覈，自審完成之後，我們就可以對其進行上傳啦。值得注意的是，如果你需要發佈，請將這個小程序的AppID改爲你在小程序管理頁面註冊的AppID，點擊微信開發者工具的詳情，然後修改AppID爲你的AppID即可。
打開微信開發者工具，然就點擊菜單欄的工具按鈕，再點擊上傳按鈕。
在新彈出的頁面中，我們設置好版本號及項目備註。
然後點擊上傳即可。之後，請打開你微信公衆平臺小程序管理頁面，對小程序進行審覈發佈。
之後的頁面中，點擊開發版本，然後再點擊提交審覈，審覈通過後，你的小程序就可以上線了！
總結
在本章中，我們介紹了小程序的基本運行機制以及它所提供的各種能力，組合這些能力可以完成一個體驗非常流暢的小程序。同時也介紹了編寫完小程序之後，如何進行發佈上線。當然，本文只是基礎內容，後續將對每個組件及API做詳細的介紹。喜歡的小夥伴請持續關注本專欄。騰訊雲聯合小程序給大家帶來了小程序·雲開發解決方案，爲開發者提供完整的雲端支持，弱化後端和運維操作，使用平臺原生 API 進行核心業務開發，實現快速上線和迭代。歡迎免費使用！