init

xhs-mini-demos/component-case/on-compass-change/on-compass-change.css

@@ -0,0 +1,47 @@
+.direction {
+  position: relative;
+  margin-top: 35px;
+  display: flex;
+  width: 520px;
+  height: 520px;
+  align-items: center;
+  justify-content: center;
+}
+.direction-value {
+  position: relative;
+  font-size: 100px;
+  color: #353535;
+  line-height: 1;
+  z-index: 1;
+}
+.direction-degree {
+  position: absolute;
+  top: 0;
+  right: -20px;
+  font-size: 30px;
+}
+.bg-compass{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 520px;
+  height: 520px;
+  transition: .1s;
+}
+.bg-compass-line{
+  position: absolute;
+  left: 134px;
+  top: -5px;
+  width: 3px;
+  height: 28px;
+  background-color: #1AAD19;
+  border-radius: 500px;
+  z-index: 1;
+}
+.controls{
+  margin-top: 35px;
+}
+.controls button{
+  margin-left: 10px;
+  float: left;
+}

xhs-mini-demos/component-case/on-compass-change/on-compass-change.js

@@ -0,0 +1,47 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: '监听罗盘数据',
+      path: 'packageAPI/pages/on-compass-change/on-compass-change',
+    };
+  },
+
+  data: {
+    enabled: true,
+    direction: 0,
+  },
+  onReady() {
+    const that = this;
+    xhs.onCompassChange(res => {
+      that.setData({
+        direction: parseInt(res.direction, 10),
+      });
+    });
+  },
+  startCompass() {
+    if (this.data.enabled) {
+      return;
+    }
+    const that = this;
+    xhs.startCompass({
+      success() {
+        that.setData({
+          enabled: true,
+        });
+      },
+    });
+  },
+  stopCompass() {
+    if (!this.data.enabled) {
+      return;
+    }
+    const that = this;
+    xhs.stopCompass({
+      success() {
+        that.setData({
+          enabled: false,
+        });
+      },
+    });
+  },
+});

xhs-mini-demos/component-case/on-compass-change/on-compass-change.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "监听罗盘数据"
+}

xhs-mini-demos/component-case/on-compass-change/on-compass-change.xhsml

@@ -0,0 +1,19 @@
+<view class="container">
+  <view class="page-body">
+    <view class="page-section page-section_center">
+      <text class="page-body-text">旋转手机即可获取方位信息</text>
+      <view class="direction">
+        <view class="bg-compass-line"></view>
+        <image class="bg-compass" src="compass.png" style="transform: rotate({{direction}}deg)"></image>
+        <view class="direction-value">
+          <text>{{direction}}</text>
+          <text class="direction-degree">o</text>
+        </view>
+      </view>
+      <view class="controls">
+        <button bindtap="startCompass" disabled="{{enabled}}">开始监听</button>
+        <button bindtap="stopCompass" disabled="{{!enabled}}">停止监听</button>
+      </view>
+    </view>
+  </view>
+</view>