微信小程序开发者交流群

admin

admin

发表于 2017-07-01 13:02:47

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:Mr.ning:微信小程序初体验:获取坐标位置和根据坐标查看地址 ...
相关的资讯,希望对您有帮助。

Mr.ning:微信小程序初体验:获取坐标位置和根据坐标查看地址 ...

文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644089434根据文档地址中下载微信开发工具后,按照文档指引可以创建一个快速体验的小demo ,样例中的文件说明如下:小程序包含一个描述整体程序的 app ...

文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644089434

根据文档地址中下载微信开发工具后,按照文档指引可以创建一个快速体验的小demo ,样例中的文件说明如下:

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

app.js 小程序逻辑
app.json 小程序公共设置
app.wxss 小程序公共样式表

 

 

 

一个小程序页面由四个文件组成,分别是:

文件类型 必填 作用
js 页面逻辑
wxml 页面结构
wxss 页面样式表
json 页面配置

 

 

 

 

 

为了学习下API的调用,体验了下【获取坐标位置】和【根据坐标查看地址】两个接口,更多接口信息请查看:

https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=20161122

或者直接下载源码:https://mp.weixin.qq.com/debug/wxadoc/dev/demo/demo.zip?t=20161122

简单贴一下体验的小程序相关目录和内容:

目录结构: 未打开的文件夹就是根据文档指引快速生成的默认内容,未做修改

format-location.js中的内容:

1
2
3
4
5
6
7
8
9
10
11
function formatLocation(longitude, latitude) {
  longitude = longitude.toFixed(2)
  latitude = latitude.toFixed(2)
 
  return {
    longitude: longitude.toString().split(.),
    latitude: latitude.toString().split(.)
  }
}
 
module.exports = formatLocation

 index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
var formatLocation = require(./format-location.js)
//index.js
//获取应用实例
var app = getApp()
Page({
  getLocation: function () {
    var that = this
    wx.getLocation({
      success: function (res) {
        console.log(res)
        that.setData({
          hasLocation: true,
          location: formatLocation(res.longitude, res.latitude)
        })
      }
    })
  },
  openLocation: function (e) {
    console.log(e)
    var value = e.detail.value
    console.log(value)
    wx.openLocation({
      longitude: Number(value.longitude),
      latitude: Number(value.latitude),
      name: value.name,
      address: value.address
    })
  },
  data: {
     markers: [{
      latitude: 23.099994,
      longitude: 113.324520,
      name: T.I.T 创意园,
      desc: 我现在的位置
    }],
    covers: [{
      latitude: 23.099794,
      longitude: 113.324520,
      iconPath: ../images/car.png,
      rotate: 10
    }, {
      latitude: 23.099298,
      longitude: 113.324129,
      iconPath: ../images/car.png,
      rotate: 90
    }],
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: ../logs/logs
    })
  },
  onLoad: function () {
    console.log(onLoad)
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

 index.json

1
2
3
4
{
 debugtrue,
 navigationBarTitleText查看位置
}

 index.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
class=container>
  bindViewTap class=userinfo>
    class=userinfo-avatar src={{userInfo.avatarUrl}} background-size=cover>
    class=userinfo-nickname>{{userInfo.nickName}}
  
 class=page-body>
    class=page-body-wrapper>
      class=page-body-info>
        class=page-body-text-small>当前位置经纬度
        if={{hasLocation === false}}>
          class=page-body-text>未获取
        
        if={{hasLocation === true}}>
          class=page-body-text-location>
            E{{location.longitude[0]}}°{{location.longitude[1]}}′
            N{{location.latitude[0]}}°{{location.latitude[1]}}′
          
        
      
      class=page-body-buttons>
        class=page-body-button type=primary bindtap=getLocation>获取位置
      
    
  
class=container>
  class=page-body>
    class=page-body-wrapper>
      
openLocation>
        class=page-body-form>
          class=page-body-form-item>
            class=page-body-form-key>经度
            class=page-body-form-value  value={{location.longitude[0]}}.{{location.longitude[1]}} name=longitude>
          
          class=page-body-form-item>
            class=page-body-form-key>纬度
            class=page-body-form-value   value={{location.latitude[0]}}.{{location.latitude[1]}} name=latitude>
          
          class=page-body-form-item>
            class=page-body-form-key>位置名称
            class=page-body-form-value   value=我的位置 name=name>
          
          class=page-body-form-item style=border-bottom: none;>
            class=page-body-form-key>详细位置
            class=page-body-form-value   value= name=address>
          
        
        class=page-body-buttons>
          class=page-body-button type=primary formType=submit>查看位置
        
      
    
  

  index.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**index.wxss**/
.userinfo {
  display: flex;
  align-items: center;
}
 
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.userinfo-nickname {
  color: orangered;
}

 下面是几个运行图片:

首页:页面布局对应 index.wxml中的内容,页面中的值根据index.js获取

 

点击获取位置按钮之后:

点击查看位置:其实我是将获取到的位置 经纬度的值插入到查看位置的内容中去了

  • 因为目前小程序不支持发布,只能在本地查看,必须使用指定的微信号扫二维码之后才能预览效果(开发工具左侧--项目--预览 按钮)
  • 查看位置的时候如果是手机扫描的话,在自己手机上打开后然后点击【去这里】可以获取到手机上安装的导航app,点击后可以进行唤醒(这个应该是微信一直都有的,不过之前没怎么接触过这个接口)
  • 建议在 .json 文件中添加 debug: true 开启调试模式
  • .json 中不允许添加任何注释,否则可能会报错,请注意

好了,初体验结束,总是跟之前进行公众号开发一样,总会遇到各种坑,慢慢来就好了末尾再放一个 
微信小程序常见问题集合:

转载自:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=23


154阅读 | 0评论
你的回应