on-compass-change.wxml

<import src="/common/head.wxml" />
<import src="/common/foot.wxml" />

<view class="container page" data-weui-theme="{{theme}}">
  <template is="head" data="{{title: 'onCompassChange'}}"/>

  <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>

  <template is="foot" />
</view>