微信小程序原生组件使用

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 = thisif (mode === 'driving') {MAP.directionByDriving(parmas).then(res => {if (res.status === 0) {const result = res.resultconst 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