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

网友投稿 1003 2022-05-30

@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

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

22

23

24

25

26

27

28

29

Page({}) 包括页面的所有操作代码。

Page中,data里面包含了wxml页面所需要的所有初始数据。

Page中其它 on 开头的都是小程序自带的函数,用来响应用户的响应动作,这些大家可以简单看一下都能执行什么操作,然后就都可以删掉了(暂时)。

这里需要了解下bindtap和catchtap的区别,catchtap防止事件冒泡。

下面是index.wxml的代码

{{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小时内删除侵权内容。

上一篇:怎么抓取 MQTT 协议数据包进行调试分析
下一篇:【 MATLAB 】residuez 函数介绍(Z变换部分分数扩展)
相关文章