一，調試工具
1）console面闆
代碼執行有錯誤時，錯誤資訊将顯示在這個面闆上，通過以下代碼可将資訊輸出到console面闆
console.log("資訊");
2)Network面闆
用于觀察和顯示網絡請求request和socket情況，通過這個面闆對網絡請求進行調試
3）Storage面闆
用于顯示目前項目使用本地存儲的情況，在小程式中使用wx.setStorage或者wx.setStorageSync将資料儲存到手機本地存儲中。
小程式的檔案結構
一個小程式首先有四個應用入口檔案：
---app.js:設定一些項目的全局變量
---app.json 每一個新頁面都必須在這個地方注冊，項目的導航欄和視窗界面設定有關的（注意：小程式新增或減少頁面，都需要對pages數組進行修改，如果沒有将頁面的路徑添加到pages數組中，即使小程式中的代碼導航到該頁面，仍然不能打開該頁面）
---app.wxss:項目全局樣式
---project.config.json 項目配置檔案
一個頁面主要包含以下四個檔案，這四個檔案的名字應該都是一樣的，最好以頁面所在的檔案夾名字為标準
- .js 頁面的邏輯檔案，在裡面編寫javascript代碼控制頁面邏輯，每個頁面中必須有這個檔案
- .wxml 頁面的描述檔案（類似html頁面中的描述檔案）用來設計布局，進行資料綁定
- wxss 頁面的樣式表檔案，用來定義本頁面使用到的各類樣式表
- .json 頁面的配置檔案
app.json中配置視窗底部tabBar
注意：iconpath和selectediconpath中的圖檔大小限制為40kb
生命周期函數
頁面的生命走起函數有以下幾個：
- onLoad:頁面加載完嗲用該函數，一個頁面隻會調用一次，該函數的參數可以擷取wx.navigateTo和wx.redirectTo
- onShow 頁面顯示時調用該函數，每次打開頁面都會調用一次
- onReady：頁面初次渲染完成調用該函數，代表頁面已經準備妥當，可以與視圖層進行互動
- onHide：頁面隐藏時調用該函數，當navigateTo或底部tab切換時調用該函數
- onUnload：頁面解除安裝時調用該函數（當redirectTo或navigateBack的時候調用該函數）
- onPullDownRefresh：下拉重新整理時調用該函數
條件渲染
1，wx：if條件渲染
2,wx:for清單渲染
注解：在wx:for清單渲染中，預設目前下标變量名為index，預設目前元素變量名為item
重命名下标和變量名，使用wx：for-item可以指定數組目前元素的變量名。使用wx：for-index可以指定數組目前下标的變量名
例如：九九乘法
頁面事件
通過定義事件來完成頁面與使用者的互動同時通過事件将視圖層（wxml頁面檔案）與邏輯層（js邏輯檔案）進行通信
事件類型，分為兩大類型：
- 冒泡事件：當元件上的時間被觸發時，該事件會想父節點傳遞
- 非冒泡事件，當一個元件上的事件被觸發後，該事件不會向父節點傳遞
小程式中提供的冒泡事件擁有以下幾個：
- touchstart：手指觸摸
- touchmove：手指觸摸後移動
- touchcancel：手指觸摸動作被打斷，如來電提醒，彈窗
- touchend：手指觸摸動作結束
- tap：手指觸摸後離開
- longtap：手指觸摸後，超過350ms再離開
除上面列出的事件之外，其他元件自定義事件都是非冒泡事件。
事件綁定
事件的綁定，在元件屬性中定義一個綁定事件的屬性，并設定該屬性的值即可
作為元件的屬性，是以bind或catch開頭，再加上事件類型字元串，如要為元件的觸摸離開設定綁定，則在該元件中增加一個名為bindtap或catchtap的屬性。而該屬性的值則是在js中定義的處理該事件的事件處理函數的名稱。如果js中不存在該函數名稱，觸發事件後将會報錯
提示：
bind開頭的事件綁定不會阻止冒泡事件向上冒泡，catch開頭的事件綁定可以阻止冒泡事件向上冒泡
其中event會傳回一個target屬性，target中的dataset集合使用較多。通過這個集合可以擷取元件中自定義資料的值
js中
例如：
wxml中
頁面樣式檔案wxss
樣式引入（将外部的wxss檔案引入到wxml中，，内部的wxss會自動關聯到wxml）：使用@import語句可以導入外聯樣式表，@import後跟需要導入的外聯樣式表的相對路徑，用；表示語句結束。
例如：
在.wxss樣式檔案中導入：@import "common.wxss";
正文：
第一章：快速開發UI界面
1.1元件的屬性
1）id屬性，與html中的id屬性類似，這是元件的唯一辨別，在同一頁面中id屬性必須保持唯一。
2）class屬性，class屬性為字元串類型，與html相同，通過class屬性來設定元件的樣式類
3）style屬性，與html相同，通過style屬性可設定元件的内聯樣式。
4）hidden屬性：屬性是一個邏輯值，用來決定該元件是否顯示。
5）data-*屬性：可為任何類型，可用來為元件設定任意的自定義屬性值。見前面的例子
6）bind*/catch*屬性,見上面的介紹
1.2，flex布局
注意使用flex布局時一定要注意開啟：display：flex
【1】flex-direction 彈性容器的布局方向
flex-direction:row 橫向布局
flex-direction:column：列布局
【2】justify-content 定義了項目在主軸上的對其方式
justify-content：flex-start 從左邊
justify-content：flex-end 從右邊
justify-content：conter 從中間
justify-content:space-between 均勻分布
justify-content: space-around 在最左邊和最右邊留一些空擋
【3】align-items表示在伸縮容器中的布局情況
align-item:flex-start 放在視圖的頂部
align-item:flex-center 放在視圖的中間
flex-end ,stretch
hover-class屬性倆指定元素的點選态效果，但是在使用時要注意，目前支援hover-class蘇醒的元件有三個：view，button，navigator
使用方法：
<view hover-class="bg_red">點選變紅</view>
..bg_red{
background:red;
}
icon自帶的圖示：
icontype:['success','info','warn','waiting','safe_success','safe_warn','success_circle','success_no_circle','waiting_circle','circle','download','info_circle','cancle','search','clear']