微信小程序入門案例——指南針

涉及技術：獲取地理位置、監(jiān)聽指南針角度

目錄結構：

pages\index\index.js

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    rotate:0,
    degree:'未知',
    direction:'',
    lat:0,
    lon:0,
    alt:0
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
 ><view class="container">
  <image src="/images/1.jpg" mode="widthFix" style="transform:rotate({{rotate}}deg);"></image>
  <view class="status">
    <text class="bigTxt">{{degree}}°{{direction}}</text>
    <text class="smallTxt">北緯{{lat}}東經(jīng){{lon}}</text>
    <text class="smallTxt">海拔{{alt}}米</text>
  </view>
</view>

pages\index\index.wxss

.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: #A46248;
}
image{
  width: 80%;
}
.status{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bigTxt{
  font-size: 30pt;
  margin: 15rpx;
}
.smallTxt{
  font-size: 20pt;
  margin: 15rpx;
}

app.js

App({

  /**
   * 當小程序初始化完成時，會觸發(fā)>