1. 小程序介紹

微信小程序，簡稱小程序，英文名 Mini Program ，是一種不需要下載安裝即可使用的應(yīng)用，它實現(xiàn)
了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用

1.1 為什么是微信小程序？

1. 微信有海量用戶，而且粘性很高，在微信里開發(fā)產(chǎn)品更容易觸達(dá)用戶；
2. 推廣app 或公眾號的成本太高。
3. 小程序開發(fā)適配成本低。
4. 小程序容易小規(guī)模試錯，然后快速迭代。
5. 小程序跨平臺。

1.2 微信小程序歷史

1. 2016年1月11日，微信之父張小龍時隔多年的公開亮相，解讀了微信的四大價值觀。張小龍指出，
   越來越多產(chǎn)品通過公眾號來做，因為這里開發(fā)、獲取用戶和傳播成本更低。拆分出來的服務(wù)號并沒
   有提供更好的服務(wù)，所以微信內(nèi)部正在研究新的形態(tài)，叫微信小程序 需要注意的是，之前是叫
   做 應(yīng)用號
2. 2016年9月21日，微信小程序正式開啟內(nèi)測。在微信生態(tài)下，觸手可及、用完即走的微信小程序引
   起廣泛關(guān)注。騰訊云正式上線微信小程序解決方案，提供小程序在云端服務(wù)器的技術(shù)方案。
3. 2017年1月9日，微信推出的“小程序”正式上線?！靶〕绦颉笔且环N無需安裝，即可使用的手
   機(jī)“應(yīng)用”。不需要像往常一樣下載App，用戶在微信中“用完即走”。

1.3 瘋狂的微信小程序

1. 微信月活已經(jīng)達(dá)到10.82億。其中55歲以上的用戶也達(dá)到6300萬
2. 信息傳達(dá)數(shù)達(dá)到450億，較去年增長18%;視頻通話4.1億次,增長100%
3. 小程序覆蓋超過200+行業(yè)，交易額增長超過6倍，服務(wù)1000億+人次,創(chuàng)造出了5000億+的商業(yè)價值

1.4 還有其他的小程序不容忽視

1. 支付寶小程序
2. 百度小程序
3. QQ小程序
4. 今日頭條 + 抖音小程序

2. 環(huán)境準(zhǔn)備

開發(fā)微信?程序之前，必須要準(zhǔn)備好相應(yīng)的環(huán)境

2.1 注冊賬號

1. 建議使用全新的郵箱，沒有注冊過其他小程序或者公眾號的。
2. 訪問注冊頁面，耐心完成注冊即可。

2.2 獲取APPID

1. 由于后期調(diào)用微信小程序的接口等功能，需要索取開發(fā)者的小程序中的 APPID ，所以在注冊成功后，
   可登錄，然后獲取APPID。
2. 登錄，成功后可看到如下界面，然后復(fù)制你的APPID,悄悄的保存起來，不要給別人看到😄。
   
   

2.3 開發(fā)工具

1. 下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2. 微信小程序自帶開發(fā)者工具，集開發(fā)、預(yù)覽、調(diào)試、發(fā)布 于一身的 完整環(huán)境。
3. 但是由于編碼的體驗不算好，因此 建議使用 VsCode + 微信小程序編輯工具 來實現(xiàn)編碼，
   VsCode負(fù)責(zé)敲代碼， 微信編輯工具負(fù)責(zé)預(yù)覽

3. 創(chuàng)建微信小程序

3.1 打開微信開發(fā)者工具

1. 注意 第一次登錄的時候 需要掃碼登錄
   

3.2 新建小程序項目

3.3 填寫項目信息

3.4 . 成功

4. 微信開發(fā)者工具介紹

1. 詳細(xì)的使用，可以查看官網(wǎng)：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

5. 小程序結(jié)構(gòu)目錄

1. 小程序框架的目標(biāo)是通過盡可能簡單、有效的方式讓開發(fā)者可以在微信中開發(fā)具有原生APP的體驗的服務(wù)。
2. 小程序框架提供了自己的視圖層描述語言 WXML 和 WXSS ，以及 JavaScript ，并在視圖層與邏輯層間提供
   了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。

5.1 小程序文件結(jié)構(gòu)和傳統(tǒng)web對比

5.2 基本的項目目錄

6. 小程序配置文件

1. 一個小程序應(yīng)用程序會包括最基本的兩種配置文件。一種是全局的 app.json 和頁面自己的 page.json
2. 注意：配置文件中不能出現(xiàn)注釋

6.1 全局配置 app.json

1. app.json 是當(dāng)前小程序的全局配置，包括了小程序的所有頁面路徑、界眠表現(xiàn)、網(wǎng)絡(luò)超時時間、底
   部 tab 等。普通快速啟動項??邊的 app.json 配置
   
2. pages 字段用于描述當(dāng)前小程序所有頁面路徑，這是為了讓微信客戶端知道當(dāng)前你的小程序
   頁面定義在哪個目錄。
3. window 字段定義小程序所有頁面的頂部背景顏色，文字顏色定義等。
4. 完整的配置信息請參考 app.json配置
5. tabbar
   

6.2 頁面配置 page.json

1. 這里的 page.json 其實用來表頁面目錄下的 page.json 這類和小程序頁面相關(guān)的配置。
2. 開發(fā)者可以獨(dú)立定義每個頁面的一些屬性，如頂部顏色、是否允許下拉刷新等等。
3. 頁面的配置只能設(shè)置 app.json 中部分 window 配置項的內(nèi)容，頁面中配置項會覆蓋 app.json
   的 window 中相同的配置項。 屬性名類型默認(rèn)值描述navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色，如 #000000navigationBarTextStyleStringwhite導(dǎo)航欄標(biāo)題顏色，僅支持 black / whitenavigationBarTitleTextString導(dǎo)航欄標(biāo)題?字內(nèi)容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉 loading 的樣式，僅支持 dark / lightenablePullDownRefreshBooleanfalse是否全局開啟下拉刷新。 詳情 Page.onPullDownRefreshonReachBottomDistanceNumber50頁面上拉觸底事件觸發(fā)時距頁面底部距離，單位為px。 詳情 Page.onReachBottomdisableScrollBooleanfalse設(shè)置為 true 則頁面整體不能上下滾動；只在頁面配置中有效，無法在 app.json 中設(shè)置該項

6.3 sitemap 配置-了解即可

1. 小程序根目錄下的 sitemap.json 文件用于配置小程序及其頁面是否允許被微信索引。