一、wxml文本介绍
此处只列举了一些常用的标签
具体可查阅 微信小程序开放文档
1、<text>
text
相当于 web 的 span
标签 行内元素 不会换行
小程序 只有 text
能长按复制
<!--
1 长按文字复制 selectable
2 对文本内容进行解码 decode
-->
<text selectable decode> demo <</text>
2、<view>
view
相当于web的 div
标签 块级元素 会换行
<view>1</view>
<view>2</view>
3、<checkbox>
checkbox
相当于 web 的 复选框
<checkbox checked="{{isGirl}}">自定义属性</checkbox>
4、<block>
block
:1. 占位符的标签
2. 写代码的时候,可以看淡这标签存在
3. 页面渲染 小程序会把它移除
<view>
<block class="my_list" wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="*this">
索引: {{index}}
--
值:{{item.name}}
</block>
</view>
5、<image>
1、src : 图片路径
2、默认大小是:320 * 240
3、mode 决定图片内容的适配模式
常用 : 3.1、aspectFill 保持宽高比,确保图片长边显示出来
3.2、widthFix web的常用模式,指定宽,高自动适配
4、lazy-load
:图片懒加载,在即将进入一定范围(上下三屏)时才开始加载
<!--
image 图片标签
1 src 图片路径
-->
<image mode="widthFix" src="https://timgsa.baidu.com/6.jpg"> </image>
6、<swiper> / <swiper-item>
1、 轮播图外层容器 swiper
2、 每一个轮播项 swiper-item
3、 默认样式:
width:100%
height: 150px
4、 autoplay 自动轮播
5、 interval 修改轮播时间
6、 circular 衔接轮播
7、 indicator-dots 显示小圆点
8、 indicator-color 未选择颜色
9、 indicator-active-color 选中颜色
<swiper autoplay interval="1000" circular indicator-dots>
<swiper-item >
<image mode="aspectFill" src="//gw.alicdn.com/imgextra/i1/1198001/O1CN01PADsTZ28yVVzly8Tp_!!1198001-0-lubanu.jpg" />
</swiper-item>
<swiper-item >
<image mode="aspectFill" src="//gw.alicdn.com/imgextra/i4/176/O1CN01mKi1tW1DAeIeexZYu_!!176-0-lubanu.jpg" />
</swiper-item>
<swiper-item >
<image mode="aspectFill" src="//gw.alicdn.com/imgextra/i4/65/O1CN01a4I91Y1CLoL0Gh8nC_!!65-0-lubanu.jpg" />
</swiper-item>
</swiper>
7、<navigator>
导航组件
1、块级元素,默认换行
2、url 调整的页面路径 绝对/相对 路径
3、target 要跳转当前的小程序,还是其他的小程序
3.1、self:默认值,自己
3.2、minProgram 其他的小程序页面
4、open-type 跳转的方式
4.1、navigate 默认值 保留当前页面,跳转到其他页面,不能跳到tabbar页面
4.2、redirect 关闭当前页面,跳转到其他页面,不能跳到tabbar页面
4.3、switchTab 跳转到tabbar页面, 并关闭其他所有非 tabbar 页面
4.4、reLaunch 关闭所有页面, 打开到应用内的某个页面
4.5、navigateBack 返回上一个页面
4.6、exit 退出小程序
<navigator url="../demo07/demo07">轮播图页面</navigator>
<navigator url="../demo07/demo07" open-type="redirect">轮播图页面</navigator>
<navigator url="../index/index" open-type="switchTab">轮播图页面</navigator>
<navigator url="../index/index" open-type="reLaunch">轮播图页面</navigator>
8、<rich-text>
rich-text 富文本标签
1 nodes 属性来实现
1.1、接收标签字符串
1.2、接收对象数组
<rich-text nodes="{{html}}"></rich-text>
data: {
// 1 标签字符串 (最常用)
// html: '<div>adad</div>'
// 2 对象数组
html: [
{
// name: 决定标签
name: 'div',
// attrs 标签上的属性
attrs: {
class: 'mydiv',
style: 'color:red'
},
// children: 子节点
children: [
{
name: 'p',
attrs: {},
children: [
{type: 'text',
text: 'hello'}
]
}
]
}
]
}
9、<button>
样式:
1、size:大小 (mini、default)
2、type:颜色(default:灰色, primary:绿色, warn:红色)
3、plain:是否镂空、背景色
4、loading:显示加载中
<button>默认按钮</button>
<button size="mini">默认按钮</button>
<button type="primary" loading="{{true}}">默认按钮</button>
<button type="warn" plain="{{true}}">默认按钮</button>
行为:
1、contact 打开客服会话,如果⽤⼾在会话中点击消息卡⽚后返回⼩程序,可以从 bindcontact回调中获得具体信息,
2、share 转发当前的小程序 不能分享到朋友圈
3、getPhoneNumber 获取⽤⼾⼿机号,可以从bindgetphonenumber回调中获取到⽤⼾信息,需要解密
1 绑定一个事件bindgetphonenumber
2 在事件的回调函数中,通过参数来获取信息
3 获取到的信息已加密
4、getUserInfo 获取⽤⼾信息,可以从bindgetuserinfo回调中获取到⽤⼾信息
1 类似手机号码
5、launchApp 打开APP,可以通过app-parameter属性设定向APP传的参数具体说明
6、openSetting 打开授权设置⻚
1 只会出现用户点击过的权限
7、feedback 打开“意⻅反馈”⻚⾯,⽤⼾可提交反馈内容并上传⽇志,开发者可以登 录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>
// 获取用户的手机号码信息
getPhoneNumber(e) {
console.log(e)
},
// 获取用户信息
getUserInfo(e) {
console.log(e)
}
10、<radio>
radio 单选框
1、必须 radio 和父元素 radio-group配合
2、value 选中的值
3、 给radio-group 绑定change事件
4、color:选中的颜色显示
<radio-group bindchange="handleChange">
<radio value="male">男</radio>
<radio value="female" color="red">女</radio>
</radio-group>
<view>{{gender}}</view>
data: {
gender: ''
},
// 值改变事件
handleChange(e) {
const gender = e.detail.value;
this.setData({
gender
})
}
11、<checkbox>
复选框,具体用法类似单选框
<checkbox-group bindchange="handleItemChange">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
{{item.name}}
</checkbox>
</checkbox-group>
<view wx:for="{{checkValue}}" wx:key="item">
{{item}}
</view>
data: {
// gender: ''
list: [
{ id: 0,name: '苹果',value: 'apple'},
{ id: 1,name: '香蕉',value: 'banana'},
{ id: 2,name: '葡萄',value: 'grape'}
],
checkValue: []
},
// 复选框值改变事件
handleItemChange(e) {
const value = e.detail.value;
this.setData({
checkValue: value
})
}