一、基础标签(类似View):
1.<text>文本标签:
<text>文本内容</text>
2.<image>图片标签:
属性说明:
src:图片本地路径或URL
mode:缩放或裁剪模式,值:scaleToFill(拉伸填满)、aspectFit(按长边等比缩放)、aspectFill(按短边等比缩放)、widthFix(按高度等比缩放)、heightFix(按宽度等比缩放)、top(保留顶部 )、bottom(保留底部)、center(保留中间)、left(保留左侧)、right(保留右侧)、topleft(保留左上)、topright、bottomleft、bottomright
webp:支持webp格式
lazy-load:是否懒加载
show-menu-by-longpress:长按弹出分享
(1).wxml中显示图片:
<image class="样式" src="http://..." mode="aspectFit" show-menu-by-longpress="true" />
3.<icon>图标标签:
属性说明:
type:显示哪种图标,值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size:图标宽高值
color:图标颜色
(1).wxml中显示图标:
<icon type="waiting" size="40" color="#e0e0e0" />
4.<progress>进度条标签:
属性说明:
percent:进度值,0-100
show-info:进度条右侧显示xx%,值:true、false
font-size:进度条右侧百分比文字字号
border-radius:进度条两侧圆角大小
stroke-width:进度条高度
color:进度条颜色
backgroundColor:进度条背景色
active:显示从左到右动画(1次)
active-mode:动画,值:backwards(重新)、forwards(继续)
duration:进度增加1%所需毫秒数
bindactiveend:动画完成事件
(1).wxml中显示进度条:
<progress percent="10" show-info="true" border-radius="0" font-size="20" stroke-width="30" color="#b9d1a6" backgroundColor="#e0e0e0" active="true" active-mode="forwards" duration="200" />
5.<rich-text>包含html标签(支持部分):
(1).js中定义html标签字符串:
const htmlStr =
`<div>
<h1>文本1</h1>
</div>
`
Page({
data: {
htmlStr: htmlStr, //给页面中<rich-text>设值
},
...
})
(2).wxml页面使用html标签字符串:
<rich-text nodes="{
{htmlStr}}" />
二、容器标签(类似ViewGroup):
1.<view>空容器标签(类似<div>,靠样式控制布局):
(1)定义样式,例:
.样式名 {
width: 宽值rpx;
height: 高值rpx;
background-color: white;
...
}
(2)使用<view>:
<view class="样式名">
...子布局
</view>
2.<scroll-view>滚动标签(类似ScrollView):
说明:
scroll-x:true允许横向滚动,需在样式中指定宽度
scroll-y:true允许纵向滚动,需在样式中指定高度
enable-passive:true开启passive特性,优化滚动性能
使用:
<scroll-view class="样式名" scroll-y="true" scroll-x="true" enable-passive="true">
...子布局
</scroll-view>
3.<swiper>+<swiper-item>实现列表(类似ListView):
(1)初始化数据:
Page({
data: {
listData: [ ...] //listData为自定义key名
},
})
(2)定义列表与item样式:
.swiper_class { //列表样式
width: 宽度px;
height: 高度px;
...
}
.swiper_item_class { //item样式
width: 宽度px;
height: 高度px;
...
}
(3)<swiper>+<swiper-item>实现列表:
属性说明:
vertical:滑动方向是否为纵向,无此字段时不会滚动
例:
<swiper class="swiper_class" vertical="true">
<swiper-item class="swiper_item_class" wx:for="{
{listData}}" wx:for-item="item">
...item布局
</swiper-item>
</swiper>
4.<root-portal>实现对话框:
属性说明:
enable:true从页面中脱离出来
例:
<root-portal enable="true" wx:if="{
{ isShow }}">
...子布局
</root-portal>
5.<page-container>实现popup弹窗:
属性说明:
show:true显示弹窗,false隐藏弹窗
overlay:true显示遮罩层
position:弹出位置,值:top、bottom、right、center
round:true显示圆角
例:
<page-container show="true" overlay="true" position="top" round="true">
...子布局
</page-container>
三、表单标签:
1.<button>按钮标签:
size:按钮大小,值:mini为小尺寸、default为默认(大)
type:按钮样式,值:default为绿字灰背景(带框时黑字黑框)、primary为白字绿背景(带框时绿字绿框)、warn为红字灰背景(带框时红字红框)
plain:是否带框无背景
disabled:是否禁用按钮(灰色不能点击)
loading:按钮左内是否显示加载中图标
form-type:按钮在表单中类别,值:submit为提交、reset为重置表单
(1).wxml中显示按钮:
<button size="mini" type="default" plain="true" form-type="submit">按钮</button>
2.<input>输入框标签:
属性说明:
value:输入框的值
type:输入框类型,值:text(标准键盘)、number(数字键盘)、idcard(身份证键盘)、digit(带小数点数字键盘)、safe-password(密码键盘)、nickname(昵称键盘)
password:是否为密码框
placeholder:提示文字
placeholder-class:提示文字样式类
disabled:是否禁用输入
maxlength:最大长度
focus:获得焦点
confirm-type:回车键类型,值:send(发送)、search(搜索)、next(下一个)、go(前往)、done(完成)
confirm-hold:按回车键时是否隐藏键盘
adjust-position:弹出键盘时是否上推界面
(1).wxml中显示输入框:
<input type="text" value="dd" placeholder="提示文字" maxlength="10" focus="true" adjust-position="true"/>
3.<checkbox>复选框标签:
属性说明:
value:checkbox标识,选或不选时触发checkbox-group.bindchange中的函数
disabled:是否禁用
checked:是否选中
color:复选框颜色
bindchange:复选框选中事件监听方法,通过e.detail.value获取选中的<checkbox>列表
(1).wxml中显示复选框:
<checkbox-group bindchange="onCheckboxChange">
<checkbox value="checkbox_1" checked="true"></checkbox>
<checkbox value="checkbox_2" checked="false"></checkbox>
</checkbox-group>
(2).js中监听复选事件:
Page({
onCheckboxChange(e){ //复选框选中事件监听
console.log("onCheckboxChange 选择改变 selectList: " + e.detail.value);
}
})
4.<radio>单选框标签:
属性说明:
value:radio标识,选或不选时触发radio-group.bindchange中的函数
disabled:是否禁用
checked:是否选中
color:单选框颜色
bindchange:单选框选中事件监听方法,通过e.detail.value获取选中的<radio>
(1).wxml中显示单选框:
<radio-group bindchange="onRadioChange">
<radio value="radio_1" checked="true" />
<radio value="radio_2" checked="false" />
</radio-group>
(2).js中监听单选事件:
Page({
onRadioChange(e){ //单选框选中事件监听
console.log("onCheckboxChange 选择改变 selectItem: " + e.detail.value);
}
})
5.<slider>可拖动进度条标签:
属性说明:
min:进度最小值,默认0
max:进度最大值,默认100
step:进度步长,值>0且能被(max - min)整除
disabled:是否禁用
value:当前进度值
color:可拖动按钮右侧进度条颜色
activeColor:可拖动按钮左侧进度条颜色
backgroundColor:进度条背景色
block-size:滑块大小值
block-color:滑块颜色
show-value:进度条右侧是否显示进度值
bindchange:进度条监听方法,通过e.detail.value获取进度值
(1).wxml中显示可拖动进度条:
<slider bindchange="onSliderChange" color="#CC6600" activeColor="#CC66FF" block-size="15" block-color="#7FFF00"/>
(2).js中监听进度条拖动:
Page({
onSliderChange(e){ //进度条拖动事件监听
console.log("onSliderChange 进度条拖动 progress: " + e.detail.value);
}
})
6.<switch>开关标签:
属性说明:
checked:是否选中
disabled:是否禁用
type:样式,值:switch(左右开关样式)、checkbox(复选框样式)
color:开关的颜色
bindchange:开关事件监听方法,通过e.detail.value获取开关状态
(1).wxml中显示开关按钮:
<switch checked="true" type="switch" bindchange="onSwitchChange" />
(2).js中监听开关事件:
Page({
onSwitchChange(e){ //开关事件监听
console.log("onSwitchChange 开关事件 isOpen: " + e.detail.value);
}
})
7.<form>表单标签:
属性说明:
bindsubmit:提交表单时触发的函数,表单内的<button>标签formType="submit",取表单各项值:e.detail.value.标签name属性值
bindreset:重置表单时触发的函数,表单内的<button>标签formType="reset"
(1).wxml中显示表单:
<form bindsubmit="onFormSubmit">
<input name="input_name" type="text" value="" />
<button size="mini" type="default" plain="true" form-type="reset">重置</button>
<button size="mini" type="default" plain="true" form-type="submit">提交</button>
</form>
(2).js中监听表单提交事件:
Page({
onFormSubmit(e){ //表单提交事件监听
console.log("onSwitchChange 表单提交事件 input_name: " + e.detail.value.input_name);
}
})
四、<canvas>自定义绘图标签:
属性说明:
canvas-id:唯一标识符
type:canvas类型,值:2d、webgl
disable-scroll:当在canvas中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
bindtouchstart:按下时触发的方法
bindtouchmove:移动时触发的方法
bindtouchend:移动结束时触发的方法
bindtouchcancel:触控被打断时触发的方法
bindlongtap:长按500ms后触发的方法
binderror:发生错误时触发的方法
1. .wxml中显示自定义绘图:
<canvas type="2d" id="canvas_id" style="width: 300px; height: 300px;" />
2. .js中实现绘图逻辑:
(1)Canvas 2D方式绘制:
Page({
onLoad: function (e) {
const query = wx.createSelectorQuery()
query.select('#canvas_id_1')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
//0.设置画布宽度+高度
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr //设置画布宽度
canvas.height = res[0].height * dpr //设置画布高度
console.log("dpr : " + dpr)
ctx.scale(dpr, dpr)
//1.设置画笔属性
ctx.strokeStyle = "blue" //画笔颜色
ctx.lineWidth = 1 //线粗细度
//2.绘图
ctx.rect(0, 0, 20, 20) //画矩形,参数分别为左上角x坐标、左上角y坐标、宽、高
ctx.moveTo(20, 40) //移动画笔坐标位置
ctx.arc(10, 40, 10, 0, 2 * Math.PI, true) //画圆,参数分别为起始点x坐标、起始点y坐标、半径、开始角度、结束角度
ctx.moveTo(20, 60) //移动画笔坐标位置
ctx.arc(10, 60, 10, 0, Math.PI, false) //画圆环
ctx.stroke()
ctx.draw()
})
},
...
})
(2)WebGL方式绘制:
Page({
onLoad: function () {
const query = wx.createSelectorQuery()
query.select('#canvas_id').node().exec((res) => {
const canvas = res[0].node
const gl = canvas.getContext('webgl')
... //绘图
})
}
})
五、TDesign组件环境配置/引入/使用:
1.环境配置:
(1)初始化(打开cmd,cd到小程序工程根目录),执行以下命令(在每一步提示中输入内容或一直回车,最后一步输入yes):
npm init
(2)使用NPM安装第三方包(打开cmd,cd到小程序工程根目录):
npm i tdesign-miniprogram -S --production
(3)打开微信开发者工具,点击"工具"菜单,点击"构建 npm",进行构建。
(4)将工程/app.json中的"style": "v2" 移除。
2.使用TDesign组件:
官方文档:
(1)引入组件,在工程/app.json中(或使用此组件的页面.json中):
{
...,
"usingComponents": { //引入TDesign组件
"t-button": "tdesign-miniprogram/button/button", //此为按钮组件
"t-imagen": "tdesign-miniprogram/image/image", //此为图片显示组件
... //省略更多组件
}
}
(2).wxml中使用组件(例图片显示):
<t-image src="{
{图片地址}}" mode="heightFix" width="20" height="20" />