<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<view>
<button type="default">默认</button>
<button type="primary">确定</button>
<button type="warn">警告</button>
</view>
<view>
<button type="primary" size="mini">打印</button>
<button type="warn" size="mini">删除</button>
</view>
<view>
<button type="primary" plain="true">镂空</button>
</view>
<view>
<button type="primary" loading="true">加载中</button>
</view>
<view>
<button open-type="chooseAvatar">获取头像</button>
</view>
data: {
"avatarUrl":"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
},
onChooseavatar(e){
let {avatarUrl}=e.detail;
this.setData({avatarUrl});
},
| | 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|
| |
src |
string |
|
否 |
图片资源地址 |
1.0.0 |
| |
mode |
string |
scaleToFill |
否 |
图片裁剪、缩放的模式 |
1.0.0 |
| |
| 合法值 | 说明 | 最低版本 |
|---|
| scaleToFill |
缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
|
| aspectFit |
缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
|
| aspectFill |
缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
|
| widthFix |
缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
|
| heightFix |
缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
2.10.3 |
| top |
裁剪模式，不缩放图片，只显示图片的顶部区域 |
|
| bottom |
裁剪模式，不缩放图片，只显示图片的底部区域 |
|
| center |
裁剪模式，不缩放图片，只显示图片的中间区域 |
|
| left |
裁剪模式，不缩放图片，只显示图片的左边区域 |
|
| right |
裁剪模式，不缩放图片，只显示图片的右边区域 |
|
| top left |
裁剪模式，不缩放图片，只显示图片的左上边区域 |
|
| top right |
裁剪模式，不缩放图片，只显示图片的右上边区域 |
|
| bottom left |
裁剪模式，不缩放图片，只显示图片的左下边区域 |
|
| bottom right |
裁剪模式，不缩放图片，只显示图片的右下边区域 |
|
|
| |
webp |
boolean |
false |
否 |
默认不解析 webP 格式，只支持网络资源 |
2.9.0 |
| |
lazy-load |
boolean |
false |
否 |
图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 |
1.5.0 |
| |
show-menu-by-longpress |
boolean |
false |
否 |
长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。 |
2.7.0 |
| |
binderror |
eventhandle |
|
否 |
当错误发生时触发，event.detail = {errMsg} |
1.0.0 |
| |
bindload |
eventhandle |
|
否 |
当图片载入完毕时触发，event.detail = {height, width} |
1.0.0 |
<image src="/images/rocket_top.png" mode="aspectFit" style="border: 1px red solid;"/>
更多标签见官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
<view>
<image src="/images/haha.jpg" mode="heightFix" show-menu-by-longpress="true"></image>
</view>
<view style="height: 2000px; background: red;">
</view>
<view>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" lazy-load="true"></image>
</view>
结果
2.8、input
输入框
更多：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
<form>
<view>
<label for="txtId">帐号：</label>
<input id="txtId" value="{{userId}}" bindinput="inputHandle" placeholder="请输入帐号" auto-focus="true"/>
</view>
<view>
<label for="txtPhone">电话：</label>
<input id="txtPhone" type="number"/>
</view>
<view>
<label for="txtPassword">密码：</label>
<input id="txtPassword" password="true"/>
</view>
<view>
{{userId}}
</view>
</form>
const page={
data:{
userId:""
},
inputHandle(e){
console.log(e.detail.value,e.detail.cursor,e.detail.keyCode);
this.setData({userId:e.detail.value})
//当用户输入2个11时自动变成1个2
return this.data.userId.replace(/11/igm,'2');
}
};
Page(page)
2.9、checkbox，checkbox-group
多选项目。
更多：https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
<form bindsubmit="submitHandle">
<view>
<checkbox-group bindchange="checkboxChange">
爱好：
<label>
<checkbox value="阅读" name="hobby" checked="true" color="orange"/>阅读
</label>
<label>
<checkbox value="健身" name="hobby"/>健身
</label>
<label>
<checkbox value="电影" name="hobby"/>电影
</label>
<label>
<checkbox value="其它" name="hobby" disabled/>
</label>
</checkbox-group>
</view>
<view>
<button form-type="submit" type="primary">提交</button>
</view>
</form>
const page={
submitHandle(e){
console.log(e.detail);
},
checkboxChange(e){
console.log(e.detail);
}
};
Page(page)
2.10、radio,radio-group
单选项目
更多：https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
<radio-group bindchange="radioChange">
性别：
<label>
<radio value="男" checked="true"></radio>男
</label>
<label>
<radio value="女"></radio>女
</label>
</radio-group>
const page={
radioChange(e){
console.log(e.detail.value);
}
};
Page(page)
2.11、slider
滑动选择器
<view>
<slider bindchange="sliderChange1" show-value="true" max="200" min="100" step="5"/>
</view>
<view>
<slider bindchange="sliderChange2" bindchanging="changingHandle" show-value="true"/>
</view>
<view>
<slider bindchange="sliderChange3" show-value="true"/>
</view>
<view>
<slider bindchange="sliderChange4" show-value="true"/>
</view>
const page={
};
/*解决方法1 */
// for(var i=1;i<5;i++){
// (function(n){
// page[`sliderChange${n}`]=function(e){
// console.log(`第${n}个滑块，当前值：${e.detail.value}`);
// }
// })(i);
// }
/*解决方法2 */
for(let i=1;i<5;i++){
page[`sliderChange${i}`]=function(e){
console.log(`第${i}个滑块，当前值：${e.detail.value}`);
}
}
page.changingHandle=function(e){
console.log(e.detail.value);
}
Page(page)
2.12、form
表单
表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
<form bindsubmit="submitHandle" bindreset="resetHandle">
<view>
<label for="txtId">帐号：</label>
<input name="userId" id="txtId" value="{{userId}}" bindinput="inputHandle" placeholder="请输入帐号" auto-focus="true"/>
</view>
<view>
<label for="txtPhone">电话：</label>
<input name="userPhone" id="txtPhone" type="number"/>
</view>
<view>
<label for="txtPassword">密码：</label>
<input name="userPwd" id="txtPassword" password="true"/>
</view>
<view>
<button type="primary" form-type="submit" size="mini">提交</button>
<button type="warn" form-type="reset" size="mini">重置</button>
</view>
<view>
{{userId}}
</view>
</form>
const page={
data:{
userId:""
},
inputHandle(e){
console.log(e.detail.value,e.detail.cursor,e.detail.keyCode);
this.setData({userId:e.detail.value})
//当用户输入2个11时自动变成1个2
return this.data.userId.replace(/11/igm,'2');
},
submitHandle(e){
console.log(e);
},
resetHandle(e){
console.log(e);
}
};
Page(page)
三、WXML
3.1、整体介绍
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
用以下一些简单的例子来看看 WXML 具有什么能力：
3.1.1、数据绑定
3.1.2、列表渲染
3.1.3、条件渲染
3.1.4、模板
示例：
<template name="staff">
<view>
<view>员工名片</view>
<view>姓名：{{firstname}} {{lastname}} </view>
</view>
</template>
<template is="staff" data="{{...staffA}}" ></template>
<template is="staff" data="{{...staffB}}" ></template>
<template is="staff" data="{{...staffC}}" ></template>
const page={
data:{
staffA:{firstname:"jack",lastname:"ma"},
staffB:{firstname:"rose",lastname:"li"},
staffC:{firstname:"mark",lastname:"liu"},
},
};
Page(page)
结果：
3.2、数据绑定
WXML 中的动态数据均来自对应 Page 的 data。
3.2.1、简单绑定
数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：
内容
组件属性(需要在双引号之内)
控制属性(需要在双引号之内)
关键字(需要在双引号之内)
true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。
特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。
3.2.2、运算
可以在 {{}} 内进行简单的运算，支持的有如下几种方式：
三元运算
算数运算
view中的内容为 3 + 3 + d。
逻辑判断
字符串运算
数据路径运算
3.2.3、组合
也可以在 Mustache 内直接进行组合，构成新的对象或者数组。
数组
最终组合成数组[0, 1, 2, 3, 4]。
对象
最终组合成的对象是 {for: 1, bar: 2}
也可以用扩展运算符 ... 来将一个对象展开
最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。
如果对象的 key 和 value 相同，也可以间接地表达。
最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}。
注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如：
最终组合成的对象是 {a: 5, b: 3, c: 6}。
注意： 花括号和引号之间如果有空格，将最终被解析成为字符串
等同于
3.3、列表渲染
3.3.1、wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：
wx:for 也可以嵌套，下边是一个九九乘法表
3.3.2、block wx:for
类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如：
3.3.3、wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
- 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
- 保留关键字
*this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
3.3.4、示例代码
在开发者工具中预览效果
发表于 2023-4-19 16:19:00
