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

最新推荐文章于 2024-05-22 21:47:43 发布

coderHing[专注前端]

最新推荐文章于 2024-05-22 21:47:43 发布

阅读量4.2k

点赞数 83

分类专栏：小程序系列文章标签：微信小程序小程序前端前端框架

本文链接：https://blog.csdn.net/coderHing/article/details/128335478

版权

小程序系列专栏收录该内容

7 篇文章 14 订阅

订阅专栏

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

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

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

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

一、Text文本组件

Text组件解析

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

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

space有三个取值

decode是否解码

decode可以解析的有 <>&'

二、Button按钮组件

Button组件解析

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

常见属性:

Button组件代码

JavaScript


<button>按钮</button>
<text>哈哈哈</text>


<button size="mini">按钮size属性</button>


<button size="mini" type="primary">按钮type属性</button>
<button size="mini" type="warn">按钮type属性</button>


<button size="mini" plain>按钮plain属性</button>


<button size="mini" disabled>disabled属性</button>


<button size="mini" loading>loading属性</button>


<button size="mini" hover-class="active">hover效果</button>

open-type属性

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

JavaScript

<view>------Button进阶用法------</view>


<button open-type="contact" size="mini" type="primary">打开会话</button>



<button open-type="getUserInfo" bindgetuserinfo="getUserInfo" size="mini" type="primary">用户信息</button>


<button size="mini" type="primary" bindtap="getUserInfo1">用户信息2</button>


<button size="mini" type="primary" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">手机号码</button>

三、View视图组件

View组件解析

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

JavaScript
// 代码展示
<view>

<view bindtap="onViewClick" hover-class="active">我是view组件</view>
<view>哈哈哈哈</view>
</view>

四、Image图片组件

Image组件解析

常见属性:

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

Mode属性使用也比较关键

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

image组件代码

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

代码展示 => wxml中

JavaScript
<view>















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

代码展示 => 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
<view>







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

</view>

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;
}

六、组件的共同属性

组件共同的属性

coderHing[专注前端]

关注

83
点赞
踩
121

收藏

觉得还不错? 一键收藏
打赏
17
评论
微信小程序 | 小程序的内置组件

🖥️ 微信小程序专栏：微信小程序 |小程序的内置组件🧑‍💼 个人简介：一个不甘平庸的平凡人🍬✨ 个人主页：CoderHing的个人主页🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️👉 你的一键三连是我更新的最大动力❤️
复制链接

扫一扫