微信小程序入门之指南针


Posted in Javascript onOctober 22, 2020

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

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

目录结构:

微信小程序入门之指南针

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

运行截图:

微信小程序入门之指南针

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 实现Json查询的方法实例
Apr 12 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
微信小程序实现拼图小游戏
Oct 22 #Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 #Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 #Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 #Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 #Javascript
jquery实现抽奖功能
Oct 22 #jQuery
Vue实现简单的留言板
Oct 23 #Javascript
You might like
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP个人网站架设连环讲(一)
2006/10/09 PHP
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
javascript读取xml
2006/11/04 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
简单的python后台管理程序
2017/04/13 Python
Python生成随机数组的方法小结
2017/04/15 Python
Django如何实现防止XSS攻击
2020/10/13 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
大学生专科学习生活的自我评价
2013/12/07 职场文书
行政管理专业求职信
2014/07/06 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
详解Python类和对象内容
2021/06/22 Python
基于Python实现射击小游戏的制作
2022/04/06 Python