微信小程序申請前的準(zhǔn)備：

　　首先， 你需要注冊一個小程序賬號。 需要用一個沒注冊過公眾號的郵箱注冊。 注冊過程中需要很多認(rèn)證， 比較繁瑣。 如果暫時只是試水、沒有發(fā)布的打算， 那么只要完成基本信息填寫就可以， 不需要完成微信認(rèn)證。

　　之后， 就可以在公眾平臺使用注冊的帳戶進(jìn)行登錄。

　　然后， 在主頁面左邊列表中點(diǎn)擊設(shè)置， 再設(shè)置頁面中選開發(fā)設(shè)置， 就可以看到AppID。 而AppID 可以用于在開發(fā)工具中進(jìn)行登記， 使用開發(fā)工具的高級功能。 你可以到官網(wǎng)下載開發(fā)工具。

　　開始項(xiàng)目：

　　打開開發(fā)者工具， 選擇小程序選項(xiàng)， 然后直接點(diǎn)擊「添加項(xiàng)目」按鈕。 我們可以在這個步驟， 填入剛才注冊的時候使用的 AppID。

　　如果項(xiàng)目目錄中的文件是個空文件夾， 會提示是否創(chuàng)建 quick start 項(xiàng)目。

　　選擇「是」， 開發(fā)者工具會幫助我們在開發(fā)目錄里生成一個簡單的 Demo。

　　這個 Demo 擁有一個完整的小程序的大概框架。

　　1. 框架

　　我們首先看一下官方提供的 Demo 含有的目錄：

　　app.js：小程序邏輯、生命周期、全局變量。

　　app.json：小程序公共設(shè)置、導(dǎo)航欄顏色等， 不可以注釋。

　　app.wxss：小程序公共樣式， 類似 CSS 。

　　小程序頁面構(gòu)成類似這樣：

　　每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成， 如：index.js、index.wxml、index.wxss、index.json

　　微信小程序中的每一個頁面的路徑和頁面文件名， 都需要寫在app.json的pages中， 且pages數(shù)組中的第一個頁面是小程序的首頁。

　　這四個文件按照功能可以分成三個部分：

　　配置：json 文件

　　邏輯層：js 文件

　　視圖層：wxss.wxml 文件

　　在 iOS 上， 小程序的邏輯代碼運(yùn)行于 JavaScriptCore 中， 而在 Android上， 這個任務(wù)則是交給 X5 內(nèi)核來完成。

　　在 開發(fā)工具上， 小程序的 JavaScript 代碼是運(yùn)行在 NW.js(Chrome 內(nèi)核) 中。 這也導(dǎo)致開發(fā)工具上的效果跟實(shí)際效果有所出入。

　　2. 組件

　　微信提供了許多組件， 主要分為八種:

　　這其中， 包含了view、scroll-view、button、form等普通常用的組件， 也提供了地圖mapcanvas

　　組件主要屬于視圖層， 通過 WXML 來進(jìn)行結(jié)構(gòu)布局， 類似于 HTML。 樣式則通過 WXSS 來定義和修改， 它的語法和使用都近似 CSS。

　　組件使用語法實(shí)例：

　　3. API

　　網(wǎng)絡(luò)

　　媒體

　　數(shù)據(jù)

　　位置

　　設(shè)備

　　界面

　　開發(fā)接口

　　網(wǎng)絡(luò)請求接口包含了普通的 HTTPS 請求， 支持上傳、下載、Socket， 基本上滿足了我們開發(fā)中所需要的網(wǎng)絡(luò)需求。

　　這些 API 屬于邏輯層， 寫在 JS 邏輯文件中。

　　使用實(shí)例：

　　wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } })

　　可以到官方文檔 – API 查看其它 API 的使用方法。

　　編譯運(yùn)行

　　1. 模擬器調(diào)試

　　我們可以在微信提供的開發(fā)者工具中， 使用模擬器查看小程序運(yùn)行的效果。

　　之前我們提過， 小程序的運(yùn)行底層不同， 這也導(dǎo)致在模擬器上的效果， 會與在手機(jī)上運(yùn)行有些差異。

　　2. 真機(jī)調(diào)試

　　在左邊的選項(xiàng)欄中， 選擇項(xiàng)目， 然后點(diǎn)預(yù)覽會生產(chǎn)一個二維碼， 用管理員微信號掃一掃， 就可以在真機(jī)上看實(shí)際效果。