网站首页> 前端开发> JavaScript> 微信小程序入门之指南针

微信小程序入门之指南针

时间:2020-10-22 21:40:24 阅读:6848次 来源:互联网

微信小程序入门案例——指南针,供大家参考,具体内容如下

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

目录结构:

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

运行截图:

本文地址:https://www.manongw.com/article/79.html

文章来源:转载于CSDN,转载网址为https://blog.csdn.net/yunfeather/article/details/109046583

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了JS pushlet XMLAdapter适配器用法案例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:00
  • 本文主要介绍了使用TS来编写express服务器的方法步骤的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-30 09:26
  • 本文主要介绍了JSON stringify方法原理及实例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-24 10:11
  • 本文主要介绍了详解JavaScript 高阶函数的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:47
  • 本文主要介绍了详解webpack的clean-webpack-plugin插件报错的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:06
  • 本文主要介绍了JavaScript setTimeout()基本用法有哪些的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-04 22:05
  • 本文主要介绍了原生JS实现弹幕效果的简单操作指南的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-10 16:04
  • 本文主要介绍了JS实现简单贪吃蛇小游戏的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-29 08:59
  • 本文主要介绍了JavaScript实现串行请求的示例代码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:25
  • 本文主要介绍了JavaScript 实现轮播图特效的示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 16:59