微信小程序 | 小程序的内置组件

️ 微信小程序专栏：微信小程序 | 小程序的内置组件
‍ 个人简介：一个不甘平庸的平凡人

✨ 个人主页：CoderHing的个人主页

格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

你的一键三连是我更新的最大动力❤️

---

目录

一、Text文本组件

Text组件解析

二、Button按钮组件

Button组件解析

三、View视图组件

View组件解析

四、Image图片组件

Image组件解析

五、ScrollView滚动组件

scroll-view组件解析

scroll-view组件代码

六、组件的共同属性

组件共同的属性

---

一、Text文本组件

Text组件解析

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

 

• user-select属性决定 文本内容是否可以被用户选中

• space有三个取值

• decode是否解码

• decode可以解析的有 <>&'

二、Button按钮组件

Button组件解析

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

常见属性:

 

Button组件代码

 

JavaScript 按钮 哈哈哈 按钮size属性 按钮type属性 按钮type属性 按钮plain属性 disabled属性 loading属性 hover效果

open-type属性

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

 

 

JavaScript ------Button进阶用法------ 打开会话 用户信息 用户信息2 手机号码

三、View视图组件

View组件解析

视图组件(块级元素,独占一行,通常用作容器组件)

 

JavaScript // 代码展示 我是view组件 哈哈哈哈

四、Image图片组件

Image组件解析

常见属性:

src属性中可以是本地图片 也可以是网络图片

Mode属性使用也比较关键

image组件默认宽度和高度为320 和 240

image组件代码

补充一个常用API:wx.chooseMedia(使用方法查看官方文档 => API => 媒体 => 视频)

 

代码展示 => wxml中 JavaScript 选择图片

代码展示 => js中(实现点击获取图片功能) JavaScript // image组件 3 . 案例:想要点击按钮 获取手机文件相片 展示出来   onChooseImg(){     // console.log("123"); // 接下来需要调用api     // wx.chooseImage({ /// 这个api比较过时 所以这里不使用     //   count: 0,     // })     wx.chooseMedia({       // camera: camera, // 相机       mediaType:"image" // 可以在官方文档中 API => 媒体 => 视频中查看       // 他返回promise 可以用promise调用     }).then(res=>{       console.log(res); // 给我们返回的是一个数组       const imagePath = res.tempFiles[0].tempFilePath       this.setData({ chooseImageUrl:imagePath })     })   },

五、ScrollView滚动组件

scroll-view组件解析

 注:

• 实现滚动效果必须添加scroll-x或-y属性

• 垂直方向滚动必须要给scroll-view设置一个高度

scroll-view组件代码

代码展示

index.wxml中 JavaScript        {{item}}

index.wxss中 注: container 在最外层的index.wxss中有设置,把最外层的index.wxss中的 container  删除即可 CSS /* scroll-view */ .container {   background-color: pink;   height: 150px; } .scrollX {   display: flex; } .item {   width: 100px;   height: 100px;   color: white;   flex-shrink: 0; }

六、组件的共同属性

组件共同的属性