微信小程序(五)-常见组件(标签)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

常见组件(标签)

https://developers.weixin.qq.com/miniprogram/dev/component/

1.view 代替以前的div标签

2.text

1.文本标签,类似span标签

2.只能㠌套自已text

3.长按文字可以复制(只有该标签有这个功能) <text selectable>加了就可以复制了<text/>

4.可以对空格回车进行编码<text decode>加了空格就可以显示了<text/>,decode可以解析的有   < > & ' &ensp; &emsp;

属性	类型	默认值	必填	说明	最低版本
selectable	boolean	false	否	文本是否可选 (已废弃)	1.1.0
user-select	boolean	false	否	文本是否可选，该属性会使文本节点显示为 inline-block	2.12.1
space	string		否	显示连续空格	1.4.0
decode	boolean	false	否	是否解码	1.4.0

3.image

图片图床:就是一个在网络上存储图片的地方

路过图床:https://imgchr.com/

SM.MS图床:https://sm.ms/

如果打算长期稳定使用请优先选择七牛云或者又拍云（存储在国内都需要有已备案域名），其次推荐的就是路过图床和SM.MS图床.

1.src 图片用外网地址

2.图片大小默认宽320px*高240px

3.mode 图片裁剪、缩放的模式,决定图片内容和图片标签宽高做适配

4.lazy-load 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

<image mode="heightFix" src="https://s3.ax1x.com/2021/01/12/sJ64Wd.jpg"/>

4.轮播图

1.swiper 轮播图的外层容器

1.默认宽width100% 高height=150px

2.无法实现由图片内容撑开,需换算图片的高度

3.autoplay 自动轮播

4.interval="1000" 轮播间隔时间

5.circular 轮播衔接滑动

6.indicator-dots 是否显示面板指示点(索引器/分页器/指示器)

7.indicator-active-color="red" 显示指圆点选中的颜色

8.indicator-color="#0094ff" 显示指圆点未选的颜色

2.swiper-item 轮播图的轮播项

wxml

5.navigator

1.导航标签相当于a标签

2.url 跳转路径(相对路径或绝对路径)

3.open-type="switchTab" 跳转方式

open-type 的合法值

值	说明	最低版本
navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能,默认值,保留当前页面(有返回按钮),跳转到应用内的某个页面,不能跳到 tabbar 页面
redirect	对应 wx.redirectTo 的功能,关闭当前页面(无返回按钮),跳转到应用内的某个页面,不能跳到 tabbar 页面
switchTab	对应 wx.switchTab 的功能,跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	对应 wx.reLaunch 的功能,关闭所有页面，打开到应用内的某个页面,随便哪个页面都可跳(包括tabBar )	1.1.0
navigateBack	对应 wx.navigateBack 的功能,关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。	1.1.0
exit	退出小程序，`target="miniProgram"`时生效	2.1.0

6.rich-text

1.富文本标签,相当于vue中的v-html

2.nodes属性来实现

1.接收标签字符串(常用)<rich-text nodes="<h1>小区平台<h1>"></rich-text>

2.接收对象数组

7.button

1.按钮标签外观属性size type

2.开发能力属性 open-type

1.contact 客户开发流程

1.要将测试号appid改为自已的appid

2.去官网注册获取自已的appid(如果微信绑字用了自已的邮箱,可以先到微信设置/账号与安全/更多安全设置/邮件地址下解除绑定)

3.登录进入开发/开发管理/开发设置/复制开发者appID

4.修改微信小程序开发编辑器中的appid (这个要保密)

5.在小程序后台的功能找到客服===>添加一个客户的微信号(自已用的就可以了)

2.share 转发

3.getPhoneNumber 获取用户手机号

4.getUserInfo 获取用户信息

5.feedback 打开“意见反馈”页面

8.icon

1.字体图标

2.属性

属性	类型	默认值	必填	说明	最低版本
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小	1.0.0
color	string		否	icon的颜色，同css的color	1.0.0

9.单选框标签使用

1.radio 单选框

2.radio-group 单项选择器

3.两个标签配合使用

4.案例: 单选框男和女

1.radio标签与父元素单项选择器radio-group来使用

2.value选中的单选框的值

3.给单项选择器radio-group绑定change事件(关键字: bindchange="事件名称")

4.需要在页面中显不选中的值

5.代码:

<radio-group bindchange="handlechange">
<radio color="red" value="m">男</radio>
<radio value="f">女</radio>
</radio-group>
<view>显示选中的值:{{gender}}</view>

wxml

Page({ /**
* 页面的初始数据
*/
data: {
gender:""
},
handlechange(e){
// 1.获取单选框中的值
let gender=e.detail.value
// 2.把值赋给data中的gender
this.setData({
gender
})
}
})

10.单选框标签使用

1.checkbox 多选框

2.checkbox-group 多项选择器

3.两个标签配合使用

4.案例代码:

<view>
<checkbox-group bindchange="handitemchange">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
</view>
<view>选中的值:{{checkedlist}}</view>

wxml

Page({
data: {
list:[
{
id:0,
name:"苹课",
value:"apple"
},
{
id:1,
name:"香蕉",
value:"bananer"
},
{
id:2,
name:"葡萄",
value:"grage"
}
],
// 3.定义一个数组存放选中的值
checkedlist:[]
},
// 多选柜的选中事件
handitemchange(e){
// 1.获取选中的值
const checkedlist=e.detail.value
// 2.进行赋值
this.setData({
checkedlist
})
}
})