样式与常用组件

😎1.样式wxss

😎1.1------尺寸单位

rpx是微信小程序独有的、解决屏幕自适应的尺寸单位 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

---------px与rpx之间的换算

• 在普通网页开发中，最常用的像素单位是px
• 在小程序开发中，推荐使用rpx这种响应式的像素单位进行开发
• 以 iPhone6 为例，iPhone6 的屏幕宽度为 375px，共有 750个物理像素，则 750rpx = 375px = 750 物理像素
• 得出公式：1 rpx = 0.5 px = 1 物理像素
• 举个例子：在iPhone6上，如果要绘制一个宽为100px，高为30px的盒子，换算成rpx单位，宽高分别为200rpx 和 60rpx

😎1.2------样式导入

注: 必须是相对路径

@import '路径' 

😎1.3------选择器

小程序不支持*通配符

选择器	详解
class	类选择器
id	id选择器
element	标签选择器
element,element	支持多个标签的选择器
:nth-child(n)	下标选择器
::after	伪元素
::before	伪元素

😎1.4------小程序中使用less

原生不支持 编程工具:vscode

1.安装插件EasyLess

2.配置Settings.json(右键该插件-->扩展设置--->在settings.json中编辑)

"less.compile": {
        "outExt": ".wxss"//这里是转换成的文件类型.....
        },

---

😜2.常用组件

官网:developers.weixin.qq.com/miniprogram…

😜2.1------view

可以当作HTML中的div,自动换行...

---------属性

属性	说明
hover-class	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果类型:string
hover-stop-propagation	指定是否阻止本节点的祖先节点出现点击态类型:boolean
hover-start-time	按住后多久出现点击态，单位毫秒类型:number
hover-stay-time	手指松开后点击态保留时间，单位毫秒 类型:number

---------示例

<view hover-class="tapview">helloview</view>

wxss

.tapview{
    background-color: teal;
}

当鼠标按下时

😜2.2------text

文本标签.不支持换行

---------属性

属性名	详解
selectable	文本是否可选 (已废弃)
user-select	文本是否可选，该属性会使文本节点显示为 inline-block
space	显示连续空格(值:ensp、emsp、nbsp)
decode	是否解码

---------示例

<text selectable="{{false}}" decode="{{true}}">你能&nbsp;&nbsp;复制我么</text>
<!--decode是否开启转码 selectable是否允许被选中-->

😜2.3------image

图片标签（默认:320*240）

---------属性

此处写几个常用属性

属性名	详解
src	图片资源地址
mode	图片裁剪、缩放的模式 （值请参考官方文档-常用:widthFix）
lazy-load	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

---------示例

<image src="https://gw.alicdn.com/imgextra/i1/O1CN01SDk7Lg1mN1e63WwYy_!!6000000004941-2-tps-1920-380.png" mode="widthFix" style="width: 100%;" /><!--默认320px*240px-->

---

😜2.4------swiper轮播图

轮播图组件,默认大小:375*150<siper>---><siper-item></siper-item>---></siper> 最标准的大小即:轮播w/轮播h=图片w/图片h

---------属性

属性名	详解
indicator-dots	是否显示面板指示点
indicator-color	指示点颜色
indicator-active-color	当前选中的指示点颜色
autoplay	是否自动切换
current	当前所在滑块的 index
interval	自动切换时间间隔
duration	滑动动画时长
circular	是否采用衔接滑动
easing-function	指定 swiper 切换缓动动画类型(default、linear、easeInCubic 、easeOutCubic、easeInOutCubic )
bindchange	current 改变时会触发 change 事件，event.detail = {current, source}
大概属性就这些....

---------示例

wxss

swiper{
    width: 100%;
    height: calc(100vw/(1053/750));
}
image{
    width: 100%;
}

<!-- swiper轮播图  375*150 img 320*240  轮播w/轮播h=图片w/图片h-->
<swiper autoplay indicator-dots="true" indicator-active-color="red" interval="2000" circular="true">
    <swiper-item>
        <image src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" mode="widthFix"/>
    </swiper-item>
    <swiper-item>
    <image src="https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF" mode="widthFix"/>
    </swiper-item>
    <swiper-item>
        <image src="https://t7.baidu.com/it/u=3569419905,626536365&fm=193&f=GIF" mode="widthFix"/>
    </swiper-item>
</swiper>

---

😜2.5------navigator导航

类似于a标签跳转..... 默认不能跳转tabbar的页面

---------属性

常用属性

属性名	详解
target	在哪个目标上发生跳转，默认当前小程序
url	当前小程序内的跳转链接
open-type	跳转方式

target：

• self当前小程序
• miniProgram 其他小程序

open-type:

• navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
• redirect 对应 wx.redirectTo 的功能
• switchTab 对应 wx.switchTab 的功能
• reLaunch 对应 wx.reLaunch 的功能 1.1.0
• navigateBack 对应 wx.navigateBack 的功能 1.1.0
• exit 退出小程序，target="miniProgram"时生效

---------示例

<!-- navigator导航  默认不能跳转tabbar的页面 -->
<navigator url="../demo1/demo1">navigate模式demo1</navigator>
<navigator url="../demo1/demo1" open-type="redirect">redirect模式demo2</navigator>
<navigator url="../index/index" open-type="switchTab">去tabbar页</navigator>
<navigator url="../index/index" open-type="reLaunch">reLaunch模式tabbar页</navigator>

• 默认navigate模式： 有返回上一步按钮

• redirect模式 能返回首页

• 去tabbar页(switchTab) 成功跳转,无返回.....

• reLaunch模式去tabbar页 去tabbar页无返回,去其他页有返回主页.....（已验证）

😜2.6------rich-text富文本

富文本转换html

---------属性

属性名	详解
nodes	节点列表/HTML String
space	显示连续空格（ensp、emsp、nbsp）

---------示例

<!-- rich-text富文本 -->
<rich-text nodes="<h1>碰磕</h1>">
</rich-text>

成功转换显示......

😜2.7------icon图标

icon图标

---------属性

属性名	详解
type	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。
color	图标颜色

---------示例

<!-- icon -->
<icon type="success" size="40" color="pink"></icon>

---

😜2.8------button按钮

与html中按钮标签差不多....

---------属性

属性名	详解
size	按钮的大小
type	按钮的样式类型 （primary 绿色default 白色warn 红色）
plain	按钮是否镂空，背景色透明
disabled	是否禁用
loading	名称前是否带 loading 图标
open-type	微信开放能力(详细请看官网,此处演示share分享....)

---------示例

<!-- button -->
<button type="primary" open-type="share">分享</button>

点击分享即触发微信开放方法....

---

😜2.9------radio单选框

需要与radio-group一起使用

---------示例

当单选按钮被选中时会触发bindchange回调函数

	<radio-group bindchange="handleChange">
    <radio value="男" checked>男</radio>
    <radio value="女">女</radio>
    </radio-group>

js

//单选按钮被选中
    handleChange(e){
        console.log(e);
    }

最终选中触发回调函数

😜2.10------checkbox复选框

也需要与checkbox-group一起使用 与radio用法一模一样

---------示例

当复选框被选中时会触发bindchange回调函数

 <checkbox-group bindchange="handleCheck">
        <checkbox value="吃饭">吃饭</checkbox>
        <checkbox value="睡觉">睡觉</checkbox>
        <checkbox value="打豆豆">打豆豆</checkbox>
    </checkbox-group>

js

//多选框被选中
    handleCheck(e){
        console.log(e);
    }

最终选了两个打印

---

样式与常用组件的学习就完结了😊😊😊..........