04 小程序常用组件-view text rich-text icon swiger

1.小程序常用组件

主要包含view text rich-text image navigator icon swiger radio checkbox等

1.1. view标签组件

view代替原来的html中的div标签

1.2 text标签组件

文本标签，只能嵌套text标签，且只有这个标签的文字可以复制，可以对空格回车进行编码

属性名类型默认值说明

selectable boolean false 文本是否可选单单加属性名也是可以的

decode boolean false 是否解码

示例

我爱你中国

</text>

在某些情况下，回车空格字符需要decode进行解码识别，也

就是view标签中不加decode属性会显示&nbsp；

我爱你中国

&nbsp；

123

</text>

显示为：

我爱你中国

此处显示空格，否则显示为&nbsp；

123

</text>

decode可以解析的有   < > & ' &ensp; &emsp;

1.3 image

图片标签指的是image组件，默认宽度是320rpx，高度是240rpx，但是支持懒加载：

lazd-load会自己判断，当图片出现在视口上下三屏高度之内的时候，自己才开始加载图片

其中mode有效值：13中模式其中4中是缩放模式，9种是裁剪模式：

mode 的合法值

值说明

scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变，常用

heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

top 裁剪模式，不缩放图片，只显示图片的顶部区域

bottom 裁剪模式，不缩放图片，只显示图片的底部区域，

类似以前htm里面的backgound-position

center 裁剪模式，不缩放图片，只显示图片的中间区域

left 裁剪模式，不缩放图片，只显示图片的左边区域

right 裁剪模式，不缩放图片，只显示图片的右边区域

top left 裁剪模式，不缩放图片，只显示图片的左上边区域

top right 裁剪模式，不缩放图片，只显示图片的右上边区域

bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域

bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域

1.4 swiper（轮播图组件）等比例计算swiper的高度

swiper组件使用需要配合swiper-item一起使用，

可以理解为：

外层 swiper包裹
内层 swiper-item是轮播项，swiper-item和view一样，宽是一整行，高由内容撑开

swiper默认宽度是100%，默认高度是150rpx，

而image是默认320*240

我们需要找出原图的高度和宽度来，其中1vm相当于视窗的1%

wxml文件内容：

<swiper-item><image mode="widthFix"src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/></swiper-item>

<swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/></swiper-item>

</swiper>

wxss文件内容

swiper{

100%;

height: calc(100vm*280/520);

}

轮播得属性：

1.5 navigator 导航组件，类似于超链接标签<a>,但有很大不同，比如它会换行，理解为相当于块级元素，可以直接加宽度和高度

1.6 rich-text 文本标签富文本标签可以将字符串解析对应标签，类似于vue中 v-html功能

wxml写入：

<!--rich -text 富文本标签

1. rich-text富文本标签主要通过nodes属性nodes="{{变量}}"来实现

1.1. 接受标签字符串

1.2. 接受对象数组

-->

<rich-text nodes="{{html（标签字符串）}}"> </rich-text>

<rich-text nodes="{{html2（接受对象数组）}}"> </rich-text>

js文件中写入：

data: {

html:'<div class="sc-bxivhb ALWfo" data-spm-anchor-id="a215s.7406091.0.i1.3cc36770EsZVhx"><div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://www.tmall.com/wow/z/heybox/heyboxrax/heybox?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&spm=a2141.1.iconsv5.1&scm=1007.home_icon.tmallxp.d&wh_biz=tm&disableNav=YES"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">天猫新品</p></a><a class="sc-EHOje hrPgER" href="https=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&spm=a2141.1.iconsv5.18&scm=1007.home_icon.tuhuo.d&_ariver_appid=17570832"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB11tFkr7L0gK0jSZFxXXXWHVXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">土货鲜食</p></a></div></div>',

html2:[

{name:"div",

attars:{

class:"my_div",

style:"color:red;"

children:[

{

name:'p',

attars:{},

children:[{

type:"text",

text:"hello"}

]

}

]

1.7 button标签

button标签在小程序功能变得非常强大，我们按样色样式和功能几方面进行学习：

1.7.1button标签的颜色和样式：

其中size的合法值：default 默认大小（居中显示）

mini：小尺寸（居左显示）

其中 type属性是支持颜色的 primary（银色）绿地银色字

default（白色）灰底绿字

warn（红色）灰底红字

其中 plain是指字体背景是否为镂空，相当于底色全部为白色，

边框仍然存在，边框与字体颜色一致

其中loading表示是否在名称前面出现loading转圈图标

1.7.2button标签的开放能力：

button标签的开放能力指的是：

button中open-type的contact的实现流程：

1.将小程序的appid由测试号改为自己的appid

2.登录微信小程序官网，添加客服-微信

3.为了方便颜色，准备两个账户平台用户和客户微信

wxml文件中写入：

<button open-type="contact">contact按钮</button>

<button open-type="share">share按钮</button>

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber按钮</button>

<button bindgetuserinfo="getUserInfo" open-type="getUserInfo">getUserInfo按钮</button>

<button open-type="launchApp">launchApp按钮小程序打开app</button>

<button open-type="openSetting">openSetting按钮</button>

<button open-type="feedback">feedback按钮</button>

js文件中写入：

getPhoneNumber(e){

console.log(e)

getUserInfo(e){

console.log(e)

}

1.8 icon标签字体标签，小程序已经封装好了一些字体图标供我们使用

属性类型默认值是否必填

type string 是 icon的类型，如success warn wating cancel

size number/string 23 否 icon的大小

color string 否 icon的颜色，与css一致

<!--

icon标签使用

-->

1.9 radio 单选标签

小程序中单选框有很大不同，小程序单选框选中颜色-color和小程序单选框单击事件需要radio-group结合使用。

js中写法：

data: {

gender:" "

handlechange(e){

// console.log(e)

// 1.获取单选框的值 let 代表局部变量且是惟一的，不能重新定义

let gender=e.detail.value;

// 把值赋值给date中的数据

this.setData({

gender:gender

})

1.10.checkbox 复选标签

checkbox标签与radio标签很类似，都需要color改颜色，也需要与父元素 checkbox-group组合使用

js的文件写法：

data: {

list:[{

id:0,

name:"苹果",

value:"pinguo"

{

id:1,

name:"bannane",

value:"xiangjiao"

{

id:2,

name:"yeloo",

value:"putao"

}

checkedlist:[

]

//复选框的选中事件

handleItemChange(e){

//console.log(e)

//获取复选框的值

const checkedlist=e.detail.value;

// 进行复选框赋值

this.setData({

checkedlist

})