小程序开发常用标签及用法（第一篇）

二饭发表于 2020-12-20 00:22

### text标签

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

① 类似于`html`中`span`标签，但它的属性在小程序中让它地位显著提高。

② 在微信小程序中只有这个标签有`长按文字可以复制`的功能，不使用这个标签则无法进行小程序中文字复制的功能。

③ 可以对空格、回车进行编码。如果不加`decode`属性，则无法对`&nbsp`等之类的字符进行解码。

```html
<text decode='true'>可以对这里的字符进行解码</text>
```

### view标签

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

① 相当于div标签，这个没有什么需要详细注意的，使用基本与`div`无异。

② 与它类似的一个标签`<scroll-view>`需要关注一下。该标签可以声明一个可滚动视图区域。

### scroll-view标签

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

① 需要注意的是`<scroll-view>`在使用中需要给一个固定的高度`height`。

② 需要加入属性横向`scroll-x`或纵向`scroll-y`滚动的属性来指定该滚动视图的滚动方向。

```html
<scroll-view scroll-y scroll-into-view="" class="left_menu">
   <view wx:for="{{leftMenuList}}" wx:key="id" class="menu_item">
   {{item.title}}
   </view>
</scroll-view>
```

**适用场景：**分类页需要有两个**可滚动视图**，一个是左侧商品分类，另一个是右侧商品列表。

###block标签

当想要循环一个标签的时候，可以使用block标签，最后在调试台不会显示标签以及属性内容。只会显示循环后的内文本内容。

示例：

```html
<block wx:for="{{}}">
<view> {{index}} </view>
<view> {{item}} </view>
</block>
```

### swiper标签

在电商小程序中必备组件，一般用于轮播图。

| 常用属性             | 描述                   |
| ---------------------- | ------------------------ |
| autoplay             | 自动轮播，默认为五秒 |
| interval             | 修改轮播时间，单位为毫秒 |
| circular             | 循环轮播             |
| indicator-dots       | 轮播图的指示器       |
| indicator-color    | 指定指示器的未选择的颜色 |
| indicator-active-color | 指定指示器的选中时的颜色 |

tinglie 发表于 2020-12-20 09:05

前来学习，希望楼主一直更新

lile2960817 发表于 2020-12-20 09:14

技术帖子学习下

cyrwapjw 发表于 2020-12-20 12:13

很想学小程序编程，但是不会

二饭发表于 2020-12-20 12:33

tinglie 发表于 2020-12-20 09:05
前来学习，希望楼主一直更新

会一直更新的

二饭发表于 2020-12-20 12:34

cyrwapjw 发表于 2020-12-20 12:13
很想学小程序编程，但是不会

希望可以帮到你{:301_987:}

随遇而安的幸福 发表于 2020-12-20 14:33

收听了希望持续更新

二饭发表于 2020-12-20 15:29

随遇而安的幸福发表于 2020-12-20 14:33
收听了希望持续更新

好的一定

页: [1]

吾爱破解 - 52pojie.cn's Archiver

小程序开发常用标签及用法（第一篇）