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

2022-04-29 10:45:10 字數 2919 閱讀 3086

上一文章裡面,我們實現了第乙個小程式頁面,並且了解到了一些小程式的知識,接下來繼續開始我們的學習。

-wx.redirectto()

-wx.switchtab()

wx

.switchtab()

路徑可得注意寫對,區分絕對路徑和相對路徑:

絕對路徑:一般在前面加上/,表示從根目錄開始往下尋找

相對路徑:相對於當前頁面來說,每次使用../就是往上跳出一層

第一和第二種方法主要的區別是:前者保留當前頁面(父頁面,執行onhide()方法),跳轉到其他頁面(子頁面),最後可以返回到當前頁面(父頁面),兩個頁面之間是父子關係;後者關閉當前頁面(執行onunload()方法),跳轉到其他頁面,無法返回,兩個頁面是平行關係。

第三種比較特別,這種跳轉是專門跳轉到帶有tabbar的頁面,並關閉其他所有非tabbar頁面,使用上面兩種跳轉方式是無效的。從tabbar的頁面跳轉到非tabbar的頁面,可以使用上面的兩種方式。

swiper通常是配合著swiper-item來使用的,前者是整個輪播圖的容器,後者是單一輪播子專案容器,僅在前者內部使用,寬高預設為swiper的寬高,只是乙個容器,沒有其他作用,但是缺少又不行。所以對於swiper-item都應該作用在swiper父節點上面。

我們不能想當然的認為在swiper-item裡面只能放,還可以放入其他的一些東西,比如文字;實現一些其他的業務,比如彈幕輪播。

通過設定vertical='true'設定輪播滾動的方向,indicator-dots='true'指示器的顯示

在輪播圖裡面,實際控制的大小是依靠image標籤,預設有寬高。

事件一般分兩種:

冒泡事件:點選了子節點,父節點上面的事件也會執行;但是點選父節點上面的事件,子節點上面的事件不會執行bind開頭:表示冒泡,後面接事件名

非冒泡事件:當乙個元件上的事件被觸發後,該事件不會向父節點傳遞。一般在子節點上面新增。catch開頭:表示非冒泡,後面接事件名

'onbind'>

我是事件2

'onbind'>我是事件1

onbind: function

(event)

, onbind: function

(event)

在我點選了事件1沒有點選事件2的時候,事件2也會被觸發,這就是冒泡;但是把方法改為catchtap,點選事件1的時候,只是事件1的函式觸發,事件2函式不會被執行。還有一種catch:tap的宣告事件的方法。

小程式裡面沒有dom節點的概念,不能夠像使用jquery一樣,通過操作dom節點來給頁面新增資料。相反的小程式通過資料繫結,來達到資料優先。這樣的好處在於不用操作dom,減少頁面載入的時間。

src='}'

catch:tap='onbind'>

}view>

view>

page(

}

上面這種就是資料繫結的方式,在對應頁面js檔案中的page()data屬性裡面,填寫頁面需要的資料,以鍵值對的形式,然後在頁面對應的位置使用},繫結資料。當然可以在乙個位置繫結多個資料,只需要這樣}}。在標籤的屬性上面繫結資料的時候,需要使用"}"

catch:tap='onbind'>}}

page(,

onload: function

(options)

this.setdata(dates)

}}

當然不可能直接在data裡面寫資料,這些資料都是從伺服器上面獲取的,在頁面初始化的時候,就會向伺服器傳送請求,對資料進行一番處理後,通過this.setdata()的方法把資料繫結在頁面上面,this.setdata()方法裡面接收到的引數,相當於把這寫引數,先放在data屬性裡面,然後在通過data屬性中的鍵值,繫結在頁面上。當然會把相同的屬性名(key值)的覆蓋掉

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

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

微信小程式實戰入門

一 簡介 參考 二 工程 參考 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...