1. view、text、image
text：
1. decode： decode可以解析的有 < > & '    （小程序中text标签不加decode属性，是不能直接解析这几个的）
2. user-select： 文本是否可选，选中后可以粘贴复制等操作
image:
url中最好使用网络图片链接
图片标签默认有宽高：320px * 240px，传入的图片如果不设置宽、高，则以默认展示
1. mode属性：用来设置图片展示模式
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 | |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 | |
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 | |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 | |
| heightFix |
缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
2. lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
<!-- 组件 --> <view>你好</view> <text decode user-select>你好 123</text>
<image src="../../asster/home/5.png" mode="" lazy-load></image>
2. swiper、swiper-item
swiper：
默认占据一行的位置
属性：
1. autoplay 自动执行轮播图
2. interval 间隔时间
3. circular 最后一个结束后衔接第一个
4. indicator-dots 是否显示指示点
5. indicator-color 和 indicator-active-color 指示点原色；选中指示点颜色
swiper-item：在swiper中使用，代表每个轮播个体
<!-- 组件 --> <swiper autoplay interval="3000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094"> <swiper-item> <image mode="aspectFill" src="//img10.360buyimg.com/pop/s590x470_jfs/t1/207771/5/709/101516/61416466Ee47625cd/e51624b5496d2bc2.jpg.webp"></image> </swiper-item> <swiper-item> <image mode="aspectFill" src="//imgcps.jd.com/ling4/100010377417/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f0/56e42f6f/cr/s/q.jpg"></image> </swiper-item> <swiper-item> <image mode="aspectFill" src="//imgcps.jd.com/ling4/19198154400/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f0/bb88a947/cr/s/q.jpg"></image> </swiper-item> </swiper>
3. 路由组件
<navigator>...</navigator>
属性：
1. target 跳转到自己的小程序页面 ：self（默认）；跳转到其它小程序页面 ：miniProgram
2. url 跳转路径：绝对路径、相对路径
3. open-type 跳转的方式
| navigate | 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 |
| redirect | 对应 wx.redirectTo 的功能 |
| switchTab | 对应 wx.switchTab 的功能 |
| reLaunch | 对应 wx.reLaunch 的功能 |
| navigateBack | 对应 wx.navigateBack 的功能 |
| exit | 退出小程序，target="miniProgram"时生效 |
4. 富文本： rich-text
待定
5. 按钮组件： button
<button>...</button>
属性：
1. size： default(默认)、 mini(小按钮)
2. type：样式
primary 绿色、 default 白色 、 warn 红色
3. plain： 是否镂空
4. loading：名称前是否带 loading 图标
5. open-type:
| 值 | 说明 | 最低版本 |
|---|---|---|
| contact | 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （小程序插件中不能使用） | 1.1.0 |
| share | 触发用户转发，使用前建议先阅读使用指引 | 1.2.0 |
| getPhoneNumber | 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 （小程序插件中不能使用） | 1.2.0 |
| getUserInfo | 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 （小程序插件中不能使用） | 1.3.0 |
| launchApp | 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明 | 1.9.5 |
| openSetting | 打开授权设置页 | 2.0.7 |
| feedback | 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 | 2.1.0 |
6. icon 图标
1. 已有的icon，使用<icon></icon>即可生成图标
icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
<icon type="success" size="50" color="#aa9400"></icon>
2. 导入微信Icon组件，需要安装该UI组件，并在开发者工具中构建npm库，之后方可导入并使用Icon组件
在 page.json 中引入组件 { "usingComponents": { "mp-icon": "weui-miniprogram/icon/icon" } }
<!--WXML示例代码--> <mp-icon type="field" icon="add" color="black" size="{{25}}"></mp-icon> <mp-icon icon="add" color="black" size="{{25}}"></mp-icon>
7. radio 单选框
// index.js const app = getApp() Page({ data: { gender: \'\' }, radioChange(e){ let gender = e.detail.value; this.setData({ gender }) } })
wxml中内容
<view> <radio-group bindchange="radioChange"> <radio value="boy" color="grey">男</radio> <radio value="girl" color="#0094ff">女</radio> </radio-group> <view>该单选，选中：{{gender}}</view> </view>
8. checkbox 多选框
// index.js const app = getApp() Page({ data: { list:[ {id:1, name: \'苹果\', value: \'apple\'}, {id:2, name: \'葡萄\', value: \'grape\'}, {id:3, name: \'香蕉\', value: \'banana\'}, ], checkedList: [] }, checkChange(e){ const checkedList = e.detail.value; this.setData({ checkedList }) } })
wxml中内容
<view> <checkbox-group bindchange="checkChange"> <checkbox wx:for="{{list}}" wx:key="id" value="{{item.value}}">{{item.name}}</checkbox> </checkbox-group> <view>喜欢的水果:{{checkedList}}</view> </view>
请发表评论