同步uni1 web端api示例（剪切板、罗盘）

pages.json

@@ -1322,6 +1322,20 @@
         "navigationBarTitleText" : "inner-audio-path"
       }
     },
+    {
+      "path" : "pages/API/clipboard/clipboard",
+      "style" :
+      {
+        "navigationBarTitleText" : "clipboard"
+      }
+    },
+    {
+      "path" : "pages/API/on-compass-change/on-compass-change",
+      "style" :
+      {
+        "navigationBarTitleText" : "on-compass-change"
+      }
+    },
     // #endif
     // #ifdef APP
     {

pages/API/clipboard/clipboard.uvue

+<template>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-padding-wrap">
+			<view class="uni-title">请输入剪贴板内容</view>
+			<view class="uni-list">
+				<view class="uni-list-cell">
+					<input class="uni-input" type="text" placeholder="请输入剪贴板内容" :value="data" @input="dataChange"/>
+				</view>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setClipboard">存储数据</button>
+				<button @tap="getClipboard">读取数据</button>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				title: 'get/setClipboardData',
+				data: ''
+			}
+		},
+		methods: {
+			dataChange: function (e) {
+				this.data = e.detail.value
+			},
+			getClipboard: function () {
+				uni.getClipboardData({
+					success: (res) => {
+						console.log(res.data);
+						const content = res.data ? '剪贴板内容为:' + res.data : '剪贴板暂无内容';
+						uni.showModal({
+							content,
+							title: '读取剪贴板',
+							showCancel: false
+						})
+					},
+					fail: () => {
+						uni.showModal({
+							content: '读取剪贴板失败!',
+							showCancel: false
+						})
+					}
+				});
+			},
+			setClipboard: function () {
+				if (this.data.length === 0) {
+					uni.showModal({
+						title: '设置剪贴板失败',
+						content: '内容不能为空',
+						showCancel: false
+					})
+				} else {
+					uni.setClipboardData({
+						data: this.data,
+						success: () => {
+							// 成功处理
+							uni.showToast({
+								title: '设置剪贴板成功',
+								icon: "success",
+								mask: !1
+							})
+						},
+						fail: () => {
+							// 失败处理
+							uni.showToast({
+								title: '储存数据失败!',
+								icon: "none",
+								mask: !1
+							})
+						}
+					});
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
+
+

pages/API/on-compass-change/on-compass-change.uvue

+<template>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-padding-wrap">
+			<view class="uni-hello-text uni-center" style="padding-bottom:50rpx;">
+				旋转手机即可获取方位信息
+			</view>
+			<view class="direction">
+				<view class="bg-compass-line"></view>
+				<image class="bg-compass" src="../../../static/compass.png" :style="'transform: rotate('+direction+'deg)'"></image>
+				<view class="direction-value">
+					<text>{{direction}}</text>
+					<text class="direction-degree">o</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				title: 'onCompassChange',
+				direction: 0
+			}
+		},
+		onReady: function () {
+			uni.onCompassChange((res) => {
+        console.log('onCompassChange', res)
+				this.direction = res.direction
+			})
+		},
+		onUnload() {
+			uni.stopCompass();
+			this.direction = 0;
+		}
+	}
+</script>
+
+<style>
+	.direction {
+		position: relative;
+		margin-top: 70rpx;
+		display: flex;
+		width: 540rpx;
+		height: 540rpx;
+		align-items: center;
+		justify-content: center;
+		margin:0 auto;
+	}
+
+	.direction-value {
+		position: relative;
+		font-size: 200rpx;
+		color: #353535;
+		line-height: 1;
+		z-index: 1;
+	}
+
+	.direction-degree {
+		position: absolute;
+		top: 0;
+		right: -40rpx;
+		font-size: 60rpx;
+	}
+
+	.bg-compass {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 540rpx;
+		height: 540rpx;
+		transition: .1s;
+	}
+
+	.bg-compass-line {
+		position: absolute;
+		left: 267rpx;
+		top: -10rpx;
+		width: 6rpx;
+		height: 56rpx;
+		background-color: #1AAD19;
+		border-radius: 999rpx;
+		z-index: 1;
+	}
+</style>

pages/tabBar/API.uvue

@@ -292,6 +292,14 @@
               {
                 name: "打电话",
                 url: "make-phone-call",
+              },
+              {
+                name: "剪贴板",
+                url: "clipboard",
+              },
+              {
+                name: "监听罗盘数据",
+                url: "on-compass-change",
               },
               // #endif
               /*
@@ -307,10 +315,6 @@
                 name: "扫码",
                 url: "scan-code",
               },
-              {
-                name: "剪贴板",
-                url: "clipboard",
-              },
               {
                 name: "屏幕亮度",
                 url: "brightness",
@@ -331,10 +335,6 @@
                 name: "监听加速度传感器",
                 url: "on-accelerometer-change",
               },
-              {
-                name: "监听罗盘数据",
-                url: "on-compass-change",
-              },
               {
                 name: "监听距离传感器",
                 url: "/platforms/app-plus/proximity/proximity",