微信小程序入门之指南针
程序员文章站
2022-06-09 21:04:20
微信小程序入门案例——指南针,供大家参考,具体内容如下涉及技术:获取地理位置、监听指南针角度目录结构:pages\index\index.jspage({ /** * 页面的初始数据 */ data...
微信小程序入门案例——指南针,供大家参考,具体内容如下
涉及技术:获取地理位置、监听指南针角度
目录结构:
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&°<70){ dir='东北'; }else if(deg>=70&°<=110){ dir='东'; }else if(deg>110&°<160){ dir='东南'; }else if(deg>=160&°<=200){ dir='南'; }else if(deg>200&°<250){ dir='西南'; }else if(deg>=250&°<=290){ dir='西'; }else if(deg>290&°<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" }
运行截图:
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。