小程序API文檔地址:

https://developers.weixin.qq.com/miniprogram/dev/

微信小程序

小程序是一種新的開放能力，開發者可以快速地開發一個小程序。小程序可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

小程序開發流程

第1步,注冊成為開發者:

https://mp.weixin.qq.com/wxopen/waregister?action=step1

第2步,進入注冊郵箱,**開發者帳號

第3步,填寫開發者身份信息

其間會打開微信,掃描一次頁面上的二維碼

第4步, 下載開發者工具 (IDE)

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=201861

第5步, 進入小程序后臺管理頁面,填寫一個新建的小程序介紹信息

https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN&token=1980399937

第6步, 在小程序管理頁面,為新建的小程序,添加開發者環境(如服務器地址等, 沒有的話,可以暫時先忽略)

https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN&token=1980399937

第7步, 現在就可以在[設置]-[開發設置]中看到小程序ID等信息了

第8步, 打開小程序開發者工具，用微信掃碼登錄開發者工具，準備開發第一個小程序！

選擇 新建項目,選擇小程序項目,設置好項目保存路徑

并且填寫上面申請過appid

整個IDE界面如下:

第1次,編譯后,點擊 獲取用戶頭像按鈕時, 會申請授權

下面的內容是IDE中工程文件的作用的詳細介紹   以及API 介紹 (技術的關鍵點)

如圖所示: 

在上一章中，我們通過開發者工具快速創建了一個 QuickStart 項目。你可以留意到這個項目里邊生成了不同類型的文件:

1. .json 后綴的 JSON 配置文件
2. .wxml 后綴的 WXML 模板文件
3. .wxss 后綴的 WXSS 樣式文件
4. .js 后綴的 JS 腳本邏輯文件

接下來我們分別看看這4種文件的作用。

JSON 配置

我們可以看到在項目的根目錄有一個 app.json 和 project.config.json，

此外在 pages/logs 目錄下還有一個 logs.json，

我們依次來說明一下他們的用途。

小程序配置 app.json

app.json 是對當前小程序的全局配置，

包括了小程序的所有頁面路徑、界面配色、網絡超時時間、底部 tab、頂部導航標題(背景色、前景色、文本) 等。

QuickStart 項目里邊的 app.json 配置內容如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "收藏單詞",
    "navigationBarTextStyle":"black"
  }
}

我們簡單說一下這個配置各個項的含義:

1. pages字段 —— 用于描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。
2. window字段 —— 小程序所有頁面的頂部背景顏色，文字顏色定義在這里的。

其他配置項細節可以參考文檔 小程序的配置 app.json 。

工具配置 project.config.json

通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如界面顏色、編譯配置等等，

當你換了另外一臺電腦重新安裝工具的時候，你還要重新配置。

考慮到這點，小程序開發者工具在每個項目的根目錄都會生成一個 project.config.json，

你在工具上做的任何配置都會寫入到這個文件，當你重新安裝工具或者換電腦工作時，

你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，

其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。

其他配置項細節可以參考文檔 開發者工具的配置 。

頁面配置 page.json  ???

這里的 page.json 其實用來表示 pages/logs 目錄下的 logs.json 這類和小程序頁面相關的配置。

如果你整個小程序的風格是藍色調，那么你可以在 app.json 里邊聲明頂部顏色是藍色即可。

實際情況可能不是這樣，可能你小程序里邊的每個頁面都有不一樣的色調來區分不同功能模塊，

因此我們提供了 page.json，讓開發者可以獨立定義每個頁面的一些屬性，例如剛剛說的頂部顏色、是否允許下拉刷新等等。

其他配置項細節可以參考文檔 小程序的配置 page.json 。

WXML 模板

從事過網頁編程的人知道，網頁編程采用的是 HTML + CSS + JS 這樣的組合，

其中 HTML 是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和用戶的交互。

同樣道理，在小程序中也有同樣的角色，其中 WXML 充當的就是類似 HTML 的角色。

打開 pages/index/index.wxml，你會看到以下的內容:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

和 HTML 非常相似，有標簽、屬性等等構成。

但是也有很多不一樣的地方，我們來一一闡述一下：

1. 標簽名字有點不一樣 往往寫 HTML 的時候，經常會用到的標簽是 div, p, span，

2. 開發者在寫一個頁面的時候可以根據這些基礎的標簽組合出不一樣的組件，例如日歷、彈窗等等。

3. 換個思路，既然大家都需要這些組件，為什么我們不能把這些常用的組件包裝起來，大大提高我們的開發效率。

4.  從上邊的例子可以看到，小程序的 WXML 用的標簽是 view, button, text 等等，這些標簽就是小程序給開發者包裝好的基本能力，

5. 我們還提供了地圖、視頻、音頻等等組件能力 更多詳細的組件講述參考下個章節 小程序的能力

6. 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式  在網頁的一般開發流程中，我們通常會通過 JS 操作 DOM (對應 HTML 的描述產生的樹)，以引起界面的一些變化響應用戶的行為。例如，用戶點擊某個按鈕的時候，JS 會記錄一些狀態到 JS 變量里邊，同時通過 DOM API 操控 DOM 的屬性或者行為，進而引起界面一些變化。當項目越來越大的時候，你的代碼會充斥著非常多的界面交互邏輯和程序的各種狀態變量，顯然這不是一個很好的開發模式，因此就有了 MVVM 的開發模式(例如 React, Vue)，提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM，JS只需要管理狀態即可，然后再通過一種模板語法來描述狀態和界面結構的關系即可。 小程序的框架也是用到了這個思路，如果你需要把一個 Hello World 的字符串顯示在界面上。 WXML 是這么寫 :

   <text>{{girl.girlName}}</text>
   

   JS 只需要管理狀態即可:

   this.setData({ girl: {girlName: "面碼", girlAge: 15} })
   

   通過 {{ }} 的語法把一個變量綁定到界面上，我們稱為數據綁定。僅僅通過數據綁定還不夠完整的描述狀態和界面的關系，還需要 if/else, for等控制能力，在小程序里邊，這些控制能力都用 wx: 開頭的屬性來表達。 更詳細的文檔可以參考 WXML

WXSS 樣式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些擴充和修改。

1. 新增了尺寸單位。在寫 CSS 樣式時，開發者需要考慮到手機設備的屏幕會有不同的寬度和設備像素比，采用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開發者可以免去換算的煩惱，只要交給小程序底層來換算即可，由于換算采用的浮點數運算，所以運算結果會和預期結果有一點點偏差。
2. 提供了全局的樣式和局部樣式。和前邊 app.json,    page.json 的概念相同，你可以寫一個 app.wxss 作為全局樣式，會作用于當前小程序的所有頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。
3. 此外 WXSS 僅支持部分 CSS 選擇器

更詳細的文檔可以參考 WXSS 。

JS 交互邏輯

一個服務僅僅只有界面展示是不夠的，還需要和用戶做交互：響應用戶的點擊、獲取用戶的位置等等。

在小程序里邊，我們就通過編寫 JS 腳本文件來處理用戶的操作。

bindtap屬性綁定事件

<view>{{ msg }}</view>
<button bindtap="btnClicked">點擊我</button>

點擊 button 按鈕的時候，我們希望把界面上 msg 顯示成 "Hello Beyond"，

于是我們在 button 上聲明一個屬性: bindtap ，在 JS 文件里邊聲明了 clickMe 方法來響應這次點擊操作：

Page({
  btnClicked: function() {
    this.setData({ msg: "Hello Beyond" })
  }
})

響應用戶的操作就是這么簡單，更詳細的事件可以參考文檔 WXML - 事件 。

此外你還可以在 JS 中調用小程序提供的豐富的 API，利用這些 API 可以很方便的調起微信提供的能力，

例如獲取用戶信息、本地存儲、微信支付等。

在前邊的 QuickStart 例子中，

在 pages/index/index.js 就調用了 wx.getUserInfo 獲取微信用戶的頭像和昵稱，最后通過 setData 把獲取到的信息顯示到界面上。

更多 API 可以參考文檔 小程序的API 。

通過這個章節，你了解了小程序涉及到的文件類型以及對應的角色，

在下個章節中，我們把這一章所涉及到的文件通過 “小程序的框架” 給 “串” 起來，讓他們都工作起來。

上一章中我們把小程序涉及到的文件類型闡述了一遍，

我們結合 QuickStart 這個項目來講一下這些文件是怎么配合工作的。

小程序的啟動

微信客戶端在打開小程序之前，會把整個小程序的代碼包下載到本地。

緊接著通過 app.json 的 pages 字段就可以知道你當前小程序的所有頁面路徑:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

這個配置說明在 QuickStart 項目定義了兩個頁面，分別位于 pages/index/index 和 pages/logs/logs 目錄。

而寫在 pages 字段的第一個頁面就是這個小程序的首頁(打開小程序看到的第一個頁面)。

于是微信客戶端就把首頁的代碼裝載進來，通過小程序底層的一些機制，就可以渲染出這個首頁。

小程序啟動之后，在 app.js 定義的 App 實例的 onLaunch 回調會被執行:

App({
  onLaunch: function () {
    // 小程序啟動之后 觸發
  }
})

整個小程序只有一個 App 實例，是全部頁面共享的，更多的事件回調參考文檔 注冊程序 App 。

接下來我們簡單看看小程序的一個頁面是怎么寫的。

程序與頁面

你可以觀察到 pages/logs/logs 下其實是包括了4種文件的，

微信客戶端會首先根據 logs.json 配置生成一個界面，頂部的導航的顏色和文字你都可以在這個 json 文件里邊定義好。

緊接著客戶端就會裝載這個頁面的 WXML 結構和 WXSS 樣式。

最后客戶端會裝載 logs.js，

你可以看到 logs.js 的大體內容就是:

Page({
  data: { // 參與頁面渲染的數據
    logs: []
  },
  onLoad: function () {
    // 頁面渲染后 執行
  }
})

Page 是一個頁面構造器，這個構造器就生成了一個頁面。

在生成頁面的時候，小程序框架會把 data 數據和 index.wxml 一起渲染出最終的結構，于是就得到了你看到的小程序的樣子。

在渲染完界面之后，頁面實例就會收到一個 onLoad 的回調，你可以在這個回調處理你的邏輯。

有關于 Page 構造器更多詳細的文檔參考 注冊頁面 Page 。

組件

小程序提供了豐富的基礎組件給開發者，開發者可以像搭積木一樣，組合各種組件拼合成自己的小程序。

就像 HTML 的 div, p 等標簽一樣，

在小程序里邊，你只需要在 WXML 寫上對應的組件標簽名字就可以把該組件顯示在界面上，

例如，你需要在界面上顯示地圖，你只需要這樣寫即可：

<map></map>

使用組件的時候，還可以通過屬性傳遞值給組件，讓組件可以以不同的狀態去展現，

例如，我們希望地圖一開始的中心的經緯度是廈門，那么你需要聲明地圖的 longitude(中心經度) 和 latitude(中心緯度) 兩個屬性:

<map longitude="廈門經度" latitude="廈門緯度"></map>

組件的內部行為也會通過事件的形式讓開發者可以感知，

例如用戶點擊了地圖上的某個標記，你可以在 js 編寫 markertap 函數來處理：

bindmarkertap屬性綁定用戶點擊事件

<map bindmarkertap="markertap" longitude="廣州經度" latitude="廣州緯度"></map>

當然你也可以通過 style 或者 class 來控制組件的外層樣式，以便適應你的界面寬度高度等等。

更多的組件可以參考 小程序的組件 。

API

為了讓開發者可以很方便的調起微信提供的能力，

例如獲取用戶信息、微信支付等等，小程序提供了很多 API 給開發者去使用。

要獲取用戶的地理位置時，只需要：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 經度
    var longitude = res.longitude // 緯度
  }
})

補充一下wgs84坐標:

參考鏈接: https://cnodejs.org/topic/564c0a27e4766d487f6fe38d

當前互聯網地圖的坐標系現狀

地球坐標 (WGS84)

• 國際標準，從專業GPS 設備中取出的數據的坐標系
• 國際地圖提供商使用的坐標系
• WGS84:World Geodetic System 1984,是為GPS全球定位系統使用而建立的坐標系統。
  

火星坐標 (GCJ-02)也叫國測局坐標系

• 中國標準，從國行移動設備中定位獲取的坐標數據使用這個坐標系
• 國家規定： 國內出版的各種地圖系統（包括電子形式），必須至少采用GCJ-02對地理位置進行首次加密。

百度坐標 (BD-09)

• 百度標準，百度 SDK，百度地圖，Geocoding 使用
• (百度在火星坐標上二次加密)

開發過程需要注意的事

• 從設備獲取經緯度（GPS）坐標

  	如果使用的是百度sdk那么可以獲得百度坐標（bd09）或者火星坐標（GCJ02),默認是bd09
  	如果使用的是ios的原生定位庫，那么獲得的坐標是WGS84
  	如果使用的是高德sdk,那么獲取的坐標是GCJ02

• 互聯網在線地圖使用的坐標系

  火星坐標系：
  		iOS 地圖（其實是高德）
  		Gogole地圖
  		搜搜、阿里云、高德地圖
  百度坐標系：
  		當然只有百度地圖
  WGS84坐標系：
  		國際標準，谷歌國外地圖、osm地圖等國外的地圖一般都是這個

調用微信掃一掃能力，只需要：

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

需要注意的是：多數 API 的回調都是異步，你需要處理好代碼邏輯的異步問題。

更多的 API 能力見 小程序的API 。

通過這個章節你已經大概了解了小程序運行的一些基本概念，

當你開發完一個小程序之后，你就需要發布你的小程序。

在下個章節，你會知道發布前需要做什么準備。

提前準備一些發布事項

用戶身份

一個團隊進行小程序的開發，那么團隊成員的身份管理是很有必要的。

管理員可在小程序管理后臺統一管理項目成員（包括開發者、體驗者及其他成員）、設置項目成員的權限，

包括：開發者/體驗者權限、登錄小程序管理后臺、開發管理、查看小程序數據分析等。

管理入口位于：小程序管理后臺 - 用戶身份 – 成員管理

預覽

使用開發工具可以預覽小程序，幫助開發者檢查小程序在移動客戶端上的真實表現。

點擊開發者工具頂部操作欄的預覽按鈕，開發工具會自動打包當前項目，并上傳小程序代碼至微信的服務器，

成功之后會在界面上顯示一個二維碼。

使用當前小程序開發者的微信掃碼即可看到小程序在手機客戶端上的真實表現。

上傳代碼

同預覽不同，上傳代碼是用于提交體驗或者審核使用的。

點擊開發者工具頂部操作欄的上傳按鈕，填寫版本號以及項目備注，

需要注意的是，這里版本號以及項目備注是為了方便管理員檢查版本使用的，開發者可以根據自己的實際要求來填寫這兩個字段。

上傳成功之后，登錄小程序管理后臺 - 開發管理 - 開發版本 就可以找到剛提交上傳的版本了。

可以將這個版本設置 體驗版 或者是 提交審核

小程序的版本

可以使用  小程序開發者助手  方便快捷的  預覽和體驗  線上版本、體驗版本、開發版本。

在下個章節，我們來看看如何發布一個小程序，讓你的成果被所有的微信用戶所使用到。

開發和測試完成之后，就需要將小程序發布給用戶來使用了。

提交審核

為了保證小程序的質量，以及符合相關的規范，小程序的發布是需要經過審核的

在開發者工具中上傳了小程序代碼之后，

登錄 小程序管理后臺 - 開發管理 - 開發版本  找到提交上傳的版本。

在開發版本的列表中，點擊 提交審核 按照頁面提示，填寫相關的信息，即可以將小程序提交審核。

需要注意的是，請開發者嚴格測試了版本之后，再提交審核， 過多的審核不通過，可能會影響后續的時間。

發布

審核通過之后，管理員的微信中會收到小程序通過審核的通知，

此時登錄 小程序管理后臺 - 開發管理 - 審核版本。中可以看到通過審核的版本。

請點擊發布，即可發布小程序。

運營數據

有兩種方式可以方便的看到小程序的 運營數據

方法一：

登錄 小程序管理后臺 - 數據分析

點擊相應的 tab 可以看到相關的數據。

方法二：

使用 小程序數據助手，在微信中方便的查看運營數據

官方提供的演示Demo

下載地址: https://developers.weixin.qq.com/miniprogram/dev/demo.html

然后解壓

然后,新建一個項目,填寫appid,指定工程路徑為 解壓后的目錄,

如圖所示:

然后,點擊右上方的 [預覽]按鈕,生成二維碼,使用微信掃描后,即可在手機上瀏覽

然后打開手機上的微信,掃描二維碼,即可 預覽 實際的運行效果

組件模塊:

API 模塊:

隨便點擊一個項目進去看下demo的效果:

在后面的章節里,我們將詳細學習一下小程序中的-框架-組件-API-工具

未完待續,下一章節,つづく