Cloud development gadget components

We've been in touch with the components that represent text, the components that represent images, the components that represent view containers, the components that represent links, the components that represent links, which greatly enrich the structure layout and element types of small programs, and we'll cover some of the components next.

The property of the component

We've already approached some of the components in a hands-on way, and this time we'll look back at some of the basic concepts, which are the properties of the components.

Public properties are properties that all components of a small program have, such as id, class, style, and so on, while the values of different properties are data, and there are data types.

Technical documentation: Small program components

You can open the technical documentation above to get a quick look at what are the common properties of the component, what are the types of properties, the types of data types and value descriptions. I n addition to common properties, different components have their own unique properties. C heck the technical documentation and you can understand how much, don't force understanding and memory. In real development, many properties we don't

Small tasks: Use the technical documentation to find out what are the private attributes of the components, the components, and the components.

Being good at accessing technical documents is a very important ability for programmers in any direction, just like learning an English dictionary. I n actual development, a new technical direction you can rely on no longer has the role of a teacher, because no one has an obligation to teach you. Technical documentation and search capabilities are your most trusted support.

The rost effect

Many apps and gadgets have a picture carncast at the top of the page, and the applet has a dedicated carncast component, whisperer. To learn more about the wheeling components of the swiftr, of course, it is possible to read the official technical documentation

Technical documentation: Wheeling components swift

Using the developer tool, enter the following code in home.wxml:

<view class="home-top">
        <view class="home-swiper">
            <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{activecolor}}">
              <block wx:for="{{imgUrls}}" wx:key="*this" >
                <swiper-item>
                    <image src="{{item}}" style="width:100%;height:200px" class="slide-image" mode="widthFix"  />
                </swiper-item>
              </block>
            </swiper>
        </view>
    </view>

Then add .js data to the data in the home store:

imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    interval: 5000,
    duration: 1000,
    indicatorDots: true,
    indicatorColor: "#ffffff",
    activecolor:"#2971f6",
    autoplay: true,

To form a completecarnation, in addition to configuring pictures of the same size specifications, you can also configure panel indicator points, animation effects, whether to play automatically, and so on. The carnation components with their own unique properties, we can do more configuration, combined with the developer tools of the actual effect, to understand the technical documentation of these properties and the value of the properties.

Audio component

The audio component is an audio component, and we enter the following code in the home.wxml file:

<audio src="{{musicinfo.src}}" poster="{{musicinfo.poster}}" name="{{musicinfo.name}}" author="{{musicinfo.author}}" controls></audio>

Then add .js data to the data in the home store:

    musicinfo: {
          poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
          name: '此时此刻',
          author: '许巍',
          src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
        },

Technical documentation: Audio component technical documentation

• src: The resource address to play the audio
• poster: The picture resource address of the audio cover page on the default control
• name: The audio name on the default control
• author: The author's name on the default control

Perhaps because the audio component uses very low scenes and frequencies, the audio component will be discarded later and the API of the small program will be required to create music playback.

Video component

The video component is used to represent video, and we enter the following code in the home.wxml file:

<video id="daxueVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" rel="external nofollow"  rel="external nofollow"  autoplay loop muted initial-time="100" controls event-model="bubble">
    </video>

Technical documentation: Video component technical documentation

You can combine the actual effects and technical documentation to understand the following properties, the above case autoplay or a property to delete to see the specific effects, to deepen their understanding of component properties.

• autoplay: Whether to play automatically
• Loop: Whether to loop
• Muted: Whether to mute playback
• inital-time: Specify the initial playback location of the video in seconds
• Controls: Whether the default playback control is displayed

Cover effect

We can also overlay the view, picture components on the map map or video video video components. For example, if we want to display the title of the video in the upper-left corner of the video and the logo of the merchant in the upper-right corner, we can use the cover effect.

<video id="daxueVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" rel="external nofollow"  rel="external nofollow"  controls event-model="bubble">
       <view class="covertext">腾讯大学：腾讯特色学习交流平台</view>
       <image class="coverimg" src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/portal/css/img/nav/logo-bg-color.svg" rel="external nofollow"  ></image>
    </video>

Enter the following code in the wxss file;

.covertext{
      width: 500rpx;
      color: white;
      font-size: 12px;
      position: absolute;
      top:20rpx;
      left:10rpx;
    }
    .coverimg{
      width:100rpx;height:23rpx;
      position: absolute;
      right:10rpx;
      top:10rpx;
    }

The map component

To mark a place on a map, we first need to know the latitude and longitude of that location, and this time we need to use the coordinate picker tool.

Latitude and longitude acquisition: Tencent map coordinate picker

In the search box we can search for "Shenzhen Tencent Building" with a latitude of 22.540503 and a longitude of 113.934528.

Using the developer tool, enter the following code in home.wxml:

<map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      covers="{{covers}}"
      show-location
    ></map>

Then add .js code to the data of the home page:

    latitude: 22.540503,
        longitude: 113.934528,
        markers: [{
          id: 1,
          latitude: 22.540503,
          longitude: 113.934528,
          title: '深圳腾讯大厦'
        }],

In the developer tool simulator, we can see the map of Tencent Building, click on the marker tag, you can see the custom name of Shenzhen Tencent Building. Click on the preview of the developer's tool and use the QR code generated by the mobile WeChat scan, which is slightly different from the map and simulator in the mobile weChat.

Technical documentation: Map component technical documentation

Mark multiple points on the map

Note from the technical documentation we can see where the marks marks are used to display the markers on the map, its data type is array array, and we also see the case above where its data is wrapped in parentheses. T hat is, we can mark multiple points on the map. Add a few more coordinates to markers:

    markers: [
          {
            id: 1,
          latitude: 22.540503,
          longitude: 113.934528,
          title: '深圳腾讯大厦'
          },
          {
            id: 2,
            latitude: 22.540576,
            longitude: 113.933790,
            title: '万利达科技大厦'
          },
          {
            id: 3,
            latitude: 22.522807,
            longitude: 113.935338,
            title: '深圳腾讯滨海大厦'
          },
          {
            id: 4,
            latitude: 22.547400,
            longitude: 113.944370,
            title: '腾讯C2'
          },    
        ],

It marks Tencent's four locations in Shenzhen, where you can preview the actual effect on your phone.

Maps are a very complex component, in addition to marker, there are the following properties, you can study according to the actual needs of their own.

• callout: click marker bubble callout, as well as bubble on the label, you can rich click on the map mark pop up rich information introduction;
• Circle: Displays a circle on a map, such as a visualization of a circle of several kilometers, or a weight size on a map
• polygon: Specifies a series of coordinate points to generate closed polygons based on points coordinate data, such as ringing the actual range
• Polyline: Specify a series of coordinate points, from the first item of the array to the last item, such as the route of the run