From abd8348b158afe9effc680a23955f7dd3fddfc46 Mon Sep 17 00:00:00 2001
From: Anne_LXM <liuxiaomei@dcloud.io>
Date: Mon, 20 May 2024 21:06:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5uni1=20web=E7=AB=AFapi?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  21 +
 pages/API/inner-audio/inner-audio.uvue        | 124 +++++
 .../API/make-phone-call/make-phone-call.uvue  |  51 ++
 pages/API/map/map.uvue                        | 458 ++++++++++++++++++
 pages/tabBar/API.uvue                         |  34 +-
 5 files changed, 675 insertions(+), 13 deletions(-)
 create mode 100644 pages/API/inner-audio/inner-audio.uvue
 create mode 100644 pages/API/make-phone-call/make-phone-call.uvue
 create mode 100644 pages/API/map/map.uvue

diff --git a/pages.json b/pages.json
index f9950687..05effe7b 100644
--- a/pages.json
+++ b/pages.json
@@ -1280,6 +1280,27 @@
         "navigationBarTitleText" : "editor"
       }
     },
+    {
+      "path" : "pages/API/map/map",
+      "style" :
+      {
+        "navigationBarTitleText" : "map"
+      }
+    },
+    {
+      "path" : "pages/API/make-phone-call/make-phone-call",
+      "style" :
+      {
+        "navigationBarTitleText" : "make-phone-call"
+      }
+    },
+    {
+      "path" : "pages/API/inner-audio/inner-audio",
+      "style" :
+      {
+        "navigationBarTitleText" : "inner-audio"
+      }
+    },
     // #endif
     // #ifdef APP
     {
diff --git a/pages/API/inner-audio/inner-audio.uvue b/pages/API/inner-audio/inner-audio.uvue
new file mode 100644
index 00000000..69c6b1c2
--- /dev/null
+++ b/pages/API/inner-audio/inner-audio.uvue
@@ -0,0 +1,124 @@
+<template>
+	<view class="uni-padding-wrap">
+		<page-head title="audio"></page-head>
+		<view class="uni-common-mt">
+			<slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
+		</view>
+		<!-- <view class="uni-common-mt play-time-area">
+			<text class="current-time">{{currentTime}}</text>
+			<text class="duration">{{duration}}</text>
+		</view> -->
+		<view class="play-button-area">
+			<image class="icon-play" :src="playImage" @click="play"></image>
+		</view>
+	</view>
+</template>
+<script lang="uts">
+	const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
+	export default {
+		data() {
+			return {
+				title: "innerAudioContext",
+				isPlaying: false,
+				isPlayEnd: false,
+				currentTime: 0,
+				duration: 100,
+        _isChanging:false,
+        _audioContext: null as InnerAudioContext | null
+			}
+		},
+		computed: {
+			position() {
+				return this.isPlayEnd ? 0 : this.currentTime;
+			},
+			playImage() {
+				return this.isPlaying ? "/static/pause.png" : "/static/play.png"
+			}
+		},
+		onLoad() {
+			this.createAudio();
+		},
+		onUnload() {
+			if (this._audioContext != null && this.isPlaying) {
+				this.stop();
+			}
+		},
+		methods: {
+			createAudio() {
+				var innerAudioContext = this._audioContext = uni.createInnerAudioContext();
+				innerAudioContext.autoplay = false;
+				innerAudioContext.src = audioUrl;
+				innerAudioContext.onPlay(() => {
+					console.log('开始播放');
+				});
+				innerAudioContext.onTimeUpdate((e) => {
+					if (this._isChanging === true) {
+						return;
+					}
+					this.currentTime = innerAudioContext.currentTime || 0;
+					this.duration = innerAudioContext.duration || 0;
+				});
+				innerAudioContext.onEnded(() => {
+					this.currentTime = 0;
+					this.isPlaying = false;
+					this.isPlayEnd = true;
+				});
+				innerAudioContext.onError((res) => {
+					this.isPlaying = false;
+					console.log(res.errMsg);
+					console.log(res.errCode);
+				});
+				return innerAudioContext;
+			},
+			onchanging() {
+				this._isChanging = true;
+			},
+			onchange(e) {
+				console.log(e.detail.value);
+				console.log(typeof e.detail.value);
+				this._audioContext!.seek(e.detail.value);
+				this._isChanging = false;
+			},
+			play() {
+				if (this.isPlaying) {
+					this.pause();
+					return;
+				}
+				this.isPlaying = true;
+				this._audioContext!.play();
+				this.isPlayEnd = false;
+			},
+			pause() {
+				this._audioContext!.pause();
+				this.isPlaying = false;
+			},
+			stop() {
+				this._audioContext!.stop();
+				this.isPlaying = false;
+			}
+		}
+	}
+</script>
+<style>
+	.play-time-area {
+		display: flex;
+		flex-direction: row;
+		margin-top: 20px;
+	}
+
+	.duration {
+		margin-left: auto;
+	}
+
+	.play-button-area {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		margin-top: 50px;
+	}
+
+	.icon-play {
+		width: 60px;
+		height: 60px;
+	}
+</style>
diff --git a/pages/API/make-phone-call/make-phone-call.uvue b/pages/API/make-phone-call/make-phone-call.uvue
new file mode 100644
index 00000000..33b784a9
--- /dev/null
+++ b/pages/API/make-phone-call/make-phone-call.uvue
@@ -0,0 +1,51 @@
+<template>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-hello-text uni-center">请在下方输入电话号码</view>
+			<input class="input uni-common-mt" type="number" name="input" @input="bindInput" />
+			<view class="uni-btn-v uni-common-mt">
+				<button @tap="makePhoneCall" type="primary" :disabled="disabled">拨打</button>
+			</view>
+		</view>
+	</view>
+</template>
+<script lang="uts">
+	export default {
+		data() {
+			return {
+				title: 'makePhoneCall',
+				disabled: true,
+        inputValue:''
+			}
+		},
+		methods: {
+			bindInput: function (e : UniInputEvent) {
+				this.inputValue = e.detail.value
+				if (this.inputValue.length > 0) {
+					this.disabled = false
+				} else {
+					this.disabled = true
+				}
+			},
+			makePhoneCall: function () {
+				uni.makePhoneCall({
+					phoneNumber: this.inputValue,
+					success: () => {
+						console.log("成功拨打电话")
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.input {
+		height: 119rpx;
+		line-height: 119rpx;
+		font-size: 78rpx;
+		border-bottom: 1rpx solid #E2E2E2;
+		text-align:center;
+	}
+</style>
diff --git a/pages/API/map/map.uvue b/pages/API/map/map.uvue
new file mode 100644
index 00000000..f4dbf29e
--- /dev/null
+++ b/pages/API/map/map.uvue
@@ -0,0 +1,458 @@
+<template>
+  <view class="content">
+    <map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"
+      :latitude="location.latitude" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
+      :show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
+      :enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
+      :enable-traffic="enableTraffic" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons"
+      :include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap"
+      @callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map>
+    <scroll-view class="scrollview" scroll-y="true">
+
+      <button class="button" @click="changeScale">changeScale</button>
+      <button class="button" @click="addMarkers">addMarkers</button>
+      <button class="button" @click="addPolyline">addPolyline</button>
+      <button class="button" @click="addPolygons">addPolygons</button>
+      <button class="button" @click="addCircles">addCircles</button>
+      <button class="button" @click="includePoint">includePoints</button>
+      <button class="button" @click="handleGetCenterLocation">getCenterLocation</button>
+      <button class="button" @click="handleGetRegion">getRegion</button>
+      <button class="button" @click="handleTranslateMarker">translateMarker</button>
+
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="uts">
+  type Anchor = {
+    x : number,
+    y : number
+  }
+
+  type Callout = {
+    content : string,
+    color : string,
+    fontSize : number,
+    borderRadius : number,
+    borderWidth : number,
+    borderColor : string,
+    bgColor : string,
+    padding : string,
+    display : string
+  }
+
+  type Markers = {
+    id : string | number,
+    latitude : number,
+    longitude : number,
+    title : string
+    zIndex : string,
+    iconPath : string,
+    rotate ?: number,
+    width : number,
+    height : number,
+    anchor : Anchor,
+    callout : Callout
+  }
+
+  type Points = {
+    latitude : number,
+    longitude : number
+  }
+
+  type Polyline = {
+    points : Points[],
+    color : string,
+    width : number,
+    dottedLine : boolean,
+    arrowLine : boolean,
+    borderColor : string,
+    borderWidth : number
+  }
+
+  type Polygons = {
+    points : Points[];
+    fillColor : string;
+    strokeWidth : number;
+    strokeColor : string;
+    zIndex : number;
+  }
+
+  type Circles = {
+    latitude : number;
+    longitude : number;
+    radius : number;
+    strokeWidth : number;
+    color : string;
+    fillColor : string;
+  }
+
+  const testMarkers = [{
+    id: 0,
+    latitude: 39.989631,
+    longitude: 116.481018,
+    title: '方恒国际 阜通东大街6号',
+    zIndex: '1',
+    iconPath: '../../../static/location.png',
+    rotate: 0,
+    width: 20,
+    height: 20,
+    anchor: {
+      x: 0.5,
+      y: 1
+    },
+    callout: {
+      content: '方恒国际 阜通东大街6号',
+      color: '#00BFFF',
+      fontSize: 10,
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: '#333300',
+      bgColor: '#CCFF99',
+      padding: '5',
+      display: 'ALWAYS'
+    }
+  },
+  {
+    id: 1,
+    latitude: 39.9086920000,
+    longitude: 116.3974770000,
+    title: '天安门',
+    zIndex: '1',
+    iconPath: '../../../static/location.png',
+    width: 40,
+    height: 40,
+    anchor: {
+      x: 0.5,
+      y: 1
+    },
+    callout: {
+      content: '首都北京\n天安门',
+      color: '#00BFFF',
+      fontSize: 12,
+      borderRadius: 2,
+      borderWidth: 0,
+      borderColor: '#333300',
+      bgColor: '#CCFF11',
+      padding: '1',
+      display: 'ALWAYS'
+    }
+  }
+  ];
+
+  const testPolyline = [{
+    points: [{
+      latitude: 39.925539,
+      longitude: 116.279037
+    },
+    {
+      latitude: 39.925539,
+      longitude: 116.520285
+    }],
+    color: '#FFCCFF',
+    width: 7,
+    dottedLine: true,
+    arrowLine: true,
+    borderColor: '#000000',
+    borderWidth: 2
+  },
+  {
+    points: [{
+      latitude: 39.938698,
+      longitude: 116.275177
+    },
+    {
+      latitude: 39.966069,
+      longitude: 116.289253
+    },
+    {
+      latitude: 39.944226,
+      longitude: 116.306076
+    },
+    {
+      latitude: 39.966069,
+      longitude: 116.322899
+    },
+    {
+      latitude: 39.938698,
+      longitude: 116.336975
+    }],
+    color: '#CCFFFF',
+    width: 5,
+    dottedLine: true,
+    arrowLine: true,
+    borderColor: '#CC0000',
+    borderWidth: 3
+  }
+  ];
+
+  const testPolygons = [{
+    points: [{
+      latitude: 39.781892,
+      longitude: 116.293413
+    },
+    {
+      latitude: 39.787600,
+      longitude: 116.391842
+    },
+    {
+      latitude: 39.733187,
+      longitude: 116.417932
+    },
+    {
+      latitude: 39.704653,
+      longitude: 116.338255
+    }],
+    fillColor: '#FFCCFF',
+    strokeWidth: 3,
+    strokeColor: '#CC99CC',
+    zIndex: 11
+  },
+  {
+    points: [{
+      latitude: 39.887600,
+      longitude: 116.518932
+    },
+    {
+      latitude: 39.781892,
+      longitude: 116.518932
+    },
+    {
+      latitude: 39.781892,
+      longitude: 116.428932
+    },
+    {
+      latitude: 39.887600,
+      longitude: 116.428932
+    }
+    ],
+    fillColor: '#CCFFFF',
+    strokeWidth: 5,
+    strokeColor: '#CC0000',
+    zIndex: 3
+  }
+  ];
+
+  const testCircles = [{
+    latitude: 39.996441,
+    longitude: 116.411146,
+    radius: 15000,
+    strokeWidth: 5,
+    color: '#CCFFFF',
+    fillColor: '#CC0000'
+  },
+  {
+    latitude: 40.096441,
+    longitude: 116.511146,
+    radius: 12000,
+    strokeWidth: 3,
+    color: '#CCFFFF',
+    fillColor: '#FFCCFF'
+  },
+  {
+    latitude: 39.896441,
+    longitude: 116.311146,
+    radius: 9000,
+    strokeWidth: 1,
+    color: '#CCFFFF',
+    fillColor: '#CC0000'
+  }
+  ];
+
+  const testIncludePoints = [{
+    latitude: 39.989631,
+    longitude: 116.481018,
+  },
+  {
+    latitude: 39.9086920000,
+    longitude: 116.3974770000,
+  }
+  ];
+
+  export default {
+    data() {
+      return {
+        location: {
+          longitude: 116.3974770000,
+          latitude: 39.9086920000
+        },
+        controls: [{
+          id: 1,
+          position: {
+            left: 5,
+            top: 180,
+            width: 30,
+            height: 30
+          },
+          iconPath: '../../../static/uni.png',
+          clickable: true
+        }],
+        showLocation: false,
+        scale: 13,
+        showCompass: true,
+        enable3D: true,
+        enableOverlooking: true,
+        enableZoom: true,
+        enableScroll: true,
+        enableRotate: true,
+        enableSatellite: false,
+        enableTraffic: false,
+        polyline: [] as Polyline[],
+        markers: [] as Markers[],
+        polygons: [] as Polygons[],
+        circles: [] as Circles[],
+        includePoints: [] as Points[],
+        rotate: 0,
+        skew: 0,
+        map: null as MapContext | null
+      }
+    },
+    onReady() {
+      this.map = uni.createMapContext("map1", this);
+    },
+    methods: {
+      changeScale() {
+        this.scale = this.scale == 9 ? 15 : 9;
+      },
+      enableThreeD(e) {
+        this.enable3D = e.detail.value;
+      },
+      changeShowCompass(e) {
+        this.showCompass = e.detail.value;
+      },
+      changeEnableOverlooking(e) {
+        this.enableOverlooking = e.detail.value;
+      },
+      changeEnableZoom(e) {
+        this.enableZoom = e.detail.value;
+      },
+      changeEnableScroll(e) {
+        this.enableScroll = e.detail.value;
+      },
+      changeEnableRotate(e) {
+        this.enableRotate = e.detail.value;
+      },
+      changeEnableSatellite(e) {
+        this.enableSatellite = e.detail.value;
+      },
+      changeEnableTraffic(e) {
+        this.enableTraffic = e.detail.value;
+      },
+      addMarkers() {
+        this.markers = testMarkers;
+      },
+      addPolyline() {
+        this.polyline = testPolyline;
+      },
+
+      addPolygons() {
+        this.polygons = testPolygons;
+      },
+
+      addCircles() {
+        this.circles = testCircles;
+      },
+      includePoint() {
+        this.includePoints = testIncludePoints;
+      },
+      handleGetCenterLocation() {
+        this.map!.getCenterLocation({
+          success: ret => {
+            console.log(JSON.stringify(ret));
+            uni.showModal({
+              content: JSON.stringify(ret)
+            })
+          }
+        })
+      },
+      handleGetRegion() {
+        this.map!.getRegion({
+          success: ret => {
+            console.log(JSON.stringify(ret));
+            uni.showModal({
+              content: JSON.stringify(ret)
+            })
+          }
+        })
+      },
+
+      handleTranslateMarker() {
+        this.map!.translateMarker({
+          markerId: 1,
+          destination: {
+            latitude: 39.989631,
+            longitude: 116.481018
+          },
+          duration: 2000,
+          success: ret => {
+            console.log(JSON.stringify(ret));
+          }
+        });
+      },
+      maptap(e) {
+        uni.showModal({
+          content: JSON.stringify(e)
+        })
+      },
+      onmarkertap(e) {
+        uni.showModal({
+          content: JSON.stringify(e)
+        })
+      },
+      oncontroltap(e) {
+        uni.showModal({
+          content: JSON.stringify(e)
+        })
+      },
+      oncallouttap(e) {
+        uni.showModal({
+          content: JSON.stringify(e)
+        })
+      },
+      onupdated(e) {
+        console.log(JSON.stringify(e))
+      },
+      onregionchange(e) {
+        console.log(JSON.stringify(e));
+      },
+      onpoitap(e) {
+        uni.showModal({
+          content: JSON.stringify(e)
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  .content {
+    flex: 1;
+  }
+
+  .map {
+    width: 100%;
+    height: 250px;
+    background-color: #f0f0f0;
+  }
+
+  .scrollview {
+    flex: 1;
+    padding: 10px;
+  }
+
+  .list-item {
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding: 5px 0px;
+  }
+
+  .list-text {
+    flex: 1;
+  }
+
+  .button {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+</style>
diff --git a/pages/tabBar/API.uvue b/pages/tabBar/API.uvue
index c88e37cf..19e49761 100644
--- a/pages/tabBar/API.uvue
+++ b/pages/tabBar/API.uvue
@@ -280,11 +280,14 @@
                 name: '安装Apk',
                 url: 'install-apk'
               },
+              // #endif
+              // #ifdef WEB
+              {
+                name: "打电话",
+                url: "make-phone-call",
+              },
               // #endif
-              /* {
-                name: "打电话",
-                url: "make-phone-call",
-              },
+              /*
               {
                 name: "震动",
                 url: "vibrate",
@@ -387,11 +390,14 @@
                 name: "压缩视频",
                 url: 'compress-video'
               },
+              // #endif
+              // #ifdef WEB
+              {
+                name: "音频",
+                url: "inner-audio",
+              },
               // #endif
-              /* {
-                name: "音频",
-                url: "inner-audio",
-              },
+              /*
               {
                 name: "背景音频",
                 url: "background-audio",
@@ -414,7 +420,13 @@
               {
                 name: '获取当前位置',
                 url: 'get-location',
-              },
+              },
+              // #ifdef WEB
+              {
+                name: "地图控制",
+                url: "map",
+              },
+              // #endif
               /* {
                 name: "使用地图查看位置",
                 url: "open-location",
@@ -423,10 +435,6 @@
                 name: "使用地图选择位置",
                 url: "choose-location",
               },
-              {
-                name: "地图控制",
-                url: "map",
-              },
               {
                 name: "地图搜索",
                 url: "map-search",
-- 
GitLab