微信小程序入门案例——指南针

微信小程序入门案例——指南针

涉及技术：获取地理位置、监听指南针角度

目录结构：

pages\index\index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    rotate:0,
    degree:'未知',
    direction:'',
    lat:0,
    lon:0,
    alt:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.getLocation({
      altitude: true,
      success:function(res){
        that.setData({
          lat:res.latitude.toFixed(2),
          lon:res.longitude.toFixed(2),
          alt:res.altitude.toFixed(2)
        })
      }
    })
    wx.onCompassChange(function(res){
      let degree = res.direction.toFixed(0);
      that.getDirection(degree)
      that.setData({
        rotate:360 - degree
      })
    })
    
  },
  /**
   * 判断方向
   */
  getDirection:function(deg){
    let dir = '未知';
    if(deg>=340||deg<=20){
      dir='北';
    }else if(deg>20&&deg<70){
      dir='东北';
    }else if(deg>=70&&deg<=110){
      dir='东';
    }else if(deg>110&&deg<160){
      dir='东南';
    }else if(deg>=160&&deg<=200){
      dir='南';
    }else if(deg>200&&deg<250){
      dir='西南';
    }else if(deg>=250&&deg<=290){
      dir='西';
    }else if(deg>290&&deg<340){
      dir='西北';
    }
    this.setData({
      degree:deg,
      direction:dir
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

pages\index\index.wxml

<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}}东经{{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({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

 

app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "指南针",
    "navigationBarTextStyle":"black"
  },
  "permission":{
    "scope.userLocation":{
      "desc":"你的位置信息将用于小程序指南针的效果展示"
    }
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

 

运行截图: