【小程序开发】常见的内置组件

写在前面

🤗这里是前端程序员小张！

🌻人海茫茫，感谢这一秒你看到这里。希望我的文章对你的有所帮助！

🌟愿你在未来的日子，保持热爱，奔赴山海！

一、Text文本组件

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

常见属性

二、Button按钮组件

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

常见属性

2.1 type属性

<button size="mini" type="primary">type-primary</button>
<button size="mini" type="default">type-default</button>
<button size="mini" type="warn">type-warn</button>
<button size="mini" class="btn">自定义属性</button>

2.2 open-type属性

open-type用户获取一些特殊性的权限，可以绑定一些特殊的事件

三、View视图组件

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

属性

三、Image图片组件

Image组件用于显示图片

• image组件默认宽度320px、高度240px

属性

3.1 mode属性

具体详情参考官方文档：image | 微信开放文档 (qq.com)

3.2 wx.chooseMedia

拍摄或从手机相册中选择图片或视频。

参数

• count

  • 默认值：9
  • 最多可以选择的文件个数，基础库2.25.0前，最多可支持9个文件，2.25.0及以后最多可支持20个文件

• mediaType 文件类型

  • image 只能拍摄图片或从相册选择图片
  • video 只能拍摄视频或从相册选择视频
  • mix 可同时选择图片和视频

• sourceType 图片和视频选择的来源

  • album 从相册选择
  • camera 使用相机拍摄

举个栗子：选择本地图片，将其使用image展示

<button bindtap="onChooseImage">选择图片</button>
<image src="{{chooseImageUrl}}" mode="widthFix" />

  onChooseImage() {wx.chooseMedia({mediaType: 'image'}).then(res => {const imagePath = res.tempFiles[0].tempFilePaththis.setData({ chooseImageUrl: imagePath })})}

四、ScrollView滚动组件

scroll-view可以实现局部滚动

常见的属性

纵向滚动

<scroll-view class="container-y" scroll-y><block wx:for="{{viewColors}}" wx:key="*this"><view class="item" style="background: {{item}};">{{item}}</view></block>
</scroll-view>

.container-y {height: 150px;background-color: cornflowerblue;
}
.item {width: 100px;height: 100px;
}

横向滚动

<scroll-view class="container-x" scroll-x enable-flex><block wx:for="{{viewColors}}" wx:key="*this"><view class="item" style="background: {{item}};">{{item}}</view></block>
</scroll-view>

.container-x {height: 150px;background-color: cornflowerblue;display: flex;
}
.item {width: 100px;height: 100px;flex-shrink: 0;
}

五、组件的共同属性