小程序的内置组件

1 Text文本组件

2 Button按钮组件

3 View视图组件

4 Image图片组件

5 ScrollView滚动组件

6 组件的共同属性

按钮组件有个open-type的属性，可以设置获取用户的信息或者触发用户分享等的功能。具体就是会有固定的弹窗。

button | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/component/button.html获取用户信息现在是需要通过api的wx.getUserProfile(Object object)实现。单纯通过button的open-type属性是没办法拿到用户信息了。获取的内容只有用户头像和用户名。

小程序用户头像昵称获取规则调整公告 | 微信开放社区 (qq.com)https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01如果想要获取用户的手机号，个人是没办法获取的，必须是企业的版本才能获取。

扫描二维码关注公众号，回复： 14827084 查看本文章

image组件有懒加载功能、长按触发事件。特别是src的值如果最前面是 /这个符号可以表示为根目录，这样子写文件目录就可以不用写./这样子的相对路径了。运用在，当用户需要从本地选择图片并展示。这时候需要使用api的wx.chooseMedia(Object object)方法获取用户的本地图片。

wx.chooseMedia(Object object) | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html

使用scroll-view的时候，我们需要给定标签宽度才能控制水平的滑动（打开flex布局的话，需要打开scroll-view的enable-flex属性，开启之后会压缩内容宽度，这时候在css里面设置flex-shrink:0;即可保留内容宽度），设置高度才能控制上下滑动（不设置高的话默认标签高度和页面高度一样）。滚动的事件有很多，注意一下滚动到头和尾的事件用bindscrolltoupper和bindscrolltolower属性绑定自定义事件即可。滚动事件bindscroll可以添加event的属性来获取滚动的距离。

scroll-view | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.htmlinput组件，有个新的属性，是数据双向绑定的，model:value={ {data里的某个变量}}

wxml文件内容：

<!--pages/02_common_cpns/index.wxml-->
<view>------------------ input组件 ------------------</view>
<input type="text" model:value="{
    
    {message}}"/>

<view>------------------ scroll-view组件 ------------------</view>
<!-- 上下滚动(y轴) -->
<!-- <scroll-view class="container scroll-y" scroll-y>
  <block wx:for="{
    
    {viewColors}}" wx:key="*this">
    <view class="item" style="background: {
    
    {item}};">{
    
    {item}}</view>
  </block>
</scroll-view> -->

<!-- 左右滚动(x轴) -->
<!-- <scroll-view 
  class="container scroll-x" 
  scroll-x
  enable-flex
>
  <block wx:for="{
    
    {viewColors}}" wx:key="*this">
    <view class="item" style="background: {
    
    {item}};">{
    
    {item}}</view>
  </block>
</scroll-view> -->

<!-- 监听事件 -->
<scroll-view 
  class="container scroll-x" 
  scroll-x
  enable-flex
  bindscrolltoupper="onScrollToUpper"
  bindscrolltolower="onScrollToLower"
  bindscroll="onScroll"
>
  <block wx:for="{
    
    {viewColors}}" wx:key="*this">
    <view class="item" style="background: {
    
    {item}};">{
    
    {item}}</view>
  </block>
</scroll-view>


<view>------------------ Image组件 ------------------</view>
<!-- 根目录: /表示根目录 -->
<!-- 1.图片的基本使用 -->
<!-- image元素宽度和高度: 320x240 -->
<!-- <image src="/assets/zznh.png"/>
<image src="https://pic3.zhimg.com/v2-9be23000490896a1bfc1df70df50ae32_b.jpg"/> -->

<!-- 2.图片重要的属性: mode -->
<!-- <image src="/assets/zznh.png" mode="aspectFit"/> -->
<!-- image基本都是设置widthFix -->
<!-- <image src="/assets/zznh.png" mode="widthFix"/> -->
<!-- <image src="/assets/zznh.png" mode="heightFix"/> -->

<!-- 3.选择本地图片: 将本地图片使用image展示出来 -->
<button bindtap="onChooseImage">选择图片</button>
<image class="img" src="{
    
    {chooseImageUrl}}" mode="widthFix"/>

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

<view>------------------ button组件 ------------------</view>
<!-- 1.基本使用 -->
<button>按钮</button>

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

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

<button size="mini" plain>plain属性</button>
<button size="mini" disabled>disabled属性</button>
<button size="mini" loading class="btn">loading属性</button>
<button size="mini" hover-class="active">hover效果</button>
<view></view>

<!-- 2.open-type属性 -->
<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="getUserInfo">用户信息2</button>
<button 
  size="mini" 
  type="primary"
  open-type="getPhoneNumber"
  bindgetphonenumber="getPhoneNumber"
>
  手机号码
</button>


<!-- text组件 -->
<view>------------------ text组件 ------------------</view>
<text>Hello World</text>
<text user-select>{
    
    { message }}</text>
<text user-select="{
    
    {true}}">{
    
    { message }}</text>
<text decode>&gt;</text>

js文件内容：

// pages/02_common_cpns/index.js
Page({
  data: {
    message: "你好啊, 李银河!",
    chooseImageUrl: "",
    viewColors: ["red", "blue", "green", "skyblue", "purple", "yellow"]
  },
  getUserInfo(event) {
    // 调用API, 获取用户的信息
    // 1.早期小程序的API, 基本都是不支持Promise风格
    // 2.后期小程序的API, 基本都开发支持Promise风格
    wx.getUserProfile({
      desc: 'desc',
      // success: (res) => {
      //   console.log(res);
      // }
    }).then(res => {
      console.log(res);
    })
  },
  getPhoneNumber(event) {
    console.log(event);
  },
  onViewClick() {
    console.log("onViewClick");
  },
  onChooseImage() {
    wx.chooseMedia({
      mediaType: "image"
    }).then(res => {
      const imagePath = res.tempFiles[0].tempFilePath
      this.setData({ chooseImageUrl: imagePath })
    })
  },

  // 监听scroll-view滚动
  onScrollToUpper() {
    console.log("滚动到最顶部/左边");
  },
  onScrollToLower() {
    console.log("滚到到最底部/右边");
  },
  onScroll(event) {
    console.log("scrollview发生了滚动:", event);
  }
})

wxss内容：

/* pages/02_common_cpns/index.wxss */
.btn {
  background-color: orange;
  color: #fff;
}

.active {
  background-color: skyblue;
}

.img {
  width: 100%;
}

/* scroll-view */
.container {
  background-color: orange;
  height: 150px;
}

.scroll-x {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  color: #fff;
  flex-shrink: 0;
}

/* input组件 */
input {
  width: 200px;
  height: 30px;
  border: 1px solid orange;
}

小程序的内置组件

猜你喜欢