1、weui框架
优势:
- 不需要占体积
- 同微信客户端一致的视觉效果
- 性能比其他框架会好一点
weui框架的引用:
在app.json里面添加
"useExtendedLib": {
"weui": true
},
在需要使用的页面的json上添加,例如:
{
"usingComponents": {
"mp-dialog": "weui-miniprogram/dialog/dialog",
}
}
2、icon默认图标
使用weui的框架里的图标,不需要导入图标图片,直接用代码就好。
效果图
在需要使用的页面的json上添加:
{
"usingComponents": {
"mp-icon": "weui-miniprogram/icon/icon"
}
}
<mp-icon type="field" icon="add" color="black" size="{{25}}"></mp-icon>
若要使用其他的图标,可以查看:
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/icon.html
3、Cells文字标题箭头
效果图:
.json代码:
{
"usingComponents": {
"mp-cells": "weui-miniprogram/cells/cells",
"mp-cell": "weui-miniprogram/cell/cell",
}
}
.xml代码:
//link表示带箭头
<mp-cells ext-class="my-cells" title="带说明的列表项">
<mp-cell value="标题文字" footer="说明文字" link></mp-cell>
</mp-cells>
第二种效果图:
<mp-cell footer="说明文字" link>
<view style="display: inline-block; vertical-align: middle">单行列表</view>
<mp-badge style="margin-left: 5px;" content="New" />
</mp-cell>