微信小程式入門到實戰(三)

2022-04-29 10:45:09 字數 3198 閱讀 4486

上一遍文章的結尾介紹了小程式簡單的資料繫結方式,但是核心要知道:資料繫結,都是借用data這個屬性作為乙個中轉地,伺服器上面獲取的資料,經過處理,使用this.setdata()方法繫結到data屬性中的乙個變數,在通過這個變數繫結到頁面上面。

接下來說一下資料繫結的其他用途:

標籤的顯隱

前面說到,小程式裡面沒有dom的概念,就不能通過標籤的displayvisibility屬性來控制,那怎麼控制呢?

在小程式裡面,對於乙個標籤的屬性值是true / false的時候,在繫結資料的時候,就會對其中的資料進行布林值的比較,有值就為真,繫結的資料是false或者是空的時候就是假;

就拿前面說的輪播元件來說,當我在對應的頁面data屬性裡面設定date的值的時候,只要不為空或者false,那麼swiper中的兩個通過繫結資料的方式設定屬性值的屬性,其屬性值就都會被解析為true。那個直接設定falseautoplay屬性就不會自動輪播。

注意那個wx:if='} ',才是控制標籤顯示和隱藏的關鍵。如果date是真,那麼wx:if='} '結果為真,就會顯示輪播元件,如果date是假,那麼wx:if='} '結果為假,就會隱藏輪播元件

的切換通常我們做的切換,一般是通過改變的路徑來實現;在小程式裡面可以使用if else動態的控制的切換。

類似上面說的控制標籤的顯示和隱藏,也要使用到資料繫結:

class='circle-img'>

catchtap='oncollectiontap'

wx:if='}'

src='/images/icon/collection.png'>

image>

catchtap='oncollectiontap'

wx:else

src='/images/icon/collection-anti.png'>

image>

catchtap='onsharetap'

class='share-img'

src='/images/icon/share.png'>

image>

view>

上面**裡面,只顯示兩張,通過collected這個從伺服器傳過來的標識,來判斷是顯示wx:if='ture'的,還是顯示wx:else的,兩者選其一,很方便的控制了的切換。

通常編寫頁面的時候,想把相同的區域呈現多次,又不想編寫冗餘的**,小程式裡面通過乙個屬性:wx:for='}'

for='}' wx:for-item='item' wx:for-index='idx'>

catch:tap='onbind'>}

catch:tap='onbind'>}

catch:tap='onbind'>}

// page頁面中的資料來源

onload: function (options) , ]

this.setdata()

// this.setdata(datasarr) setdata 方法接收的是乙個物件,而不是陣列

}

我們把要呈現多次的區塊,用乙個標籤包裹view / block,然後在其上面作用於wx:for屬性,接收乙個陣列或者集合的資料,datesarry就是要迴圈的資料陣列,wx:for-item='item' wx:for-index='idx'中的item是被迴圈的子物件,idx是對應子物件在資料陣列裡面的索引位置;這兩個值都預設是有的,即使不寫。

前面也說道過,this.setdata()方法是把裡面接收到的資料,繫結到page下面的data屬性裡面,然後在展示在頁面中,小程式的資料繫結,都是從page中的data屬性中讀取資料去完成資料繫結。這個讀取data屬性中的資料去繫結到頁面的動作是發生在onload事件之後的。

既然這麼說的話,那麼可不可以直接給data物件身上直接新增屬性,並且直接賦值:this.data.datesarry=datasarr,這樣是繫結不了資料到頁面上,雖然不會報錯,小程式的前期版本裡面是可以這樣繫結資料的。所以都建議使用this.setdata()方法去主動更新資料。

要是資料是存放在其他的資料夾下面,應該怎麼樣讀取呢?在資料檔案中,通過丟擲乙個資料出口,來通過其他檔案進行訪問:

module.exports =
在要使用資料的js檔案下,引入要使用資料的路徑,應該在page外面引入:

var postsdata = require('資料檔案所在的路徑');
注意這個require中的路徑名是相對路徑,不能是絕對路徑。

微信小程式入門到實戰(二)

上一文章裡面,我們實現了第乙個小程式頁面,並且了解到了一些小程式的知識,接下來繼續開始我們的學習。wx.redirectto wx.switchtab wx switchtab 路徑可得注意寫對,區分絕對路徑和相對路徑 絕對路徑 一般在前面加上 表示從根目錄開始往下尋找 相對路徑 相對於當前頁面來說...

微信小程式實戰入門

一 簡介 參考 二 工程 參考 quickstart basic file.html 工具設計介面可調整機型 顯示百分比 資料連線方式。三 發布 個人上線了乙個木材材積計算器 兩天做的,有web前後端經驗很容易入手,有增加 共計 記錄功能 審核很快,一天審核結束 後來發現已經之前有公司做了,尷尬,而...

微信小程式入門

標籤 view text 語法 條件渲染 view view else view 列表渲染 for wx key view for wx for item myitem wx for index myindex text 模板template 定義 template name temp view t...