微信小程序入门之指南针
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了微信小程序入门之指南针，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序入门案例——指南针，供大家参考，具体内容如下
涉及技术：获取地理位置、监听指南针角度
目录结构：
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"
}
运行截图：
为大家推荐现在关注度比较高的微信小程序教程一篇：长沙网络推广为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：微信小程序入门之绘制时钟
下一篇：微信小程序实现拼图小游戏