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相关推荐

微信小程序开发03(样式wxss与常用组件)
样式与常用组件
微信小程序开发：学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]--页面跳转及传参页面跳转一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
使用 Abp.Zero 搭建第三方登录模块（四）：微信小程序开发
简短回顾一下微信小程序端的流程: 用户通过扫码进入小程序的鉴权页面,更新状态到ACCESSED已扫码用户点击确认授权,微信通过wx.login()接口获取第三方登录的必要信息:Code登录凭证. 微 ...
四十七、微信小程序开发页面结构WXML
这年头,一天不学习,天理难容. 还是赶紧复习微信小程序的知识,加大学习力度. 文章目录 WXML 数据绑定 WXML基本语法系统组件 WXML WXML(WeiXin Markup Language ...
微信小程序开发之——比较数字大小-页面样式(2.3)
一概述 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式.WXSS具有CSS大部分特性,并在CSS基础上做了一些扩充和修改. 二选择器 2.1 概述 W ...
微信小程序开发之——婚礼邀请函-邀请函页面(4.3)
一概述 "邀请函"页面说明婚礼邀请函功能开发效果图二 "邀请函"页面说明右上角有一个背景音乐播放按钮,用于控制音乐播放状态,单击按钮播放音乐,再次点击 ...
微信小程序开发之——婚礼邀请函-照片页面(4.4)
一概述 "照片"页面任务说明 "照片"页面功能开发效果图二 "照片"页面任务说明每一张轮播的图片都占满显示区域,滑动屏幕可以实现图片 ...
微信小程序开发之——调查问卷-服务器数据交互(2.2.3)
一概述小程序与服务器交互说明利用Express框架,快速搭建HTTP服务器小程序端编写代码响应HTTP请求二小程序与服务器交互说明将用户提交的表单提交到服务器,可以通过小程序中的网络AP ...
微信小程序学习笔记——样式 WXSS 【尺寸单位，样式导入，使用less或sass】
目录 1.尺寸单位 2.样式导入 3.选择器 4.小程序中使用less (sass也是一样的) 1.尺寸单位 rpx(responsive pixel):可以根据屏幕宽度进行自适应,规定屏幕宽韦75 ...
微信小程序开发 reLaunch与navigateTo基本页面跳转 / 解决无法跳转问题
reLaunch跳转跳转到指定页面注意: 页面地址不是绝对路径时,此时的url=当前文件夹的绝对地址+/pages/index/index 如果程序定义了 tabBar,reLaun ...

四十九、微信小程序开发页面样式WXSS和页面交互JS

文章目录

WXSS

JS

四十九、微信小程序开发页面样式WXSS和页面交互JS相关推荐

最新文章

热门文章