微信开发工具定位地址设置_微信开发者工具获取定位地址 - CSDN
  • 环境搭建 ...下载微信web开发者工具(挺多bug,将就用) 打开微信web开发者工具,扫码登录,新建小程序,输入APPID,勾选创建quick start项目。 工程结构可以看到工程根目录... 开发地图定位,选择位置功能我们直接修改ind

    环境搭建

    • 注册,获取APPID(没有这个不能真鸡调试)
    • 下载微信web开发者工具(挺多bug,将就用)
    • 打开微信web开发者工具,扫码登录,新建小程序,输入APPID,勾选创建quick start项目。

    工程结构

    可以看到工程根目录中有个app.js,这里可以定义全局变量,通过getApp()获取。
    项目中有了一些示例,已经有了获取用户信息的方法等。

    开发地图定位,选择位置功能

    我们直接修改index页面来做这个功能。

    准备

    • 新建imgs目录,加入2个图标(ic_location和ic_position),用于标记当前位置,和地图中央位置。
    • ic_location
    • ic_position

    添加定位功能

    修改app.js,加入定位功能,获取当前位置。

    //app.js
    App({
      onLaunch: function () {
        //调用API从本地缓存中获取数据
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)
      }
      ,getUserInfo:function(cb){
        var that = this
        if(this.globalData.userInfo){
          typeof cb == "function" && cb(this.globalData.userInfo)
        }else{
          //调用登录接口
          wx.login({
            success: function () {
              wx.getUserInfo({
                success: function (res) {
                  that.globalData.userInfo = res.userInfo
                  typeof cb == "function" && cb(that.globalData.userInfo)
                }
              })
            }
          })
        }
      }
      //get locationInfo
      ,getLocationInfo: function(cb){
        var that = this;
        if(this.globalData.locationInfo){
            cb(this.globalData.locationInfo)
        }else{
            wx.getLocation({
              type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
              success: function(res){
                that.globalData.locationInfo = res;
                cb(that.globalData.locationInfo)
              },
              fail: function() {
                // fail
              },
              complete: function() {
                // complete
              }
            })
        }
      }
    
      ,globalData:{
        userInfo:null
        ,locationInfo: null
      }
    })

    地图控件布局

    修改pages/index/index.wxml文件,添加map标签,如下

    
    <map id="map4select"
     longitude="{{longitude}}" latitude="{{latitude}}" 
     markers="{{markers}}"
     scale="20" 
     style="width:{{map_width}}px;height:{{map_height}}px"
     bindregionchange="regionchange"
     controls="{{controls}}">
    </map>
    • 需要给地图指定一个id,后面可以通过id获取地图的上下文。
    • 监听bindregionchange事件,地图变化的时候可以监听到。
    • 地图的大小不要写死,动态设置,我这里打算设置为宽高都是屏幕宽度。
    • controls是固定在map组件上面的。一开始我想用image替代,但是设置z-index也不能在地图上面,毕竟不是H5开发。

    逻辑代码编写

    编辑index.js

    var app = getApp()
    
    Page({
        data:{
          map_width: 380
          ,map_height: 380
        }
        //show current position
        ,onLoad: function(){
        var that = this;
        // 获取定位,并把位置标示出来
        app.getLocationInfo(function(locationInfo){
            console.log('map',locationInfo);
            that.setData({
              longitude: locationInfo.longitude
              ,latitude: locationInfo.latitude
              ,markers:[
                {
                id: 0
                ,iconPath: "../../imgs/ic_position.png"
                ,longitude: locationInfo.longitude
                ,latitude: locationInfo.latitude
                ,width: 30
                ,height: 30
                }
              ]
            })
        })
    
        //set the width and height
        // 动态设置map的宽和高
        wx.getSystemInfo({
          success: function(res) {
            console.log('getSystemInfo');
            console.log(res.windowWidth);
            that.setData({
               map_width: res.windowWidth
              ,map_height: res.windowWidth
              ,controls: [{
                id: 1,
                iconPath: '../../imgs/ic_location.png',
                position: {
                  left: res.windowWidth/2 - 8,
                  top: res.windowWidth/2 - 16,
                  width: 30,
                  height: 30
                },
                clickable: true
              }]
            })
          }
        })
    
      }
      //获取中间点的经纬度,并mark出来
      ,getLngLat: function(){
          var that = this;
          this.mapCtx = wx.createMapContext("map4select");
          this.mapCtx.getCenterLocation({
            success: function(res){
    
                that.setData({
                longitude: res.longitude
                ,latitude: res.latitude
                ,markers:[
                  {
                  id: 0
                  ,iconPath: "../../imgs/ic_position.png"
                  ,longitude: res.longitude
                  ,latitude: res.latitude
                  ,width: 30
                  ,height: 30
                  }
                ]
              })
    
            }
          })
      }
      ,regionchange(e) {
        // 地图发生变化的时候,获取中间点,也就是用户选择的位置
          if(e.type == 'end'){
              this.getLngLat()
          }
      }
      ,markertap(e) {
        console.log(e)
      }
    })

    展示

    这样,就OK啦,用户可以看到自己的定位,如果觉得有偏差,可以移动地图,把中央点放到自己认为的准确位置上。
    这里写图片描述
    这里写图片描述
    这里写图片描述

    展开全文
  • 微信开发者工具是必不可少的,因为有些微信封装的方法只有微信开发者工具上才能使用,还有一个重要的原因就是,我们提交我们的代码审核必须通过该工具来提交,所有要做微信小程序和小游戏的开发,这个工具的学习是必...

    如果你要开发自己的微信小程序或者小游戏,微信开发者工具是必不可少的,因为有些微信封装的方法只有微信开发者工具上才能使用,还有一个重要的原因就是,我们提交我们的代码审核必须通过该工具来提交,所有要做微信小程序和小游戏的开发,这个工具的学习是必不可少的。

    老实说该工具不管是对久经沙场的老人还是萌新来说都是非常简单的,能很快上手,并且还是中文的哦,下面我们看看整体界面

    image

    整个编辑器大题分为四块,模拟器编辑器调试器工具栏,下面我们每个模块来独立讲解

    一、模拟器

    模拟器是工具为了让我们的代码达到所见即所得的效果,我们编写的代码效果能很快的在左边的界面上显示出去,做过web开发的小伙伴应该也很清楚,浏览器上按下F12也可以达到类似的效果,其实微信开发工具本身就是对浏览器进行了一定程度的封装,我们使用起来也相对亲切,模拟器还可以模拟不同手机,百分比、网络状态等,极大的方便了我们的开发和测试

    image

    二、编辑器

    编辑器是每个开发工具必不可少的一部分,功能也大同小异,微信开发工具上有新增WXML、WXSS等文件的快捷方式,还是比较方便的,微信小程序采用的是ES6的语法,这个工具的提示确实有些差了,很多时候都不能提示出来,所以有很多人现在会采用WebStorm(前端开发最强神器)编写后在到微信开发工具上提交,当然也会有些坑,后续将专门讲解,不过微信开发工具目前更新速度还是很快的,希望能快点改善智能提示的问题

    三、调试器

    第一眼看到这个调试器有没有一点眼熟,它和浏览器按下F12后几乎是一样的,但是微信工具也做了一些简化和新增,我们主要看看几个不同和比较有用的三个功能

    image

    1、Storage

    Storage可以理解成一个本地存储数据库,可以通过wx.setStorageSync(‘logs’, logs)等方法将我们需要的数据直接存储和取出,有时在开发的过程中是非常有用的,后续将介绍具体使用场景

    2、AppData

    AppData中主要存储了我们在页面上所有用到的变量,这个对于我们开发和调试来说是非常重要的,能通过它快速看到每个值的赋值情况,快速定位问题

    3、Audits

    这个是一个程序性能的分析工具,可以在开发和开发完成后,测试一下,看看我们的程序在那块还需要进行优化,非常方便

    三、工具栏

    工具栏提供了我们一些常用的操作,在此我们也只将一下常用到的,和一些有用的,主要有以下几点

    image

    1、预览

    点击预览按钮后,我们可以用我们的后台绑定的微信扫描,在真机上看具体的效果,因为工具毕竟是模拟器,在模拟器上没问题,而在手机上却存在问题的情况是常有的,所以开发完一个功能后,我们有必要在真机上看看效果

    2、真机调试

    如果在“预览”中发现在真机上有问题,我们可以点击真机调试,我们的手机上也能看到调试信息,非常方便的让我们进行调试真机问题

    3、清缓存

    有时候我们可能用到Storage或者修改了页面和样式等,但是在渲染的时候还是使用的原来的代码,此时清缓存就是非常必要的操作了

    4、上传

    上传是在我们将我们的小程序开发完成后,点击上传,就会将我们的代码提交给微信官方审核了,只有审核通过后,其他用户才能在微信中搜索和使用我们自己开发的小程序

    5、详情

    image

    详情中可以设置项目的一下信息,主要关注开发基础库的选择,版本不要过低或过高,教低的版本会让很多方法无法使用,太高的版本会让很多微信版本较低的用户无法使用你的小程序(当然你可以做兼容处理);开发使用本地的服务时,需要勾选上“不校验本地域名…”,这样小程序就可以调用本地的服务了

    展开全文
  • 一般浏览器里鼠标在元素上右键点击审查元素或检查元素即可快速打开开发者工具定位到该元素,但在微信开发者工具中不支持, 解决方法 点击 elements左边的 小鼠标 图片,然后在主页面点击元素即可快速定位 ...

    一般浏览器里鼠标在元素上右键点击审查元素或检查元素即可快速打开开发者工具并定位到该元素,但在微信开发者工具中不支持,

    解决方法 点击 elements左边的 小鼠标 图片,然后在主页面点击元素即可快速定位

    展开全文
  • 这篇文章教大家怎么修改,查找和设置微信小程序的开发者工具的快捷键,首先要用到的工具微信开发者工具,可以去微信小程序官网下载最新版本的开发者工具,接下来就是开发者工具的快捷键的修改,查找和设置了(这里...

    这篇文章教大家怎么修改,查找和设置微信小程序的开发者工具的快捷键,首先要用到的工具是微信开发者工具,可以去微信小程序官网下载最新版本的开发者工具,接下来就是开发者工具的快捷键的修改,查找和设置了(这里我是因为最早的时候用的编辑器是eclipse,所以我这里快捷键修改的都是eclipse的快捷键)

    1. 快捷键的查找:打开微信开发者工具,左上角有个设置,点击展开里面有个快捷键设置,如图:在这里插入图片描述
      点击快捷键设置进入快捷键设置页面,如图:在这里插入图片描述
      找到快捷键类型,选择编辑器,这里面的快捷键都是我们编辑器的快捷键,然后你就可以找到一些对应的功能的快捷键,如图:在这里插入图片描述
      点击进去之后,你会发现在快捷键类型和快捷键功能之间有个editor这个编辑框,这个就是相当于搜索功能,如果你想要更改一些你自己熟悉的代码的方式,就可以直接搜索对应的功能名称或者是对应的快捷键,比如删除行,代码建议或者ctrl+D,ctrl+space(空格),如图:
      在这里插入图片描述
      这是搜索功能名字的:在这里插入图片描述
      这是搜索快捷键的(引号要用英文引号):
      在这里插入图片描述
    2. 快捷键的修改和设置:如上所示,当你找到你自己要修改的快捷键的时候,选中这个快捷键,然后右键会出现一个菜单,找到更改键绑定,点击更改键绑定,然后输入自己习惯的快捷键,按Enter就可以进行修改了,如图:在这里插入图片描述
      如果你输入的快捷键跟开发者工具本来的快捷键有冲突的时候,他会提醒你的,如果没有冲突的时候,他是不会提醒你的,如图:在这里插入图片描述
      要注意的是:改你的快捷键的时候,不是让你输入ctrl,而是要你自己按下对应的快捷键,比如ctrl+D,你就要先按住ctrl键,然后在按D键,这样才是修改你的快捷键。
    3. 我的快捷键都是改成跟eclipse的差不多一样,代码提示,开发者工具里面叫触发建议,我改成了alt+/,删除行我改成了ctrl+D,格式化代码,开发者工具里面叫格式化文档,我改成了ctrl+alt+L,这就是我自己所说的微信开发者工具的快捷键的查找和修改,大家可以按照自己的喜好来修改快捷键和一些其他快捷键的操作。如果哪里有写的不好的地方,请大家见谅!
    展开全文
  • Mpvue的简单介绍以及开发时踩到的一些坑 微信开发者工具不支持打开vue文件,因为微信开发者工具只是一个用户代理(即显示网站用),类似chorme浏览器一样。 由于官方的微信开发者工具编辑mpvue不是很友好,所以...
  • 最近项目组在开发一款运行在微信小游戏环境的斗地主游戏,项目的第一个版本收尾阶段突然出现了一个奇怪的bug,因为之前开发阶段的测试都是在浏览器以及微信开发工具上的模拟器进行的测试,所以直到临近项目上线才...
  • 微信开发者工具-HBuilderX

    千次阅读 2019-07-09 17:40:18
    HBuilder作为专业的开发工具,近期也提供了对微信小程序的开发支持: 强大的代码提示 高效的字处理 保存代码时自动刷新微信模拟器。 下文简单讲解使用步骤。 新建微信小程序 在HBuilderX中新建项目时,支持...
  • 微信开发 - 获取用户地理位置定位

    万次阅读 2018-02-01 19:49:42
    那么,我们怎么去获取用户的地理位置定位呢?  可以采用百度地图接口获取用户的地理位置定位。要使用该服务,你得先注册成为百度地图开发者。http://lbsyun.baidu.com/ 百度地图开放平台地址  注册成为开发者后...
  • 用HBuilderX代替微信开发者工具

    千次阅读 2020-03-03 09:34:21
    ????摘要 今天分享下 —— HBuilderX代替微信开发者工具 的一些基本...HBuilderX运行后,点击工具-设置-运行配置-小程序运行配置 ,配置微信小程序开发工具安装路径。例如:D:/Program Files (x86)/Tencent/微信w...
  • 微信小程序开发工具使用简介

    千次阅读 2019-04-30 00:58:17
    为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。 使用公众号网页调试,开发者可以调试...
  • 如上图所示为开发者工具错误,刷新或者忽略即可
  • 微信web开发者工具

    2020-07-29 14:20:17
    微信web官方开发小程序的开发者工具!.json 配置文件 .js 逻辑文件 .wxss 样式文件 .wxml 布局文件 pages存放首页的信息 logs存放日志文件的信息 app.js存放全局共享的逻辑文件 app.json存放全局共享的配置文件 app...
  • 微信开发者工具点击错位问题

    千次阅读 2019-03-14 22:58:17
    在win10系统下,使用微信开发者工具可能会出现点击错位问题,总是点不到地方,这个很好解决,只需要打开电脑设置,将显示大小调成100%即可。但是在设置完成之后,有时需要重启微信开发者工具才有效哦 ...
  • 微信开发者工具中,快速定位小程序样式问题,像浏览器中调试CSS一样,具体步骤如下:
  • 程序在Hbuilder中正常编译,毫无报错,但是在微信开发工具的控制台内报错 然后在hbuilder重新打包编译,问题消失,但是待继续编写保存后又会初出现。 找了许久,看官方论坛也在讨论这个问题持续半年也没有结果,...
  • 微信开发者工具可以获取地址而手机上不能获取地址 原因: 未进行 wx.config 的配置; 解决方法: 传入对应的签名信息,对 wx.config 进行配置 参考文档 ...
  • 微信公众平台开发定位导航功能

    千次阅读 2014-02-10 13:26:09
    微信公众平台开发定位导航功能是会员日常生活中不可缺少的查询导航工具。它给会员提供了更为快捷和全面的服务,会员可以通过我们的官方微信导航到自己想要去的地方,方便会员的出行。它可以提高会员对我们官方微信...
  • 2、微信开发之通过代理调试本地项目,该文章详细讲解了如何调试本地项目,使用工具的详细安装与配置。3、微信开发之使用java获取签名signature(贴源码,附工程),该文详细讲些了如何获取签名,代码十分详细。对于...
  • 问题是这样的,今天微信小程序开发中遇到点击button按钮没反应,要点按钮左上方一点点才能点击到 input输入框也是 上网查了好久才知道这是因为win10的屏幕的缩放造成的 问题解决了,哈哈哈 ...
  • 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、...
1 2 3 4 5 ... 20
收藏数 26,892
精华内容 10,756
关键字:

微信开发工具定位地址设置