微信小程序入门之指南针

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

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

目录结构:

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&&deg<70){
  dir='东北';
 }else if(deg>=70&&deg<=110){
  dir='东';
 }else if(deg>110&&deg<160){
  dir='东南';
 }else if(deg>=160&&deg<=200){
  dir='南';
 }else if(deg>200&&deg<250){
  dir='西南';
 }else if(deg>=250&&deg<=290){
  dir='西';
 }else if(deg>290&&deg<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"
}

运行截图:

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

(0)

相关推荐

  • vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解

    在开发过程中发现 vue-baidu-map 封装的 BmPolyline 折线组件不能顺利绘制出带箭头的纹理. 原因是 BmPolyline 文档中虽然有 icons 属性,但是对应的源文件中并没有props接收 icons 最初的开发思路: 根据 vue-baidu-map 折线组件的官方文档,在vue中通过Prop,为 BmPolyline 组件传递一个 icons 数组,数组的元素必须为 IconSequence 类的实例对象. 而 IconSequence 类的实例对象则是在 Baid

  • 微信小程序入门之指南针

    微信小程序入门案例--指南针,供大家参考,具体内容如下 涉及技术:获取地理位置.监听指南针角度 目录结构: pages\index\index.js Page({ /** * 页面的初始数据 */ data: { rotate:0, degree:'未知', direction:'', lat:0, lon:0, alt:0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; wx.getLocatio

  • 微信小程序入门之广告条实现方法示例

    本文实例讲述了微信小程序入门之广告条实现方法.分享给大家供大家参考,具体如下: 在小程序页面,有时候需要弄一条广告条进去,作用可以用来提醒客户端,更加醒目,这种实现很容易,要用到组件swiper,navigator 先上效果图: wxml: <swiper class="swiper_container" autoplay="true" interval="2000" circular="true"> <bl

  • 详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

    (一) 准备工作 (1) 登录注册 注册账号:这就不谈了,只需要注意使用一个全新的邮箱,别之前注册过公众号小程序等就可以了 https://mp.weixin.qq.com/wxopen/waregister?action=step1 登录账号:通过邮箱密码登录,亦或者绑定微信后使用扫码也是可以的 https://mp.weixin.qq.com/ (2) 获取 APPID 登录后,在开发入门的阶段有一个比较重要的内容需要了解,那就是 APPID,很好理解,就是这个小程序的唯一标识,就类似我们的

  • 微信小程序入门之绘制时钟

    微信小程序入门案例--绘制时钟,供大家参考,具体内容如下 涉及内容:canvas.每秒刷新页面.绘制 目录结构: pages\index\index.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.ctx = wx.createCanvasContext('clockCanvas') this.drawClock() var that = this th

  • 微信小程序入门教程

    微信小程序(下面简称小程序)近些月来刷爆了我们这些程序猿们的圈子,可以说无数的程序猿磨刀霍霍,准备在这快蛋糕上杀出一片天地.那么作为前端开发人员,小程序开发和我们平常的开发有什么不同的地方呢?让我们一起来走进门里看看. 我们从下面几个方向来了解一下小程序的开发: 1.开发工具 2.布局差异 3.JS差异 4.其它 序 先看一张小程序初始化的目录: 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page.一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:app.js.ap

  • 详解微信小程序入门五: wxml文件引用、模版、生命周期

    实例一: include方式引用header.wxml文件 文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用. 微信小程序里面,是包含引用功能的--include.import.这两个引用文件的标签,使用基本差不多,这里先说一下include. 微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到引用位置,所以我们需要重新对其渲染. 实例说明 这里将默认创建的用户头像信息提取出

  • 制作微信小程序的小白简单入门教程

    目录 一.小程序是什么? 二.小程序的优势 三.知识准备 四.开发准备 五. hello world 示例 六.WXML 标签语言 七.小程序的项目结构 八.项目配置文件 app.json 小程序已经成为国内前端的一个重要业务,跟 Web 和手机 App 有着同等的重要性.小程序开发者供不应求,市场招聘需求极其旺盛,企业都抢着要. 尽管如此,小程序的教程却很缺,要么是不够系统,要么就是跳跃性太大,很多关键的地方寥寥数语,初学者摸不着头脑.我自己学的时候,就苦于找不到好一点的教程. 本文就是我的小

  • 微信小程序开发入门基础教程

    微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow

  • 使用微信小程序开发前端【快速入门】

    前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好

  • 手把手带你入门微信小程序新框架Kbone的使用

    Kbone 框架 前些天在微信上收到了微信开发者公众号的文章推送<揭开微信小程序Kbone的神秘面纱>,心想:微信小程序有新框架了?抱着学习的态度点进去看了一眼,看过之后觉得这框架也太宠开发者了吧,不愧是微信团队出品. 原来这个框架早在去年就已经发布了,看完只恨自己没有早点知道消息开始学习这个框架.我写本文的目的也是为了跟个风,想要让更多的人能够知道这个框架,感受它的便利,希望好学的你可以停下脚步看看~ Kbone 是什么? 看到这里我也不多说了,简单介绍一下 Kbone 是什么.用官方高大上

随机推荐