微信小程序入门之指南针


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 URL传中文参数引发的乱码问题
Sep 02 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
js原型链原理看图说明
Jul 07 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
vue路由教程之静态路由
Sep 03 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 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
模仿OSO的论坛(五)
2006/10/09 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
python 上下文管理器使用方法小结
2017/10/10 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Python中安装easy_install的方法
2018/11/18 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
pymysql模块的操作实例
2019/12/17 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
基于Python实现粒子滤波效果
2020/12/01 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
茶叶生产计划书
2014/01/10 职场文书
初中体育教学反思
2014/01/14 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
亲情作文之母爱
2019/09/25 职场文书
使用python创建股票的时间序列可视化分析
2022/03/03 Python
python垃圾回收机制原理分析
2022/04/13 Python