小程序开发常用标签及用法第二篇
### image标签与HTML中`img`一样，用来引入图片的。
但是在小程序中需要注意，图片尽量不要放在项目中，因为在最后上传项目时大小不能超过`8MB`。
**解决方法**：
① 无成本方式：将项目中的图片放到图床中。这个图床可以是你的QQ空间，或微博等可以发布图片的地方，然后将图片的地址复制下来，引入到你的小程序中。
② 小成本方式：存放到你的小型服务器中，这个需要一定成本。当然你可以租一个云空间来存放图片，可以节省更多的成本。
小程序中`image`标签可以设置`model`属性，可以定义图片在你的小程序中以什么方式呈现给用户。
| mode属性 | 描述 |
| ------------- | ------------------------------------------------ |
| `scaleToFill` | 默认值，不保持比例缩放，使图片完全拉伸至填满容器 |
| `aspectFit` | 保持宽高比，确保图片的**长**边显示出来 |
| `aspectFill`| 保持快高比，确保图片的**短**边显示出来 |
| `widthFix` | 保持快高比，宽度不变，高度会自动变化 |
还有一个很关键的属性：
| 属性 | 描述 |
| ----------- | -------------------------------------------------------- |
| `lazy-load` | 懒加载，当图片出现在视口上下三屏的高度时就会自己加载图片 |
### navigator 标签
导航组件。与HTML中的`a标签`作用相似。不过它是块级元素，会独占一行。
官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
常用的一些属性：
| 常用属性 | 描述 |
| ----------- | ------------------------------------------------------------ |
| `url` | 要跳转的页面路径，相对和绝对路径都行，不需要文件后缀 |
| `target` | 指定跳转到哪个小程序。`self`，默认值，指当前小程序。`miniProgram`，其他的小程序的页面 |
| `open-type` | 指定跳转方式，值比较多，另外列一个表格。 |
| open-type合法值 | 描述 |
| --------------- | ------------------------------------------------------------ |
| `navigate` | 保留当前页面，跳转到当前小程序的其他页面，不能跳转到 `tabbar` 页面 |
| `redirect` | 关闭当前页面，其他介绍同上。即没有返回按钮 |
| `switchTab` | 跳转到`tabbar`页面，并关闭其他非`tabbar`页面 |
| `reLaunch` | 关闭所有页面，打开到应用内的某个页面，可以随便跳 |
| `navigateBack`| 返回上一个页面 |
| `exit` | 退出小程序，`target="target"`时生效 |
其他的属性请移步官方文档。
### button标签
与HTML相同，同样是按钮。但是小程序中按钮内置的功能比较强大，且无可替代。
官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
属性列表：
| 属性 | 描述 |
| --------- | ------------------------------------------------- |
| size | 指定按钮的大小。default，默认。mini，小尺寸。 |
| type | 指定按钮的颜色。默认灰色，primary绿色，warn红色。 |
| plain | 指定按钮是否镂空，背景色透明 |
| loading | 在按钮前面带一个等待样式 |
| open-type | 开放能力，能力很多，看下图。 |
代码示例：
```html
<button size="mini" open-type="contact">打开客服窗口</button>
```
注意：在开发工具中无法模拟打开客服窗口，需要在手机端模拟。
### rich-text标签
富文本标签。可以将HTML代码转换为小程序代码显示。
支持的HTML标签：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
该标签通过`nodes`属性将HTML代码转为小程序页面显示。
**如**：
```html
<rich-text nodes="<div>这是html代码</div>"></rich-text>
```
`nodes`的值可以是数组也可以是字符串，当值为数组时需要在`js`文件`data`中定义，由于之前没有写到js文件，所以这里数组形式后面在写js文件时再举例说明。
### icon标签
用于显示小程序内置的图标，如成功、提示、警告等图标。
图标显示的类型使用`type`属性指定，`size`属性指定图标的大小，`color`属性指定图标的颜色。
图标类型的有效值：
| 类型 | 描述 |
| ------------------ | ------------------- |
| `success` | 成功 |
| `info` | 提示 |
| `warn` | 警告 |
| `waiting` | 等待 |
| `success_no_circl` | 多选空间图标_已选择 |
| `circle` | 多选控件图标_未选择 |
| `download` | 下载 |
| `cancel` | 叉号 |
| `search` | 放大镜 |
如：
```html
<icon class="icon-box-img" type="success" size="93"></icon>
```
### switch标签
开关选择器，是一个小开关。
常用的属性：
`checked`属性来控制它是否被选中，Boolean类型的值。
`disbled`属性来控制它是否被禁用。
`type`属性来控制它的类型，有效值：`switch`, `checkbox`。
`color`属性来控制它被选中时的颜色，默认为绿色。
`bindchange`属性指定`checked`状态改变时触发的事件。
如：
```html
<switch checked="true" bindchange="switchChange"/>
```
其中`switchChange`为触发的事件，该事件在js文件中定义。
### progress标签
进度条标签。通过属性来指定和更新当前进度百分比。
**常用属性**：
`percent`属性指定当前进度条百分比进度，值为`1-100`。
`show-info`属性指定是否在右侧显示百分比，值为Boolean类型。
`border-radius`属性指定进度条的四角圆滑程度。
`font-size`属性指定右侧字体的大小。
`stroke-width`属性指定进度条的宽度。
`activeColor`指定已加载部分进度条的颜色。
`backgroundColor`属性指定未加载部分进度条的颜色。
更多属性：https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
**如**：
```html
<progress percent="20" show-info stroke-width="3"/>
``` 谢谢分享，， 谢谢分享啊 最近打算学这个 从入门到进阶，知识点全覆盖 加油！谢谢分享笔记{:1_919:}
页:
[1]