【微信小程序】常见内置组件

https://developers.weixin.qq.com/miniprogram/dev/component/

text

text组件用于显示文本, 类似于span标签, 是行内元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 
  1. 基本使用
 -->
<text>默认不能选中\n</text>

<!-- 
  2. selectable是否可以被选中
  默认不能选中
 -->
<text selectable >selectable可以选中\n</text>

<!--
  3. space决定文本大小
  nbsp：默认
  ensp：半个中文大小
  emsp：中文大小
 -->
<text>space 可以选中\n</text>
<text space="nbsp" >space nbsp 可以选中\n</text>
<text space="ensp" >space ensp 可以选中\n</text>
<text space="emsp" >space emsp 可以选中\n</text>

<!-- 
  4. decode是否解码文本
  decode可以解析的有   < > & '    
  默认不解码
 -->
 <text decode >5 > 3</text>

button

button组件用于创建按钮，默认块级元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!-- 
  1. 基本使用
  默认独占一行 display：block
 -->
<button>按钮</button>
<button>按钮</button>

<!-- 
  size属性
  display:inline-block
 -->
<button size="mini">按钮size</button>
<button size="mini">按钮size</button>

<!-- 
  3. type属性
 -->
<button size="mini" type="primary">按钮size</button>
<button size="mini" type="warn">按钮size</button>
<button size="mini" type="default">按钮size</button>

<!-- 
  4. plain 镂空效果
 -->
<button size="mini" plain="">按钮size</button>

<!-- 
  5.disabled 不能点击置灰
 -->
<button size="mini" disabled >按钮disabled</button>

<!-- 
  6.loading
  加载中
 -->
 <button size="mini" loading="{{true}}">按钮</button>

<!-- 
  7. hover-class
  按下的class名
 -->
 <button size="mini" hover-class="rad">按钮</button>

<!-- 
  8. open-type
  微信开放能力
 -->
 <button size="mini" open-type="share">程序分享</button>

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

view

视图组件（块级元素，独占一行，通常用作容器组件）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- 
  1. 基本使用 （容器） 类似于div
 -->
<view class="box"><text>rocyuan</text></view>

<!-- 
  2.hover-class：按下的class
 -->
<view class="box1" hover-class="hover"><text>age</text></view>

<!-- 
  3. hover-stay-time：手指离开多长时间会取消class hover  
 -->
<view class="box1" hover-class="hover" hover-stay-time="0"><text>age</text></view>

<!-- 
  4. hover-stay-time：手指离开多长时间会取消class hover
 -->
<view class="box1" hover-class="hover" hover-start-time="3000"><text>age</text></view>

<!-- 
  5. hover-stop-propagation: 阻止祖先组件的点击状态
 -->
<view class="view1" hover-class="hover1">
  <view class="view2" hover-class="hover2" hover-stop-propagation></view>
</view>

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!-- 
  image：
  可以写成单标签
  默认大小：320X240
  行内块级元素
 -->
<image src="../../assets/img/tabbar/cart.png"></image>

<!-- mode 取值 -->
<image mode="aspectFill" src="../../assets/img/tabbar/cart.png"></image>

<!-- 显示相册图片 -->
<button bindtap="upImage">选择照片</button>
<image src="{{imageUrl}}"></image>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    imageUrl:""
  },
  upImage(){
    //微信API
    wx.chooseImage({
      complete: (res) => {
        const url = res.tempFilePaths[0]
        console.log(url)
        this.setData({
          imageUrl: url
        })
      },
    })
  },
})

<!-- 
  图片加载完成事件：bindload
  图片懒加载 加 lazy-load 属性就好
 -->

<!-- 
  show-menu-by-longpress
  长按图片识别小程序码
 -->
 <image src="../../assets/img/tabbar/cart.png" show-menu-by-longpress></image>

mode取值：

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

input

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 1. 基本使用 -->
<input type="text" placeholder="输入..." placeholder-class="p-style"></input>

<!-- 2. password -->
<input password="" placeholder="输入..." placeholder-class="p-style"></input>

<!-- 3. type: 类型，number数字键盘 -->
<input type="number"></input>

<!-- 4. confirm-type: 键盘右下角的类型 -->
<input confirm-type="send"></input>

<!-- 
  5. 事件绑定和监听
  bindinput 键盘输入时触发 event.detail = {value, cursor, keyCode}，keyCode 为键值
  bindfocus 输入框聚焦时触发 event.detail = { value, height }，height 为键盘高度
  bindblur  输入框失去焦点时触发 event.detail = {value: value}
  bindconfirm 点击完成按钮时触发 event.detail = {value: value}
 -->
<input bindinput="" bindfocus="" bindblur="" bindconfirm=""></input>

scroll-view

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 水平滚动 -->
<scroll-view class="scroll-box" scroll-x >
    <view class="scroll-item" wx:for="{{30}}" wx:key="x">item</view>
</scroll-view>

<!-- 
  垂直滚动
  bindscrolltoupper 滚动到顶部
  bindscrolltolower 滚动到底部
  bindscroll 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
 -->
<scroll-view
  class="scroll-box2"
  scroll-y
  bindscrolltoupper="upper"
  bindscrolltolower="lower"
  bindscroll="scroll"
  >
    <view class="scroll-item2" wx:for="{{30}}" wx:key="x">item</view>
</scroll-view>

共同属性