preface

The previous section summarized the view component, the base content component, and the form component. This section focuses on the navigation component, media component, and map component.

Navigation components

Applets can use the navigation component to set the page jump. You can jump to pages using the Navigator page link component. Example code is as follows:

In the.wxml page

<view style="text-align:center; margin-button:10rpx;" </view> <view class="section"> <view class="section_title">1.wx class="section_body"> <navigator url="/Component/button/button" open-type="navigate" hover-class="navigator-hover"> </navigator> </view> </view> <view class="section"> <view class="section_title">  <view class="section_body"> <navigator url="/Component/checkbox/checkbox" open-type="redirectTo" Hover -class="navigator-hover"> keep the current page jump </navigator> </view> </view> <view class="section"> <view Class ="section_title">3.wx.switch Switch to TabBar</view> <view class="section_body"> < Navigator URL ="/Component/label/label" Open-type ="redirectTo" hover-class="navigator-hover">Copy the code

In the.wXSS page

.section {
  width: 90%;
  height: 150rpx;
  margin: 40rpx auto;
  border: 1px solid green;
  border-radius: 10rpx;
}

.section_title {
  text-align: center;
}

.section_body {
  text-align: center;
}

.section_body :hover{
  color: red;
}

Copy the code

The effect is shown below:

Media components

Audio component

Audio To bind the audio component with a unique Id, use wx.createAudioContext(‘Id’); Create an audio playback environment.

SRC Specifies the path to play the audio. Poster Specifies the playback image of the audio; Name Specifies the audio name. Example code is as follows:

In the.wxml page

<view class="section_title">audio </view> <view class="section_body"> <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio> <button Type ="primary" bindtap="audioPlay"> </button> <button type="primary" bindtap="audioPause"> pause </button> <button </button type="primary" bindtap="audioStart">  </view>Copy the code

In the.wXSS page

.section {
  width: 90%;
  margin: 10rpx auto;
  border: 1px solid green;
  border-radius: 5rpx;
}
.section_title {
  text-align: center;
}
.section_body {
  text-align: center;
  margin: 20rpx;
}
.section_body button {
  margin: 10rpx;
  font-size: 24rpx;
}
Copy the code

In the.js page

Page({ onReady: Function (e) {this.audioCtx = wx.createAudioContext('myAudio'); }, data: {poster: 'https://p3fx.kgimg.com/stdmusic/20200312/20200312194032367333.jpg', / / audio image name: 'I met him later ',// 'https://webfs.yun.kugou.com/202003222011/624588a43dd5b65bf22910b5c9aadd9f/G209/M04/15/1B/sZQEAF5yIAGABKyMADz-g6dtNsQ387 .mp3',// audioPlay:function(){this.audioctx.play (); The console. The log (" play "); }, /* pause */ audioPause:function(){this.audioctx.pause (); The console. The log (" pause "); Audio14 :function(){this.audioctx.seek ();}, /* Function (){this.audioctx.seek (); Console. log(" temporarily set the current playback time to stop for 14 seconds "); }, /* return to the beginning */ audioStart:function(){this.audioctx.seek (0); Console. log(" back to the beginning "); }});Copy the code

The effect is as follows:

Camera component

Camera camera component is equivalent to system photos, scanning two-dimensional code function. Example code is as follows:

In the.wxml page

<view class="section"> <view class="section_title">camera component </view> <view class="section_body"> <camera device-position="back" flash="off" binderror="error" class="cam"></camera> <button type="primary" <image mode="widthFix" SRC ="{{SRC}}"></image> </view> </view>Copy the code

In the.wXSS page

.section {
  width: 90%;
  margin: 10rpx auto;
  border: 1px solid green;
  border-radius: 5rpx;
}

.section_title {
  text-align: center;
}

.section_body {
  text-align: center;
  margin: 20rpx;
}

.cam {
  width: 100%;
  height: 300px;
}
.section_body button{
  margin: 10rpx;
}

Copy the code

In the.js page

Page({ takePhoto() { const ctx = wx.createCameraContext(); ctx.takePhoto({ quality: 'high', success: (res) => { this.setData({ src: res.tempImagePath }); }}); }, error(e) { console.log(e.detail) } });Copy the code

The effect is as follows:

Image component

The image component has two display modes: one is the zoom mode, which has four modes; The second is the tailoring mode, there are 9 ways. Example code is as follows:

In the.wxml page

<view class="section_title"> </view> <view class="section_body"> <view wx:for="{{array}}" wx:for-item="item"> <view>{{item.name}}</view> <view><image class="img" mode="{{item.mode}}" src="{{src}}"></image></view> </view> </view> </view>Copy the code

In the.wXSS page

.section {
  width: 90%;
  margin: 10rpx auto;
  border: 1px solid green;
  border-radius: 5rpx;
}
.section_title {
  text-align: center;
}
.section_body {
  text-align: center;
  margin: 20rpx;
}
.section_body button {
  margin: 10rpx;
  font-size: 24rpx;
}
.img{
  width: 200px; height: 200px; background-color: #eeeeee;
}
Copy the code

In the.js page

Page({data: {array: [{mode: 'scaleToFill', text: 'scaleToFill', {mode: 'aspectFit', text: 'scaleToFill', {mode: 'aspectFit', text: 'aspectFit: Keeps aspect ratio scaling so that the long sides of the image are fully displayed ', {mode: 'aspectFill', text: 'aspectFill: keeps aspect ratio scaling so that only the short sides of the image are fully displayed '}, {mode: 'top', {mode: 'bottom', text: 'top', {mode: 'center', text: 'top', {mode: 'center', text: 'top', {mode: 'center', text: }, {mode: 'left', {mode: 'right', text: 'left', {mode: 'right', text: 'left', {mode: 'right', text: }, {mode: 'top left', text: 'top left', {mode: 'top right', text: 'top left', {mode: 'top right', text: 'top right ', {mode: 'bottom left', 'bottom left', {mode: 'bottom right', text: 'bottom right: no zoom '}], SRC: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'}, imageError: Function (e) {console.log('image3 error, with value ', e.daile.errmsg)},});Copy the code

The effect is as follows:

Video component

Video component is used to play video, can control whether to display the play control; The default width of the video component is 300px and the height is 250px. Example code is as follows:

In the.wxml page

<view class="section_title"> <view class="section_body"> <video id="myVideo" src="{{src}}" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video> <button type="primary" </button> <input bindblur="bindInputBlur" class="w-input"/> <button type="primary" </button> </view> </view>Copy the code

In the. WSXX page

.section {
  width: 90%;
  margin: 10rpx auto;
  border: 1px solid green;
  border-radius: 5rpx;
}
.section_title {
  text-align: center;
}
.section_body {
  text-align: center;
  margin: 20rpx;
}
.w-input{
  border: 1px solid #ddd;
  height: 80rpx;
  width: 90%;
  margin: 20rpx auto;
}
Copy the code

In the.js page

function getRandomColor() { let rgb = [] for (let i = 0; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color rgb.push(color) } return '#' + rgb.join('') } Page({ onReady: function(res) { this.videoContext = wx.createVideoContext('myVideo') }, data: { src: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726b c41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030 F42400204045a320a0201000400 ", inputValue: "', danmuList: [{text: '1 s of barrage, color:' # ff0000 'time: 1}, {text: #ff00ff', color: '#ff00ff', time: 3}]}, Function (e) {this.inputValue = e.daile.value}, /* Get video */ bindButtonTap: function(e) { var that = this wx.chooseVideo({ sourceType: ['album', 'camera'], maxDuration: 60, camera: ['front', 'back'], success: function (res) {that.setData({SRC: res.tempFilepath})}})}, function() { this.videoContext.sendDanmu({ text: this.inputValue, color: getRandomColor() }); }});Copy the code

The effect is as follows:

Map component

We can use the map component to develop map-based applications. For example: map navigation, taxi software and so on. Example code is as follows:

In the.wxml page

<view class="section"> <view class="section_title"> <view class="section_body"> <map id="map" Longitude ="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindControlTap =" controlTap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location class="mp"></map> </view> </view>Copy the code

In the.wXSS page

.section {
  width: 90%;
  margin: 10rpx auto;
  border: 1px solid green;
  border-radius: 5rpx;
}

.section_title {
  text-align: center;
}

.section_body {
  text-align: center;
  margin: 20rpx;
}

.mp {
  width: 100%;
  height: 300px;
}

Copy the code

In the.js page

Page({data: {markers: [{iconPath: "", ID: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 300) 50}], polyline: [{points: [{longitude: 113.3245211, latitude: 23.10229}, {points: [{longitude: 113.3245211, latitude: 23.10229}, {longitude: 113.324520, latitude: }], color: "#FF0000DD", width: 2, dottedLine: true}], controls: [{id: 1, iconPath: ", position: {left: 0, top: 300 - 50, width: 50, height: 50 }, clickable: true }] }, regionchange(e) { console.log(e.type) }, markertap(e) { console.log(e.markerId) }, Controltap (e) {console.log(e.controlid)}});Copy the code

The effect is as follows:

conclusion

At this point, the micro channel small program component learning so far. The paper come zhongjue shallow, and must know this to practice. Practice, is the only standard to test the truth ah not just simply to see, the most important or need to automatically do it yourself

To be continued…