微信小程序入门实例--地图

通过下面一个实例学习地图API的调用,具体结合微信小程序地图API进行学习
源码下载链接下载源码,添加到自己的小程序文件夹。查看大概效果如下:


建议删除模板自己敲一遍代码,好记性不如敲烂键盘大笑

我们通过这个实例,来认识下小程序的大概架构。请在自己的工具自行打开每个文件。

.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件

其中:

全局:

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

单页面:

如图:除了app开头的其他项均为子页面信息。页面文件夹里分别各自存放该页面的内容(包括布局页面.wxml,样式文件.wxss,配置文件json文件)。 其中pages 中的第一个页面是小程序的首页。

那么你应该会问:如何自己创建页面呢?

通过目录右边的。。。可以添加属于自己的页面哦!并添加自己需要的配置文件。又学到了一招是不是很开心。

接下来:看代码啦拉拉。。。微信API调用WIKI觉得看开发者文档是最好的学习方法,虽然有些讲的不太细致,对初学者。。。一面懵逼。。。结合实例和wiki。是不错的学习方法。

index.js脚本文件:

[plain] view plain copy
  1. //index.js  
  2. //获取应用实例  
  3. var app = getApp()  
  4. Page({  
  5.   data: {  
  6.     motto: 'Hello World111',  
  7.     userInfo: {},  
  8.     //默认未获取地址  
  9.     hasLocation:false  
  10.   },  
  11.   //事件处理函数  
  12.   bindViewTap: function() {  
  13.     wx.navigateTo({  
  14.       url: '../logs/logs'  
  15.     })  
  16.   },  
  17.   onLoad: function () {  
  18.     console.log('onLoad')  
  19.     var that = this  
  20.     //调用应用实例的方法获取全局数据  
  21.     app.getUserInfo(function(userInfo){  
  22.       //更新数据  
  23.       that.setData({  
  24.         userInfo:userInfo  
  25.       })  
  26.     })  
  27.   },  
  28.   //获取经纬度  
  29.   getLocation:function(e){  
  30.     console.log(e)  
  31.     var that=this  
  32.     wx.getLocation({  
  33.       success: function(res){  
  34.         // success  
  35.         console.log(res)  
  36.         that.setData({  
  37.           hasLocation:true,  
  38.           location:{  
  39.             longitude: res.longitude,  
  40.             latitude:res.latitude  
  41.           }  
  42.         })  
  43.       }  
  44.     })  
  45.   },  
  46.   //根据经纬度在地图上显示  
  47.   openLocation:function(e){  
  48.     console.log("openLocation"+e)  
  49.     var value=e.detail.value  
  50.     wx.openLocation({  
  51.       longitude: Number(value.longitude),  
  52.       latitude: Number(value.latitude)  
  53.     })  
  54.   },  
  55.   //选择位置位置  
  56.   chooseLocation:function(e){  
  57.     console.log(e)  
  58.     var that=this  
  59.     wx.chooseLocation({  
  60.           success: function(res){  
  61.             // success  
  62.             console.log(res)  
  63.             that.setData({  
  64.               hasLocation:true,  
  65.               location:{  
  66.                 longitude:res.longitude,  
  67.                 latitude:res.latitude  
  68.               }  
  69.             })  
  70.           },  
  71.           fail: function() {  
  72.             // fail  
  73.           },  
  74.           complete: function() {  
  75.             // complete  
  76.           }  
  77.         })  
  78.   }  
  79. })  

接下来是wxml界面布局

[plain] view plain copy
  1. <view class="wrapper">  
  2.   <view class="page-body">  
  3.     <view class="page-body-wrapper">  
  4.       <form bindsubmit="openLocation">  
  5.         <view class="page-body-form">  
  6.           <text class="page-body-form-key">经度</text>  
  7.           <input class="page-body-form-value" type="text" value="{{location.longitude}}" name="longitude" />  
  8.           <text class="page-body-form-key">维度</text>  
  9.           <input class="page-body-form-value" type="text" value="{{location.latitude}}" name="latitude" />  
  10.         </view>  
  11.         <view class="page-body-buttons">  
  12.           <button class="page-body-button" type="primary" bindtap="getLocation">获取位置</button>  
  13.           <button class="page-body-button" type="primary" formType="submit">查看位置</button>  
  14.           <button class="page-body-button" type="primary" bindtap="chooseLocation">选择位置</button>  
  15.         </view>  
  16.       </form>  
  17.     </view>  
  18.   </view>  
  19. </view>  
解析:这里用到了    <view></view>标签   <text>文字</text>   和     <button ...>按键名</butoon>标签

index.wxss文件:

[plain] view plain copy
  1. /**index.wxss**/  
  2. .userinfo {  
  3.   display: flex;  
  4.   flex-direction: column;  
  5.   align-items: center;  
  6. }  
  7.   
  8. .userinfo-avatar {  
  9.   width: 128rpx;  
  10.   height: 128rpx;  
  11.   margin: 20rpx;  
  12.   border-radius: 50%;  
  13. }  
  14.   
  15. .userinfo-nickname {  
  16.   color: #aaa;  
  17. }  
  18.   
  19. .usermotto {  
  20.   margin-top: 20px;  
  21. }  
  22.   
  23.   
  24. .wrapper{  
  25.   height: 100%;  
  26.   background:#fff;  
  27. }  
  28. .page-body-form-value{  
  29.   font-size: 14px;  
  30.   color:darkturquoise;  
  31.   font-weight: bold;  
  32.   padding-left: 15px;  
  33.   border: 1px solid rgb(72, 165, 131);  
  34.   border-radius: 4px;  
  35.   height: 30px;  
  36.   line-height: 30px;  
  37. }  
  38. .page-body-form-key{  
  39.   font-size:14px;  
  40.   padding: 10px;  
  41.   margin-top:15px;  
  42.   font-family: "Microsoft Yahei";  
  43.   font-weight: bold;  
  44.   height: 30px;  
  45.   line-height: 30px;  
  46. }  
  47. .page-body-button{  
  48.   margin-top:20px;  
  49.   line-height: 2;  
  50. }  

在index.wxml中,我们给表单中的经度和纬度输入框双向绑定经纬度的指,并给第一个按钮绑定了获取经纬度值的事件,当点击获取位置的按钮,就可以通过微信提供的接口获取我们想要的值,同时,我们也可以自己输入经纬度进行查询位置.

手机预览:(需要在新建项目的时候就输入AppID,不然不能预览)


转载:https://blog.csdn.net/qq_24397253/article/details/68488398

阅读更多
个人分类: 小程序
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭