微信小程序（開發工具、項目創建、發佈審覈、人員及目錄結構分析）

課程大綱

（1）賬號申請
（2）後臺小程序信息完善
（3）安裝開發工具IDE
（4）小程序項目搭建
（5）項目編譯
（6）真機預覽調試

開發前準備

小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。
小程序開發前準備：
①申請賬號
②安裝開發工具

申請賬號

開發小程序之前需要先註冊一個小程序賬號，通過這個帳號你就可以管理你的小程序。
賬號申請：
進入小程序註冊頁根據指引填寫信息和提交相應的資料，就可以擁有自己的小程序帳號。
網址：https://mp.weixin.qq.com

小程序APPID

註冊完畢後即可登錄小程序後臺
AppID：
在菜單 “開發”-“開發設置” 可以看到個人的小程序 AppID，這個在開發會用到，相當於微信小程序給開發人員的通行證。

小程序基本信息

接下來設置小程序基本信息
小程序名稱、簡介、簡稱、頭像、服務類目等

小程序開發工具

編寫小程序代碼需要專門安裝小程序開發工具
下載版本：
注意：小程序開發工具兼容問題
需要注意的是小程序開發工具在 Windows上僅支持 Windows 7 及以上版，在 Mac 上支持 OS X 10.8 及以上版本
雙擊下載完成的安裝文件，根據提示點擊下一步，即可完成安裝，安裝成功後，可以在桌面或者開始菜單中找到小程序開發工具的快捷方式，打開即可。

開啓小程序之旅

接下來打開微信小程序開發工具，開始創建小程序項目，使用之前註冊小程序所使用的微信掃碼登錄。
上圖注意事項：
①項目名稱，英文命名，避免中文及其他特殊符號開頭
②目錄下最後一級，最好改成項目名，方便後期管理瀏覽
③AppID在小程序後臺的設置中查看
④後端服務選擇不使用服務器
⑤選擇完畢後點擊創建，即可生成小程序項目
初次打開後一般都會自動編譯預覽，如果沒有，則點擊頂部菜單編譯就可以在微信開發者工具中預覽你的第一個小程序。

真機預覽

小程序開發工具提供了預覽和真機測試兩種途徑來供開發人員在手機上瀏覽測試項目，俗稱“真機測試/調試”。
預覽二維碼如下：

真機調試二維碼如下：

小程序（發佈審覈、人員及目錄結構分析）

課程大綱

（1）上傳代碼
（2）提交審覈
（3）發佈
（4）代碼包優化
（5）小程序目錄結構分析

上傳代碼

同預覽和真機調試不同，上傳代碼是用於提交體驗或者審覈使用的。
點擊開發者工具頂部操作欄的上傳按鈕，填寫版本號以及項目備註，需要注意的是，這裏版本號以及項目備註是爲了方便管理員檢查版本使用的，開發者可以根據自己的實際要求來填寫這兩個字段。
上傳成功之後，登錄小程序管理後臺 - 開發管理 - 開發版本就可以找到剛提交上傳的版本了。
可以將這個版本設置體驗版或者是提交審覈

項目上傳

編寫完代碼後，在微信開發工具點擊上傳，將項目上傳至網上。
點擊上傳後，填寫小程序項目版本1.0.0（後續每次發佈時都要進行修改，便於識別和版本管理），點擊上傳後，便可以在小程序後臺看到發佈的版本。
例如：第二次發佈時版本爲1.0.2，第三次爲1.0.3等等… …，每次更新後都可以在後臺查看到對應版本。
發佈完成後，可以在後臺選擇“體驗版”，點擊選擇“選爲體驗版本”，即可生成體驗版。
至此，除了開發人員外，他人也可以體驗使用小程序，前提是需要加到體驗者名單裏。
體驗版生效後，即可將客戶拉到體驗人員名單，開始體驗小程序。
開發版—僅僅開發人員和管理員可以瀏覽項目。
體驗版—只要在小程序後臺，加入到體驗人員名單裏，即可掃碼體驗小程序。
注意：
在發佈體驗版本之前，只有管理員和開發人員纔可以體驗使用小程序，其他人員均無法使用。

提交審覈

爲了保證小程序的質量，以及符合相關的規範，小程序的發佈是需要經過審覈的。
①在開發者工具中上傳了小程序代碼之後，登錄小程序管理後臺 - 開發管理 - 開發版本找到提交上傳的版本。
②在開發版本的列表中，點擊提交審覈按照頁面提示，填寫相關的信息，即可以將小程序提交審覈。
注意：開發者需要嚴格測試了版本之後，再提交審覈，過多的審覈不通過，可能會影響後續的時間。

發佈

審覈通過之後，管理員的微信中會收到小程序通過審覈的通知，此時登錄小程序管理後臺 - 開發管理 - 審覈版本中可以看到通過審覈的版本。
點擊發布後，即可發佈小程序，新發布後的小程序一般會在12-24小時內在客戶端更新。
發佈模式：
小程序提供了兩種發佈模式：全量發佈和分階段發佈（灰度發佈）。全量發佈是指當點擊發布之後，所有用戶訪問小程序時都會使用當前最新的發佈版本。
分階段發佈是指分不同時間段來控制部分用戶使用最新的發佈版本，分階段發佈也稱爲灰度發佈。
一般來說，普通小程序發佈時採用全量發佈即可，當小程序承載的功能越來越多，使用的用戶數越來越多時，採用分階段發佈是一個非常好的控制風險的辦法。

代碼包優化

小程序初始代碼包限制爲 1MB，但後來微信收到反饋說代碼包大小不夠用，經過評估後放開了這個限制，擴容增加到 2MB 。
開發者：代碼包上限的增加對於開發者來說，能夠實現更豐富的功能
用戶：對於用戶來說，增加了下載流量和本地空間的佔用
注意：
①開發者在實現業務邏輯同時要儘量減少代碼包大小，因爲代碼包大小直接影響到下載速度，從而影響用戶首次打開體驗。
②每次在“微信開發工具”上傳代碼時，都會顯示項目代碼包的大小；代碼包超出限制後會給出相應提示，甚至禁止上傳。

小程序目錄結構

小程序由配置代碼JSON文件、模板代碼 WXML 文件、樣式代碼 WXSS文件以及邏輯代碼 JavaScript文件組成。
接下來結合之前的項目，對小程序的代碼組成做一個大致的介紹。
- html:hyper text markup language超文本標記語言
- wxml:weixin markup language微信標記語言

小程序目錄結構

仔細查看之前創建的項目，可以發現項目裏生成很多不同類型的文件：
①.json 後綴-----------JSON 配置文件
②.wxml 後綴---------WXML 模板文件
③.wxss 後綴--------- WXSS 樣式文件
④.js 後綴--------------JS 腳本邏輯文件
接下來依次分析下每個文件的作用
- 開發中主要將其歸爲兩個級別：
  小程序級別app
  頁面級別pages
後來又新增了兩個
sitemap.json小程序收錄設置
project.config.json項目配置文件
（1）sitemap.json小程序收錄設置
- 微信現已開放小程序內搜索，你的小程序頁面將可能展示在微信搜索等多個公開場景中。
- 當開發者允許微信索引時，微信會通過爬蟲的形式，爲小程序的頁面內容建立索引。
默認值：默認所有頁面都能被索引，開發中一般不用進行相關配置.
如果不想被搜索到，可以到小程序後臺配置其小程序頁面是否允許微信索引----->設置-基本設置-隱私設置
（2）project.config.json項目配置文件
- 新增項目配置文件：小程序開發者工具在項目的根目錄新增了一個項目配置文件project.config.json
作用：
- 在工具上做的任何配置都會寫入到這個文件，當重新安裝工具或者換電腦工作時，只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。
（3）關閉開發工具中控制檯的索引提示
- 在初始化項目後，打開控制檯會看到每打開一個頁面，在控制檯都會有警告提示
  index頁面如下圖：
  
  logs頁面如下圖：
因爲sitemap 的索引提示是默認開啓的，所以控制檯會有警告提示，並不影響開發。
如何在控制檯關閉 sitemap 的索引提示？
方案：在小程序項目配置文件 project.config.json 的 setting 中添加配置字段 checkSiteMap 爲 false
上圖注意事項如下：
2019.04.28更新後
新增根據sitemap配置，控制檯顯示當前頁面索引情況
（4）根目錄文件
①pages，必須，用於存放頁面文件的文件夾
②utils，非必，用於存放公共js的文件夾
③app.js，必須，小程序邏輯文件
④app.json，必須，小程序配置文件
⑤app.wxss，非必，小程序公共樣式文件
⑥project.config.json，更新後自帶，項目配置文件(無需關注)
⑦sitemap.json，更新後自帶，小程序收錄設置文件（無需關注）
（4）小程序級別
一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：
（5）頁面page級別
1、微信小程序是由若干個頁面構成的
2、所有的頁面內容必須存放在[pages]文件夾下，例如初始化項目中的兩個頁面index和logs頁面都在pages文件夾下
3、在[pages]文件夾下，每個頁面都具備一個獨立的文件夾
每個小程序頁面由四個文件組成，分別是：
** 規定：爲了方便開發者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名。**
（5）頁面page級別
- 頁面由以下4個文件組成：以pages/index/爲例
  ①index.wxml，必須，頁面的結構文件，類似於HTML文檔
  ②index.wxss，非必須，頁面的樣式表文件，類似於CSS文檔
  ③index.js，必須，頁面的邏輯文件，類似於js文檔
  ④index.json，非必須，頁面的配置文件（例如頁面是否允許下拉刷新、等待icon樣式等等）