Built-in components of applets

Table of contents:

1 Text text component

2 Button button component

3 View view components

4 Image component

5 ScrollView scroll component

6 Common Properties of Components

The button component has an open-type attribute, which can be set to obtain user information or trigger user sharing and other functions. Specifically, there will be a fixed pop-up window.

button | WeChat Open Documentation (qq.com) https://developers.weixin.qq.com/miniprogram/dev/component/button.html Obtaining user information now needs to be implemented through the wx.getUserProfile(Object object) of the api. There is no way to get user information simply through the open-type attribute of the button. The obtained content is only user avatar and user name.

Announcement on Adjustment of Mini Program User Avatar and Nickname Obtaining Rules | WeChat Open Community (qq.com) https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01 If you want to obtain the user's mobile phone number, there is no way for individuals It must be the enterprise version to obtain.

The image component has a lazy loading function and a long press trigger event. In particular, if the value of src is preceded by the symbol /, it can be expressed as the root directory, so that you don’t need to write the relative path like ./ when writing the file directory. It is used when the user needs to select a picture locally and display it. At this time, you need to use the wx.chooseMedia(Object object) method of the API to obtain the user's local image.

wx.chooseMedia(Object object) | WeChat Open Documentation (qq.com) https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html

When using scroll-view, we need to specify the width of the label to control the horizontal sliding (if you open the flex layout, you need to open the enable-flex attribute of scroll-view, after opening, the content width will be compressed. At this time, set flex- in css shrink:0; to keep the content width), set the height to control the up and down sliding (if not set the height, the default label height is the same as the page height). There are many scrolling events, pay attention to the events of scrolling to the head and the end, you can use the bindscrolltoupper and bindscrolltolower attributes to bind custom events. The scrolling event bindscroll can add event properties to get the scrolling distance.

scroll-view | WeChat Open Documentation (qq.com) https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html The input component has a new attribute, which is two-way data binding , model:value={ {a variable in data}}

wxml file content:

<view>------------------ input组件 ------------------</view>
<input type="text" model:value="{
    
    {message}}"/>

<view>------------------ scroll-view组件 ------------------</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>












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

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


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



<view>------------------ text组件 ------------------</view>
<text>Hello World</text>
<text user-select>{
    
    { message }}</text>
<text user-select="{
    
    {true}}">{
    
    { message }}</text>
<text decode>&gt;</text>
js file content:
// 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 content:
/* 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;
}

Built-in components of applets

Guess you like