微信小程序入门之指南针


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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
javascript的几种写法总结
Sep 30 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
JS数组扁平化(flat)方法总结详解
Jun 24 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
收音机的保养
2021/03/01 无线电
PHP控制网页过期时间的代码
2008/09/28 PHP
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
强制设为首页代码
2006/06/19 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
python发腾讯微博代码分享
2014/01/10 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Python函数中不定长参数的写法
2019/02/13 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
三个儿子教学反思
2014/02/03 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
珍爱生命主题班会
2015/08/13 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python
vue+echarts实现多条折线图
2022/03/21 Vue.js
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js