微信小程序第三周三種組件

首先各部分要在app.json里面創(chuàng)建界面，這里就不演示怎么創(chuàng)建了，這是我的項目結(jié)構(gòu)


結(jié)構(gòu)
界面

一、媒體組件

1.audio

音頻組件，1.6.0版本開始，該組件不再維護(hù)。建議使用能力更強(qiáng)的 wx.createInnerAudioContext接口，所以這個組件用的不太多了，我們簡單的看一下這個組建的基本功能：

1.1 JavaScript部分

<!-- audio.wxml -->
<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">暫停</button>
<button type="primary" bindtap="audio14">設(shè)置當(dāng)前播放時間為14秒</button>
<button type="primary" bindtap="audioStart">回到開頭</button>

1.2 wxml 部分

//wxml代碼
<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">暫停</button>
<button type="primary" bindtap="audio14">設(shè)置當(dāng)前播放時間為14秒</button>
<button type="primary" bindtap="audioStart">回到開頭</button>
audio
2.camera

系統(tǒng)相機(jī), 可以獲取本機(jī)的攝影功能，如果要使用掃碼二維碼功能，需升級微信客戶端至6.7.3。
2.1 JavaScript部分(pages里面增加函數(shù))

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

2.2 wxml部分

<!-- camera.wxml -->
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>預(yù)覽</view>
<image mode="widthFix" src="{{src}}"></image>
camera

注：我這是直接從電腦上拍的，如果沒有啟動電腦上的camera就用手機(jī)調(diào)試

3.image

圖片，主要是介紹image的一些屬性，對圖片的顯示效果
3.1 JavaScript部分

Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill：不保持縱橫比縮放圖片，使圖片完全適應(yīng)'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit：保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill：保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來'
    }, {
      mode: 'top',
      text: 'top：不縮放圖片，只顯示圖片的頂部區(qū)域'
    }, {
      mode: 'bottom',
      text: 'bottom：不縮放圖片，只顯示圖片的底部區(qū)域'
    }, {
      mode: 'center',
      text: 'center：不縮放圖片，只顯示圖片的中間區(qū)域'
    }, {
      mode: 'left',
      text: 'left：不縮放圖片，只顯示圖片的左邊區(qū)域'
    }, {
      mode: 'right',
      text: 'right：不縮放圖片，只顯示圖片的右邊邊區(qū)域'
    }, {
      mode: 'top left',
      text: 'top left：不縮放圖片，只顯示圖片的左上邊區(qū)域'
    }, {
      mode: 'top right',
      text: 'top right：不縮放圖片，只顯示圖片的右上邊區(qū)域'
    }, {
      mode: 'bottom left',
      text: 'bottom left：不縮放圖片，只顯示圖片的左下邊區(qū)域'
    }, {
      mode: 'bottom right',
      text: 'bottom right：不縮放圖片，只顯示圖片的右下邊區(qū)域'
    }],
    src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'
  },
  imageError: function (e) {
    console.log('image3發(fā)生error事件，攜帶值為', e.detail.errMsg)
  }
})

注：這些是我們準(zhǔn)備的數(shù)據(jù)，如果是前后端分離開發(fā)，只需要定義變量來接收后端的數(shù)據(jù)

3.2 wxml部分

<view class="page">
  <view class="page__hd">
    <text class="page__title">image</text>
    <text class="page__desc">圖片</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
      <view class="section__title">{{item.text}}</view>
      <view class="section__ctn">
        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
      </view>
    </view>
  </view>
</view>
image
4.video

4.1 JavaScript部分

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')
  },
  inputValue: '',
  data: {
    src: '',
    danmuList: [
      {
        text: '第 1s 出現(xiàn)的彈幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出現(xiàn)的彈幕',
        color: '#ff00ff',
        time: 3
      }]
  },
  bindInputBlur: function (e) {
    this.inputValue = e.detail.value
  },
  bindButtonTap: function () {
    var that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front', 'back'],
      success: function (res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }
})

4.2 wxml部分

<view class="section tc">
  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
  <view class="btn-area">
    <button bindtap="bindButtonTap">獲取視頻</button>
    <input bindblur="bindInputBlur"/>
    <button bindtap="bindSendDanmu">發(fā)送彈幕</button>
  </view>
</view>
video

二、地圖

1.1 JavaScript部分

Page({
  data: {
    markers: [{
      iconPath: "/resources/others.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color: "#FF0000DD",
      width: 2,
      dottedLine: true
    }],
    controls: [{
      id: 1,
      iconPath: '/resources/location.png',
      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)
  }
})

1.2 wxml部分

<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 style="width: 100%; height: 300px;"></map>
map

三、畫布

直接用幾個例子來講解一下畫布的概念，首先是在界面wxml標(biāo)記一個畫布<canvas></canvas>,畫什么是在JavaScript里面定義的

1.畫一個紅色的矩形

1.1 JavaScript內(nèi)容, 注意這個onReady函數(shù)是生命周期函數(shù)--監(jiān)聽頁面初次渲染完成，就是進(jìn)行界面的加載（官方一點叫做渲染）完成后自動執(zhí)行的函數(shù)，

//js代碼
Page({
  onReady() {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('red')
    ctx.fillRect(10, 10, 150, 75)
    ctx.draw()
  }
})

解釋：（1）const 是C語言里面定義變量的關(guān)鍵字
（2）wx.createCanvasContext('myCanvas') 微信自帶的的API（接口），里面放一個參數(shù)，供界面調(diào)用
（3） 剩下三個分別是設(shè)置顏色、大小，以及向canvas描述。關(guān)于大小的設(shè)置是按照左上方為原點，然后獲取的對角線上的點

1.2 wxml界面內(nèi)容

<canvas canvas-id="myCanvas" style="border: 1px solid;"/>

解釋： （1）canvas-id 里的的參數(shù)和我們在js里面設(shè)置的參數(shù)名一樣
（2）style 樣式為了展示我們所定義畫布的大小，和我們所繪制的矩形對比。不加也可以，只是為了方便查看畫布的大小


canvas
2.創(chuàng)建三次方貝塞爾曲線路徑

2.1 JavaScript代碼

//JavaScript代碼
Page({
  onReady() {
    const ctx = wx.createCanvasContext('myCanvas')

    // Draw points
    ctx.beginPath()
    ctx.arc(20, 20, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('red')
    ctx.fill()

    ctx.beginPath()
    ctx.arc(200, 20, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('lightgreen')
    ctx.fill()

    ctx.beginPath()
    ctx.arc(20, 100, 2, 0, 2 * Math.PI)
    ctx.arc(200, 100, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('blue')
    ctx.fill()

    ctx.setFillStyle('black')
    ctx.setFontSize(12)

    // Draw guides
    ctx.beginPath()
    ctx.moveTo(20, 20)
    ctx.lineTo(20, 100)
    ctx.lineTo(150, 75)

    ctx.moveTo(200, 20)
    ctx.lineTo(200, 100)
    ctx.lineTo(70, 75)
    ctx.setStrokeStyle('#AAAAAA')
    ctx.stroke()

    // Draw quadratic curve
    ctx.beginPath()
    ctx.moveTo(20, 20)
    ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
    ctx.setStrokeStyle('black')
    ctx.stroke()

    ctx.draw()
  }
})

2.2 wxml界面代碼

//wxml
<view style="padding:50rpx 50rpx 50rpx 150rpx">
  <canvas canvas-id="myCanvas"/>
</view>

注：沒有設(shè)置樣式
貝塞爾曲線
3.繪制一個漸變色的矩形

3.1JavaScript代碼

Page({
  onReady() {
    const ctx = wx.createCanvasContext('myCanvas')

    // Create linear gradient
    const grd = ctx.createLinearGradient(0, 0, 200, 0)
    grd.addColorStop(0, 'red')
    grd.addColorStop(1, 'white')

    // Fill with gradient
    ctx.setFillStyle(grd)
    ctx.fillRect(10, 10, 150, 80)
    ctx.draw()
  }
})

3.2 wxml界面代碼（和上一個沒什么變化）

//wxml
<view style="padding:50rpx 50rpx 50rpx 150rpx">
  <canvas canvas-id="myCanvas"/>
</view>
漸變矩形

4.新建漸變圓形

4.1JavaScript代碼，可以在剛才的js里面添加函數(shù)

oncri:function(){
    const ctx = wx.createCanvasContext('myCanvas')

    // Create circular gradient
    const grd = ctx.createCircularGradient(75, 50, 50)
    grd.addColorStop(0, 'red')
    grd.addColorStop(1, 'white')

    // Fill with gradient
    ctx.setFillStyle(grd)
    ctx.fillRect(10, 10, 150, 80)
    ctx.draw()
  }

4.2 wxml界面代碼

<view style="padding:50rpx 50rpx 50rpx 150rpx">
  <canvas canvas-id="myCanvas"/>
  <button bindtap="oncri">繪制漸變圓形</button>
</view>
增加

喜歡就點個贊吧

版權(quán)任意

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容