一.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資料
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/500898.html
標籤：其他