微信小程序怎么實(shí)現(xiàn)最簡(jiǎn)單的指南針

這篇文章主要介紹了微信小程序怎么實(shí)現(xiàn)最簡(jiǎn)單的指南針的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇微信小程序怎么實(shí)現(xiàn)最簡(jiǎn)單的指南針文章都會(huì)有所收獲，下面我們一起來看看吧。

index.wxml

<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <text class="angle_text">{{angle}}</text>
  </view>
</view>

指定了一個(gè)文本顯示區(qū)域，頁面數(shù)據(jù)為angle。

index.js

Page({
  data: {
    angle: '--',   
  },
  //事件處理函數(shù)
  onLoad: function () {
    var that = this;
    wx.onCompassChange(function (res) {
      //保留1位小數(shù)
      var directions = res.direction.toFixed(1) + '°';
        that.setData({
          angle: directions,      
      })
    });
  },
})

wx.onCompassChange用于監(jiān)聽羅盤數(shù)據(jù)，頻率：5次/秒，接口調(diào)用后會(huì)自動(dòng)開始監(jiān)聽。在指定的函數(shù)中，將方向信息轉(zhuǎn)換成1位小數(shù)字符串并設(shè)定到頁面數(shù)據(jù)angle上。

不能再簡(jiǎn)單了。

index.wxss

/**index.wxss**/
.usermotto {
  margin-top: 100px;
}

.angle_text {
  color: blue;
  font-size:25mm
}

angle_text用于指定方向顯示的顏色，字體大小。

錦上添花。

顯示結(jié)果

關(guān)于“微信小程序怎么實(shí)現(xiàn)最簡(jiǎn)單的指南針”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“微信小程序怎么實(shí)現(xiàn)最簡(jiǎn)單的指南針”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。