微信小程序样式

193 阅读1分钟

小程序中样式文件分为:全局样式和页面样式文件

页面样式的优先级比全局样式高

image.png

image.png

响应式单位 rpx
rpx(responsive pixel): 规定不管屏幕为多少px,小程序都换算 为750rpx
屏幕的宽度 = 750rpx      750px=750rpx,单位的转换就是 1px = 1rpx
在小程序中,可以使用的单位有px  em   vw   rpx
-   小程序不能使用 * 通配符。
-   rpx 小程序专属的响应式单位,规定屏幕宽度为 750rpx。
-   vw 单位规定屏幕宽度为 100vw,网页端和小程序端都能使用。  

image.png

image.png

内置组件 image mode

image.png

image.png

image.png

swiper常用属性---### 滑动组件

image.png

image.png

 swiper  和 image 相结合的难点。 
 swiper 默认高度是 150px
 image 默认高度是 240px 
 那么当两者在一起显示的时候,往往需要我们自行去微调两者的高度,已达到看起来比较和谐的效果。

navigator------ 链接组件

image.png

image.png

image.png

跳转其他小程序

image.png

button -----按钮组件

image.png

rich-text------富文本组件

image.png

自定义组件初体验

image.png

自定义组件父传子

image.png

image.png

自定义组件子传父

image.png

自定义组件传参与接参

image.png

综合案例

image.png

image.png

image.png

image.png

生命周期

应用生命周期

image.png

image.png

image.png

页面生命周期

image.png

image.png

image.png

image.png

组件生命周期

image.png

image.png

image.png

小程序API

image.png

image.png image.png

image.png