微信小程序建立及初步瞭解

安裝微信小程序開發者工具

註冊帳號

　　訪問註冊界面，按提示步驟來操做便可(注意：註冊過公衆號的QQ郵箱不可再用)。

獲取APPID

　　註冊成功後，登陸便會進入到如下界面：

微信小程序開發者工具下載連接及安裝：

　　下載連接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

　　下載好微信小程序開發者工具後，直接雙擊安裝，一直點擊下一步便可。

新建小程序項目

 微信開發工具介紹

大致介紹開發工具主要分四大塊

4.2 工具欄

　　在工具欄中咱們能夠點擊項目，建立項目以及導入項目，其餘的選項咱們無需瞭解。

咱們能夠在工具欄控制編輯器，調試器，模擬器的顯示，當期爲高亮的時候表示顯示

　　若是在未上線以前，若是咱們想在手機上看預覽咱們的小程序，就要先編譯，而後點擊預覽，就能夠看到咱們的小程序了。

　　好比咱們有些操做沒法在模擬器中完成，必須藉助與手機，而後又想看到動做產生的信息，就須要用到真機調試，手機上的操做，會直接打印在咱們的電腦端。這樣咱們就能夠更好的調試

切換後臺與清除緩存

在工具欄中咱們要特別注意的點

　　1 若是咱們的後臺服務沒有真實的服務器以及https域名，咱們是沒有辦法進行真機調試。

　　2 在開發階段咱們不少的功能不要真機調試，也能夠完成。那咱們只須要與本地的服務器交互便可。

　　3 若是不在下圖所示的地方進行設置，小程序的與本地交互仍是沒法完成。他會校驗的微信官網的後臺，也就是你的我的小程序帳戶（https://mp.weixin.qq.com/）

若是咱們作了如圖配置，小程序與後臺程序進行交互的時候，就不須要校驗咱們的https的域名以及服務器

編輯器

　　編輯器就比較簡單，咱們表注一下是什麼就能夠了

4.3調試器

調試器的功能與咱們瀏覽器中的f12調用出來的調試者模式同樣，可是有一點不一樣

 小程序結構目錄

　　小程序框架有着本身的視圖層描述語言 WXML、WXSS 和 JavaScript。並在視圖層和邏輯層之間提供了數據傳輸和事件系統。

小程序文件結構和傳統web對比

基本項目的目錄

 配置介紹

　　一個小程序應用程序會包括兩種配置文件。一種是全局的 app.json 和頁面本身的 page.json。

全局配置app.json

　　app.json是當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等。

{
　　"pages":[       # 用於描述當前小程序所處的頁面路徑
　　　　"pages/index/index", 
　　　　"pages/logs/logs" 
　　],
　　"window":{      # 定義小程序全部頁面的頂部背景顏色，文字顏色定義等等
　　　　"backgroundTextStyle":"light", 
　　　　"navigationBarBackgroundColor": "#fff", 
　　　　"navigationBarTitleText": "WeChat", 
　　　　"navigationBarTextStyle":"black" 
　　}
}

 頁面配置page.json

　　這裏的 page.json 其實用來表示頁面目錄下的 page.json 這類和小程序頁面相關的配置。頁面的配置只能設置 app.json 中部分 window 配置項的內容，頁面中配置項會覆蓋 app.json  的 window 中相同的配置項。

navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如#000000
navigationBarTitleText	String		導航欄標題文字內容
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark/light
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位爲px。
屬性	類型	默認值	描述
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 black/white
backgroundColor	HexColor	#ffffff	窗口的背景色
enablePullDownRefresh	Boolean	false	是否全局開啓下拉刷新。
disableScroll	Boolean	false	設置爲 true 則頁面總體不能上下滾動；只在頁面配置中有效，沒法在 app.json 中設置該項