微信小程序入门之指南针


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 相关文章推荐
动态加载iframe
Jun 16 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
微信小程序实现拼图小游戏
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
如何写php程序?
2006/12/08 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
Python如何操作docker redis过程解析
2020/08/10 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
教育系毕业生中文求职信范文
2013/10/06 职场文书
演讲稿开场白台词
2014/08/25 职场文书
装修活动策划方案
2014/08/27 职场文书
个人合伙协议书范本
2014/10/14 职场文书
公务员政审材料
2014/12/23 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
python 离散点图画法的实现
2022/04/01 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript