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

通过下面一个实例学习地图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