@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尺寸單位：

設備rpx換算px (屏幕寬度/750)px換算rpx (750/屏幕寬度)

iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

具體的查看官方文檔

JS

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

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

• Page({}) 包括頁面的所有操作代碼。
• Page中，data里面包含了wxml頁面所需要的所有初始數據。
• Page中其它 on 開頭的都是小程序自帶的函數，用來響應用戶的響應動作，這些大家可以簡單看一下都能執行什么操作，然后就都可以刪掉了（暫時）。

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

下面是index.wxml的代碼

<!-- catchtap防止事件冒泡 --> <view class="box" catchtap="onTapBoxHandle"> <view class="child" catchtap="onTapChildHandle"></view> </view> <button size="mini" bindtap="onTapHandler">點我加1</button> <view>{{count}}</view>

下面是index.wxss的代碼

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

下面是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點擊")} })

發發牢騷

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

總結

以上是生活随笔為你收集整理的四十九、微信小程序开发页面样式WXSS和页面交互JS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。