微信小程序原生组件使用

1、video组件使用

 <view class="live-video">
      <video id="myVideo" src="{{videoSrc}}" bindplay="onPlay" bindfullscreenchange="fullScreenChange" controls object- 
      fit="contain">        
      </video>
 </view>

data:{
 videoSrc:'https://jumeiyouhu.com/huawei_obs/product_info%2F20240509%2Fe44a7a3dfa5e459a897bf5466bbcf755.mp4',
},
 fullScreenChange(e) {
    console.log('全屏状态改变', e.detail.fullScreen);
    // 非全屏
    if (!e.detail.fullScreen) {
      videoContext.pause(); // 暂停视频播放
    }
  },
  onPlay() {
    console.log('视频开始播放');
    let videoContext = wx.createVideoContext('myVideo');
    videoContext.requestFullScreen();
  },

2、map组件使用 

这里把map封装成了一个公共组件jm-stroke

 <jm-stroke endLat="28.24689" endLng="112.962817" endLat="28.24689" startTitle="芙蓉区马王街道中电软件园" endTitle="谷山森林公园" startLat="28.142858" startLng="113.033865" cityCode="4031" />

 jm-stroke:

<view class="stroke-map">
  <map id="myMap" polyline="{{polyline}}" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"  ></map>
</view>

// components/jm-stroke/jm-stroke.js
const APP = getApp()
const MAP = require("../../utils/map")
Component({
  lifetimes: {
    attached() {
      this.onLoadMap()
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {
    endLat: {
      type: Number,
      value: null
    },
    endLng: {
      type: Number,
      value: null
    },
    startLat: {
      type: Number,
      value: null
    },
    startLng: {
      type: Number,
      value: null
    },
    cityCode: {
      type: Number,
      value: null
    },
    startTitle: {
      type: String,
      value: ''
    },
    endTitle: {
      type: String,
      value: ''
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    baseUrl: APP.globalData.baseUrl,
    markers: [],
    latitude: '',
    longitude: '',
    polyline: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onLoadMap() {
      const markers = []
      const markerStart = {
        id: 1,
        latitude: this.data.startLat,
        longitude: this.data.startLng,
        iconPath: this.data.baseUrl + '/images/start.png',
        width: 50,
        height: 50,
        callout: {
          content: this.data.startTitle,
          color: '#000',
          fontSize: 12,
          borderRadius: 10,
          bgColor: '#fff',
          padding: 10,
          display: 'ALWAYS',
          textAlign: 'center'
        }
      }
      const markerEnd = {
        id: 2,
        latitude: this.data.endLat,
        longitude: this.data.endLng,
        iconPath: this.data.baseUrl + "/images/end.png",
        width: 50,
        height: 50,
        callout: {
          content: this.data.endTitle,
          color: '#000',
          fontSize: 12,
          borderRadius: 10,
          bgColor: '#fff',
          padding: 10,
          display: 'ALWAYS',
          textAlign: 'center'
        }
      }
      markers.push(markerStart)
      markers.push(markerEnd)
      let includePoints = [{
          latitude: this.data.endLat,
          longitude: this.data.endLng
        },
        {
          latitude: this.data.startLat,
          longitude: this.data.startLng
        }
      ]
      this.setData({
        markers,
        cityCode: this.data.cityCode,
        includePoints
      })
      this.direction('driving')
      this.direction('transit')
    },
    // 路线规划
    direction(mode) {
      let parmas = {
        key: 'BEBBZ-4PZKB-6JMU6-NCJ7F-QUIH7-GQFFS',
        from: this.data.startLat + ',' + this.data.startLng,
        to: this.data.endLat + ',' + this.data.endLng,
        mode
      }
      const THAT = this
      if (mode === 'driving') {
        MAP.directionByDriving(parmas).then(res => {
          if (res.status === 0) {
            const result = res.result
            const route = result.routes[0]
            let coors = route.polyline,
              pl = [];
            let kr = 1000000;
            for (let i = 2; i < coors.length; i++) {
              coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
            }
            //将解压后的坐标放入点串数组pl中
            for (let i = 0; i < coors.length; i += 2) {
              pl.push({
                latitude: coors[i],
                longitude: coors[i + 1]
              })
            }
            THAT.setData({
              distance: (result.routes[0].distance / 1000).toString().slice(0, -2),
              latitude: pl[0].latitude,
              longitude: pl[0].longitude,
              // 绘制路线
              polyline: [{
                points: pl,
                color: '#58c16c',
                width: 6,
                borderColor: '#2f693c',
                borderWidth: 1
              }]
            })
          } else {
            wx.showToast({
              title: res.message,
              icon: 'none'
            })
          }
        })
      }
    }
  }
})

引用的.map组件方法：

const MAP = {
  // 驾车路线规划
  directionByDriving(data) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: "https://apis.map.qq.com/ws/direction/v1/driving",
        data,
        header: {
          'content-type': 'application/json' // 默认值
        },
        success: (res) => {
          resolve(res.data)
        },
        fail: reject
      })
    })
  }
}

module.exports = MAP