一.WXML模板語法

1.1 數據綁定

• 綁定內容

跟vue差不多，在頁面的js文件定義到data裡面

然後通過插值語法用在wxml中即可

• 綁定屬性

  

  直接寫上插值語法，沒有：

  

• 三元運算

  生成一個十以內的隨機數

  

  

• 算數運算

  

  

1.2 事件綁定

小程式常用事件

小程式事件對象常用屬性

target和currentTarget的區別，target是觸發事件的源頭組件，而currentTarget是當前觸發這個事件的組件

要綁定一個事件只需要在組件上寫上事件類型以及對應的回調函數

然後回調函數寫在對應的js文件裡面，沒有什麼包裹直接寫在外層

1.2.1 修改data數據

這裡修改data裡面的數據，需要在函數裡面來改，而且改的方式有點不同，利用了 this.setData這個方法，裡面為一個對象可以對data裡面的一些值做一些操作，聽說這個方式是react的

1.2.2 事件傳參

註意小程式傳參數，不能寫在事件回調的括弧裡面，這樣寫只會被當做事件名

要傳參的話，需要在這個組件裡面來一個自定義屬性，data-什麼的形式，其中什麼就是你的參數名，值為一個插值語法

然後要拿參數的話就通過 e.target.dataset.參數名獲取

1.2.3 bindinput語法格式

首先組件綁定事件

然後註意這裡收集值，不是通過e.target而是e.detail

1.2.4 文本框與data之間的數據同步

首先data定義數據，然後文本框綁定數據

然後就是修改值改到數據裡面，通過bindinput事件來修改

1.3 條件渲染

通過wx：if來控制，當然也有對應的elif和else

1.3.1 block標簽

類似於template可以包裹一組標簽，讓他們集體顯示隱藏，而且最主要的他會不暫用空間佈局

1.3.2 hidden

可以直接用hidden控制組件顯示隱藏，註意為true是隱藏

hidden和wxif區別：hidden就是v-show（display：block/none）,wxif就是直接將元素幹掉了

1.4 列表渲染

wx：for

需要註意的是索引和值都通過裡面的插值語法獲得，這裡就偏向於模板引擎多一點

當然我們也可以自定義索引的名字和變數名

wxfor也需要key，沒有id也可以直接寫index索引，註意key不用寫插值語法

二.WXSS模板樣式

wxss和css大部分相同，主要區別是 rpx單位和@import樣式引入

2.1 rpx

小程式獨有尺寸單位，類似於rem，可以適配任意端。

是將寬度分為750份，所以所有屏幕的寬度都是750rpx，只是某些手機1rpx大一點某些手機1rpx小一點

單位換算

推薦採用iPhone6作為設計尺寸來做，因為直接px乘以2就是rpx單位

2.2 樣式導入

2.3 全局樣式/局部

定義在app.wxss裡面的即為全局樣式

在單獨文件裡面wxss都是局部樣式只對當前頁面生效

註意：

當兩個樣式衝突時，就近原則，局部會覆蓋全局

當局部樣式權重大於或等於全局時才會覆蓋

三.全局配置

app.json就是全局配置文件

首先預設有這些設置項

而我們小程式組成部分是

3.1 window

首先window中比較常用的配置項

註意導航欄背景顏色只支持#開頭的顏色

上拉觸底距離就是當我們滑動頁面下麵會刷新數據出來比如電商網站一直滑下麵，滾動條到一定距離就會刷新下麵的數據，小程式預設為50

3.1.1 tabBar

最少兩個最多五個

頂部tabBar不會顯示icon只會顯示文本

tabBar六個組成部分：

tabBar節點配置項：

直接添加在app.json裡面即可

註意

• list為必填項

  

  每一個tab又可以寫這些配置

  

  

  

四.頁面配置

每個頁面自己的json文件

對當前頁面的視窗外觀等進行配置

頁面配置常用屬性：

五.網路數據請求

註意：

• 只能請求https開頭的介面
• 必須將介面的功能變數名稱添加到信任列表中

5.1 配置request合法功能變數名稱

5.2 發起get請求

wx.request()

post同理，並且參數也是data

5.3 頁面剛載入時請求數據

在js裡面找到鉤子onLoad在這類請求數據

5.4 註意

跳過request合法校驗：

但是僅能在開發調試階段使用，不允許上線使用！

關於跨域和ajax：

由於跨域是因為瀏覽器的同源策略，而小程式宿主是微信，所以小程式不存在跨域問題

然後由於ajax是基於xhr這個瀏覽器的對象，小程式的宿主是微信，所以發起請求也不能叫做ajax請求叫做發起網路請求

六.本地生活案例

註意：

介面返回來的數據可以通過this.setData給到我們的data數據