微信小程式從入門到棄坑

一，調試工具

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

生命周期函數

頁面的生命走起函數有以下幾個：

1. onLoad:頁面加載完嗲用該函數，一個頁面隻會調用一次，該函數的參數可以擷取wx.navigateTo和wx.redirectTo
2. onShow 頁面顯示時調用該函數，每次打開頁面都會調用一次
3. onReady：頁面初次渲染完成調用該函數，代表頁面已經準備妥當，可以與視圖層進行互動
4. onHide：頁面隐藏時調用該函數，當navigateTo或底部tab切換時調用該函數
5. onUnload：頁面解除安裝時調用該函數（當redirectTo或navigateBack的時候調用該函數）
6. onPullDownRefresh：下拉重新整理時調用該函數

條件渲染

1，wx：if條件渲染

2,wx:for清單渲染

注解：在wx:for清單渲染中，預設目前下标變量名為index，預設目前元素變量名為item

重命名下标和變量名，使用wx：for-item可以指定數組目前元素的變量名。使用wx：for-index可以指定數組目前下标的變量名

例如：九九乘法

頁面事件

通過定義事件來完成頁面與使用者的互動同時通過事件将視圖層（wxml頁面檔案）與邏輯層（js邏輯檔案）進行通信

事件類型，分為兩大類型：

1. 冒泡事件：當元件上的時間被觸發時，該事件會想父節點傳遞
2. 非冒泡事件，當一個元件上的事件被觸發後，該事件不會向父節點傳遞

小程式中提供的冒泡事件擁有以下幾個：

• 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']