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

浅浅的花香味﹌ 2022-12-14 03:59 277阅读 0赞

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

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

> ### 目录结构： ###
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI_size_16_color_FFFFFF_t_70][]

> ### 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"
>     }

> ### 运行截图: ###
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI_size_16_color_FFFFFF_t_70 1][]
> 
>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI_size_16_color_FFFFFF_t_70]: /images/20221123/37c8a22e0bf14985977b909ddcc0dd99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI_size_16_color_FFFFFF_t_70 1]: /images/20221123/fda74a45ac6a44549ab3d885b469501b.png