序言

通過微信小程序官方教程(https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E5%8F%B2) 記錄下我覺得有用的信息

小程序的開發者工具就是我們用的Eclipse,且兼容了Git插件

微信小程序簡介

微信官方是沒有對外暴露過如此調用的，此類 API 最初是提供給騰訊內部一些業務使用，很多外部開發者發現了之後，依葫蘆畫瓢地使用了，逐漸成爲微信中網頁的事實標準。2015年初，微信發佈了一整套網頁開發工具包，稱之爲 JS-SDK，開放了拍攝、錄音、語音識別、二維碼、地圖、支付、分享、卡券等幾十個API。給所有的 Web 開發者打開了一扇全新的窗戶，讓所有開發者都可以使用到微信的原生能力，去完成一些之前做不到或者難以做到的事情。

JS-SDK是對之前的 WeixinJSBridge 的一個包裝，以及新能力的釋放，並且由對內開放轉爲了對所有開發者開放，在很短的時間內獲得了極大的關注。從數據監控來看，絕大部分在微信內傳播的移動網頁都使用到了相關的接口。

小程序的主要開發語言是 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 的微信客戶端，以及用於輔助開發的小程序開發者工具，小程序中三大運行環境也是有所區別的，如表1-1所示。

網頁開發者在開發網頁的時候，只需要使用到瀏覽器，並且搭配上一些輔助工具或者編輯器即可。小程序的開發則有所不同，需要經過申請小程序帳號、安裝小程序開發者工具、配置項目等等過程方可完成。

申請賬號

開發小程序的第一步，你需要擁有一個小程序帳號，通過這個帳號你就可以管理你的小程序。

進入小程序註冊頁(https://mp.weixin.qq.com/wxopen/waregister?action=step1) 根據指引填寫信息和提交相應的資料，就可以擁有自己的小程序帳號。這裏使用我的郵箱:[email protected] 來申請.然後一路下一步吧~

註冊成功後就可以登錄小程序的管理平臺進行管理了.(https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=1521477691)

AppID

小程序的 AppID 相當於小程序平臺的一個身份證，後續你會在很多地方要用到 AppID （注意這裏要區別於服務號或訂閱號的 AppID）。有了小程序帳號之後，我們需要一個工具來開發小程序-----是不是相當於一個身份ID,該小程序屬於誰誰誰

安裝開發工具(我以爲能放到web工程裏~~~)

前往開發者工具下載頁面，根據自己的操作系統下載對應的安裝包進行安裝，有關開發者工具更詳細的介紹可以查看《開發者工具介紹》。

新建項目選擇小程序項目，選擇代碼存放的硬盤路徑，填入剛剛申請到的小程序的 AppID，給你的項目起一個好聽的名字，勾選 "不使用雲服務" （注意: 你要選擇一個空的目錄纔可以創建項目），點擊新建，你就得到了你的第一個小程序了，點擊頂部菜單編譯就可以在微信開發者工具中預覽你的第一個小程序。------最新提醒直接掃描二維碼就可以登錄了.不需要輸入AppID,只有在新建小程序項目的時候才需要填入AppID.

另外注意選擇不使用雲服務-----這個肯定要收費啊

點擊工具上的編譯按鈕，可以在工具的左側模擬器界面看到這個小程序的表現，也可以點擊預覽按鈕，通過微信的掃一掃在手機上體驗你的第一個小程序。

小程序代碼構成

主要有如下4個文件.小程序提倡react-vue變成方法類似於react

.json 後綴的 JSON 配置文件
.wxml 後綴的 WXML 模板文件這個對應html
.wxss 後綴的 WXSS 樣式文件這個對應css
.js 後綴的 JS 腳本邏輯文件提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM，JS 只需要管理狀態即可，然後再通過一種模板語法來描述狀態和界面結構的關係即可。

和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作爲全局樣式，會作用於當前小程序的所有頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。 ----這裏app.json 是全局配置,page.json是針對單一頁面的配置

小程序的運行

渲染層和邏輯層

小程序的運行環境分成渲染層和邏輯層，其中 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。

小程序的渲染層和邏輯層分別由2個線程管理：渲染層的界面使用了WebView 進行渲染；邏輯層採用JsCore線程運行JS腳本。一個小程序存在多個界面，所以渲染層存在多個WebView線程，這兩個線程的通信會經由微信客戶端（下文中也會採用Native來代指微信客戶端）做中轉，邏輯層發送網絡請求也經由Native轉發，小程序的通信模型下圖所示。

程序與頁面

微信客戶端在打開小程序之前，會把整個小程序的代碼包下載到本地。緊接着通過 app.json 的 pages 字段就可以知道你當前小程序的所有頁面路徑:

組件

這個就是Html標籤的整合,更方便使用.寫在MXML中的標籤

發佈

這個主要是介紹小程序後臺的管理功能------致此小程序的開發工具其實就像Eclipse的IDE,且兼容了Git進行版本控制. 這裏厲不講了~

小程序碼

很多場景下用戶會通過掃碼快速進入一個小程序，在小程序設計的初期，小程序平臺提供的二維碼的形式。我們發現用戶在掃一個二維碼時，他並不知道當前這次掃碼會出現什麼樣的服務，因爲二維碼的背後有可能是公衆號、小程序、網頁服務、支付頁面、添加好友等不同的服務。爲了讓用戶在掃碼之前就有一個明確的預期，因此微信設計了小程序碼，如圖5-3所示。

在發佈小程序之後，小程序管理平臺會提供對應的小程序碼的預覽和下載，開發者可以自行下載用於線上和線下的小程序服務推廣。

開發開始

如上主要是在介紹基礎工作流程的介紹,從本章開始就是正式介紹如何在微信的IDE上進行開發.

參考如下官方地址:https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a

目錄結構

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。

一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：

一個小程序頁面由四個文件組成，分別是：

允許上傳的文件

在項目目錄中，以下文件會經過編譯，因此上傳之後無法直接訪問到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件僅針對在 app.json 中配置了的頁面）。除此之外，只有後綴名在白名單內的文件可以被上傳，不在白名單列表內文件在開發工具能被訪問到，但無法被上傳。具體白名單列表如下：

wxs
png
jpg
jpeg
gif
svg
json
cer
mp3
aac
m4a
mp4
wav
ogg
silk

場景值

場景值用來描述用戶進入小程序的路徑。完整場景值的含義請查看場景值列表。

邏輯層

註冊小程序

整個小程序只有一個 App 實例，是全部頁面共享的。開發者可以通過 getApp 方法獲取到全局唯一的 App 實例，獲取App上的數據或調用開發者註冊在 App 上的函數。 -----這句話的意思就是 getApp能獲取一個唯一的對象,該對象就是小程序

註冊app在根目錄的app.js中,代碼如下所示

/ app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

微信小程序----基礎拾遺

序言