微信小程序（三）常见组件
常见组件
view
相当于web里的div标签
text
1.文本标签
2.只能嵌套text
3.长按文字可以复制（只有该标签有这个功能）
4.可以对空格( )回车进行编码
<text selectable="{{false}}" decode="{{false}}">
普 通
text>
img
|默认宽度320px、⾼度240px
|支持懒加载（ 延时加载，即当对象需要用到的时候再去加载 ，当图片出现在视口上下三屏之内时 => 开始加载）
|mode有13种模式：4种缩放模式，9种裁剪模式
aspectFit：常用于轮播图
swiper
|微信内置轮播图组件，滑块视图容器（最外部）
|默认样式：width：100% height：150px => 无法实现由内容撑开
|等比例计算swiper的高度（适应屏幕）：swiper高度 = swiper宽度*原图高度/原图宽度 然后图片的mode属性选择widthFix
| swiper-item：每一个轮播项，默认宽度和⾼度都是100%
|其他属性
navigator
导航组件 类似超链接标签 => 块级元素 可以换行
|target：self跳转自身小程序；miniProgram跳转其他小程序
|open-type的有效值
rich-text
|富文本标签，可以将字符串解析成对应标签，类似vue中v-html 功能
| nodes属性支持 字符串和标签节点数组
|文本标签type = text
|特别注意：
1.nodes不推荐使用string类型，性能会下降
2.rich-text组件内屏蔽所有节点的事件
3.attrs不支持id，支持class
4.name对大小写不敏感
5.如果使用的不受信任的html的节点，该节点的所有子节点将会被移除
6.img标签仅支持网络图片
<rich-text nodes="{{nodes}}" bindtap="tap">rich-text>
// 1 标签字符串 => 常用
page({
data:{
nodes:'
'
}
})
//2.节点数组
Page({
data: {
nodes: [{
//通过name名来指定标签
name: 'div',
//标签上的属性
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;' },
//子节点 children要接收的数据类型和 node第二种渲染方式数据类型一致
children: [
{
name："p",
attrs:{},
//放文本
children:[
type: 'text',
text: 'Hello World!'
]
}
]
}]
},
tap() {
console.log('tap')
}
})
button
外观样式
|小程序给我们提供的一些样式
|size：default=>默认大小；mini=>小尺寸
|type：primary=>绿色；default=>灰色；warm=>红色
|form-type：submit=>提交表单；reset=>重置表单
开放能力 open-type
open-type的合法值：
|share：转发给其他朋友（不能分享到朋友圈）
|getPhoneNumber：不是企业的小程序没有权限，获取到的信息也已经加密，需要后台服务器进行解析再返回
|getUserInfo：可以直接获取信息，没有加密
|contact的实现流程
1.将小程序的 appid 由测试号改为自己的appid
2.登录微信小程序官网，添加客服 - 微信
3.点击按钮即可与客服联系
icon
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'],
iconColor: ['red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple' ],
}
})
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
block>
view>
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40"/>
block>
view>
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}"/>
block>
view>
上述代码的效果图：
radio单选框
|必须要和父元素radio-group一起使用
|value 选中单选框的值
|可以通过 color属性来修改选中后的颜色
<radio-group>
男radio>
女radio>
radio-group>
checkbox复选框
使用方法同单选框，必须要和父元素checkbox-group一起使用
<view>
<checkbox-group bindChange="itemchange">
{{item.name}}
checkbox>
checkbox-group>
<view>
选中的水果：{{checkedList}}
view>
view>
Page({
data:{
list:[
{
id:0,
name:"苹果",
value:"apple"
},
{
id:1,
name:"葡萄",
value:"grape"
},
{
id:3,
name:"香蕉",
value:"banana"
},
],
checkedList:[]
},
itemChange:function(e){
var checkList = e.detail.value;
this.setData({
checkedList:checkList
})
}
})
name:"香蕉",
value:"banana"
},
],
checkedList:[]
},
itemChange:function(e){
var checkList = e.detail.value;
this.setData({
checkedList:checkList
})
}