微信小程序入門之指南針
更新時間：2020年10月22日 15:30:13 作者：yunfeather
這篇文章主要為大家詳細(xì)介紹了微信小程序入門之指南針，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
微信小程序入門案例——指南針，供大家參考，具體內(nèi)容如下
涉及技術(shù)：獲取地理位置、監(jiān)聽指南針角度
目錄結(jié)構(gòu)：
pages\index\index.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
rotate:0,
degree:'未知',
direction:'',
lat:0,
lon:0,
alt:0
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
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
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
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}}東經(jīng){{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({
/**
* 當(dāng)小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）
*/
onLaunch: function () {
},
/**
* 當(dāng)小程序啟動，或從后臺進(jìn)入前臺顯示，會觸發(fā) onShow
*/
onShow: function (options) {
},
/**
* 當(dāng)小程序從前臺進(jìn)入后臺，會觸發(fā) onHide
*/
onHide: function () {
},
/**
* 當(dāng)小程序發(fā)生腳本錯誤，或者 api 調(diào)用失敗時，會觸發(fā) 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"
}
運行截圖：
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
在Vue項目中實現(xiàn)數(shù)據(jù)加密,首先需要安裝SM2加密庫,如js-sm2或sm-crypto,通過npm或yarn進(jìn)行安裝后,在Vue組件或文件中引入該庫,并使用其提供的加密、解密功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Bootstrap入門書籍之（四）菜單、按鈕及導(dǎo)航
這篇文章主要介紹了Bootstrap入門書籍之（四）菜單、按鈕及導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-02-02
JavaScript和jQuery獲取input框的絕對位置實現(xiàn)方法
下面小編就為大家?guī)硪黄狫avaScript和jQuery獲取input框的絕對位置實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
好的朋友經(jīng)常需要彈出信息，這個功能不錯2008-09-09
在Bootstrap開發(fā)框架中使用dataTable直接錄入表格行數(shù)據(jù)的方法
這篇文章主要介紹了在Bootstrap開發(fā)框架中使用dataTable直接錄入表格行數(shù)據(jù)的方法，這個可以提高數(shù)據(jù)的錄入方便，特別是在一些簡單業(yè)務(wù)的明細(xì)數(shù)據(jù)的時候，看起來會比彈出窗口錄入方便一些，非常具有實用價值，需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)雪花飄落效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
JS層移支示例代碼...2007-03-03
JS模塊與命名空間的介紹，需要的朋友可以參考一下
2013-03-03 
javascript對select標(biāo)簽的控制(option選項/select)
html中的select標(biāo)簽，也是asp.net中的asp:DropDownList控件,接下來介紹javascript對select標(biāo)簽的控制,感興趣的朋友可以了解下，或許本文對你有所幫助
2013-01-01