四十九、微信小程序開發頁面樣式WXSS和頁面交互JS

@Author：Runsen

一天不寫博客，混身不爽。今天繼續復習小程序中的WXSS和JS。

文章目錄

WXSS

JS

WXSS

WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式；它可以在組件中定義，也可以單獨放到WXSS文件中定義。

WXSS對尺寸單位進行了擴充，引入rpx（responsive pixel），可以根據屏幕寬度進行自適應。

微信小程序規定所有屏幕寬均為750rpx，對于寬度設計可以用rpx來標注。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素。 則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

rpx尺寸單位：

具體的查看官方文檔

JS

打開index.js編輯頁面，我們先把這頁面的所有內容都清空，然后輸入Page，開發者工具會彈出提示，這時按tab鍵即可生成默認代碼。首先認識一下這個默認代碼的結構：

Page({ /**頁面的初始數據*/ data: { }, /** 生命周期函數--監聽頁面加載*/ onLoad: function (options) { }, /**生命周期函數--監聽頁面初次渲染完成*/ onReady: function () { }, /**生命周期函數--監聽頁面顯示*/ onShow: function () { }, /**生命周期函數--監聽頁面隱藏*/ onHide: function () { }, /**生命周期函數--監聽頁面卸載*/ onUnload: function () { }, /**頁面相關事件處理函數--監聽用戶下拉動作*/ onPullDownRefresh: function () { }, /**頁面上拉觸底事件的處理函數*/ onReachBottom: function () { }, /**用戶點擊右上角分享*/ onShareAppMessage: function () { } })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

Page({}) 包括頁面的所有操作代碼。

Page中，data里面包含了wxml頁面所需要的所有初始數據。

Page中其它 on 開頭的都是小程序自帶的函數，用來響應用戶的響應動作，這些大家可以簡單看一下都能執行什么操作，然后就都可以刪掉了（暫時）。

這里需要了解下bindtap和catchtap的區別，catchtap防止事件冒泡。

下面是index.wxml的代碼

點我加1 {{count}}

1

2

3

4

5

6

下面是index.wxss的代碼

.box{ width: 200rpx; height: 200rpx; background: red; } .child{ width: 100rpx; height: 100rpx; background: gray; }

1

2

3

4

5

6

7

8

9

10

11

下面是index.js的代碼

Page({ data:{ count: 0 }, onTapHandler:function(){ this.setData({ count:this.data.count+1 }) }, onTapBoxHandle:function(){ console.log("Box點擊") }, onTapChildHandle:function(){ console.log("Child點擊") } })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

發發牢騷

還是古人說得好哇，“問渠那得清如許？為有源頭活水來”。人總得不斷地學習新知識，才能趕得上時代的發展。有位朋友曾問我一個很有意思的問題，“人的一生奔波于學習、工作、婚姻，我們那么辛苦，究竟是為了什么？”其實根據馬斯洛的需求理論，這個問題很好回答，只有生存，才能談生活。想起網上有這么一段話：編程的樂趣是什么？人的成就感來源于兩樣東西，創造和毀滅。我想更好的回答是追求，追求美好的生活。說得更淺顯一點，是欲望，滿足自己的欲望，也滿足他人的欲望。

API 小程序

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。