weChat applet 微信小程序(2) WXSS 小程序组件

WXSS

概述: WXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML组件的样式

WXSS具有CSS的大部分特性，但对其进行了扩展：

尺寸单位
rpx(Resonsive Pixel)，响应式像素，其可以根据屏幕宽度进行自适应。
规则屏幕宽度为750rpx

例如：IPhone 6/7/8 375px 表示为 750rpx 代表1px ==> 2rpx

样式导入

@import "wxss文件的路径及名称"

app.wxss

app.wxss作为小程序的全局样式，需要写在根目录下

当某个样式利用率高，可以直接写在app.wxss中

小程序组件

<view>组件

<view>组件是视图的容器组件

关于组件的属性
1.组件属性以-进行分割
2.组件属性为布尔值时，无论书写任何值都作为true出现，只有当不存在该属性时才作为false出现，但只有当为变量时才使用true或false来表现
3.公共属性：id class style hidden data-* bind*/cathch*

<view hover-class="按下去CSS类"hover-start-time="按下去多长时间出现点击状(50ms)" //不能写单位mshover-stay-time="点击状保持的时长(400ms)" //不能写单位mshover-stop-propagation="是否阻止冒泡"//当<view>被另外的<view>包着时，发生冒泡
></view>

<image>组件

<image>组件为图片组件，支持GIF/JPG/SVG/WEBP格式的文件

<image src="图片文件URL地址"lazy-load="是否采用懒加载" //满3屏 -- 懒加载show-menu-by-longpress="是否开启长按显示识别小程序的菜单"
></image>

这里出现一个小问题，先解决一下：

[渲染层网络层错误] Failed to load local image resource /pages/image/images/sy.png
the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)

错误：没有获取到图片
解决：查看图片url地址是否出错
我的代码：<image src="data:images/sy.png"></image>
正确代码：<image src="/images/sy.png"></image> //在图片文件目录前加/表示从根目录找

简单介绍webp格式的图片：
webp格式是谷歌推荐的一种图像格式，其体积约为JPG的2/3，可以减少文件体积

如何调整image的大小？ —— 回到wxss

<swiper>组件

<swiper>组件是滑块视图组件

<swiper autoplay="是否自动播放"indicator-dots="是否显示面板的指示点"indicator-color="指示点正常显示的颜色"indicator-active-color="指示点被激活时的颜色"circular="是否采用衔接滑动"interval="停留时间(500ms)"duration="切换时的时间(500ms)"><swiper-item>...<swiper-item>...
</swiper>

<text>组件

<text> 组件是文本组件

<text decode="是否解码" user-select="文本是否可选">...</text>

user-select属性依赖于基础库版本2.12.1

解码(decode)支持HTML实体( HTMLEntity )的有：
> 、 < 、 & 、 ' 、、和

<navigator>组件

<navigator> 组件是页面链接组件

<navigator
url="当前小程序内的页面路径"
open-type="跳转方式">...
</navigator>

跳转方式有：

navigate ，默认跳转方式，可以跳转到非 tabBar 页面，存在"返回"图标
navigateBack ，作用与"返回"图标是相同的，返回上一级页面
switchTab ，可以跳转到 tabBar页面
redirect
reLaunch

可以自学分包技术：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html

<form>组件

<from>组件用于将用户输入的input、CheckBox、radio、slider、switch、picker提交
必须在表单组件内添加name属性

<from bindsubmit="submit事件处理函数" bindreset="reset事件处理函数">...
</from>

<input>组件

<input>输入框组件，为原生组件
原生组件：

手机操作系统的组件，无论其他组件设置多大的z-index都无法将其覆盖
原生组件只能使用`bindevent`方式进行事件绑定

原生组件有：

input （仅在focus时表现为原生组件，canvas，video，textarea，camera

<input type="输入框类型" placeholder="占位符内容" maxlength="最大长度" value="初始值"password="是否为密码"focus="是否自动获得焦点"bindinput="input事件处理函数"bindfocus="focus事件处理函数"bindblur="blur事件处理函数"bindconfirm="confirm事件处理函数">...
</input>

输入框的类型：

text，文本输入键盘
number，数字输入键盘
digit，带有小数点的数字输入键盘
idcard，身份证号输入键盘

<checkbox>组件

<checkbox>组件为复选框组件

<checkbox value="值" checked="是否选定" color="颜色"></checkbox>

复选框必须有value，对于同一类型的多个复选框要使用<checkbox-group>组件

<checkbox-group>组件

<checkbox-group>组件为复选框群组组件

<checkbox-group bindchange="change事件处理函数">... //包着多个<checkbox>
</checkbox-group>

<radio>组件

<radio>组件为单选框组件

<radio value="值" checked="是否选定" color="颜色"></radio>

单选框组件必须存在value值
对于同一类型的多个复选框必须使用<radio-group>组件

<radio-group>组件

<radio-group>组件是单选框群组组件

<radio-group>... //包含多个单选框组件
</radio-group>

<switch>组件

<switch>组件为开关组件

<switch checked="是否选定"color="颜色"type="类型(switch|checkbox)"bindchange="change事件处理函数">
</switch>

<picker>组件

<picker>组件为从底部弹起的滚动选择器

<pickermode="选择器类型"disabled="是否禁用"bindcancel="cancel事件处理函数">...
</picker>

选择器类型：

① seletor，普通选择器
②multiSelector，多列选择器
③time，时间选择器
④date，日期选择器
⑤region，省市区选择器

① selector

<picker mode="selector" range="选择范围(array|array object)"range-key="range为array object时,指定作为显示内容的属性"value="默认选定的索引值"bingchange="change事件处理函数">...
</picker>

数组中的数据在对应的js文件下写，然后直接在wxml文件使用{{数组名}}
实例：
selector.wxml示例代码：

<picker mode="selector" range="{{educations}}" vaule="5" //默认学历博士><text>学历：</text>
</picker>
<picker mode="selector" range="{{sex}}" range-key="label" value="2" //默认性别女><text>性别：</text>
</picker>

selector.js示例代码：

page({data:{educations:["专科","本科","研究生","硕士","博士"],sex:[{label:'男',value:1},{label:'女',value:1}]  //label是range-key显示在页面上的 value是提交的值}
})

②multiSelector

<picker mode="multiselector" range="选择范围(array|array object)"range-key="range为array object时,指定作为显示内容的属性"value="默认选定的索引值"bingchange="change事件处理函数">...
</picker>

一般小程序中最多写3列选择内容：举例有3个成员的二维数组
可以写，但是作用不大
multiSelector.wxml示例代码：

<picker mode="multiSelectot" range="{{schools}}"><text>学校：</text>
</picker>

multiSelector.js示例代码：

page({data:{school:[['北京一中','北京二中','北京三中','北京四中'],['一年级','二年级','三年级',],['1班','2班','3班','4班','5班','6班','7班','8班',]]}
})

③time

<picker mode="time" start="开始时间 如11:05"end="结束时间 如19:32"value="默认值 10:06"bingchange="change事件处理函数">...
</picker>

④date

<picker mode="date" start="开始日期 如2020-11-8"end="结束日期 如2020-12-18"value="默认日期 如2020-9-20"fields="选择器的粒度(year|month|day)" //如果写的year就只选年，month年月，day年月日bingchange="change事件处理函数">...
</picker>

⑤region

<picker mode="region" bindchange="change事件处理函数"custom-item="自定义项">...
</picker>

示例代码：

<picker mote="region"><text>送货地点:</text>
</picker>

//直接省市区选择下拉

<slider>组件

<slider>组件为滑块组件

<slider min="最大值"max="最小值"step="步长值"value="初始值"show-value="是否显示当前值"block-size="滑块尺寸(12~28)"block-color="滑块颜色"active-color="当前已选择的颜色"background-color="当前背景条的颜色"bindchange="change事件处理函数"bindchanging="changing事件处理函数">...
</slider>

<button>组件

<button>组件为按钮组件

<buttontype="类型(default|primary|warn)"size="尺寸(default|mini)"plain="是否为镂空"loading="是否显示loading图标"disabled="是否禁用"open-type="开启微信端的开放能力"form-type="用作表单组件(submit|reset)">...
</button>

微信开放能力：
contact，打开客服会话
share，触发用户转发
getPhoneNumber，获取用户手机号
getUserInfo，获取用户信息