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

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

//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World111',
userInfo: {},
//默认未获取地址
hasLocation:false
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
},
//获取经纬度
getLocation:function(e){
console.log(e)
var that=this
wx.getLocation({
success: function(res){
// success
console.log(res)
that.setData({
hasLocation:true,
location:{
longitude: res.longitude,
latitude:res.latitude
}
})
}
})
},
//根据经纬度在地图上显示
openLocation:function(e){
console.log("openLocation"+e)
var value=e.detail.value
wx.openLocation({
longitude: Number(value.longitude),
latitude: Number(value.latitude)
})
},
//选择位置位置
chooseLocation:function(e){
console.log(e)
var that=this
wx.chooseLocation({
success: function(res){
// success
console.log(res)
that.setData({
hasLocation:true,
location:{
longitude:res.longitude,
latitude:res.latitude
}
})
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
})

接下来是wxml界面布局

[plain] view plain copy

<view class="wrapper">
<view class="page-body">
<view class="page-body-wrapper">
<form bindsubmit="openLocation">
<view class="page-body-form">
<text class="page-body-form-key">经度</text>
<input class="page-body-form-value" type="text" value="{{location.longitude}}" name="longitude" />
<text class="page-body-form-key">维度</text>
<input class="page-body-form-value" type="text" value="{{location.latitude}}" name="latitude" />
</view>
<view class="page-body-buttons">
<button class="page-body-button" type="primary" bindtap="getLocation">获取位置</button>
<button class="page-body-button" type="primary" formType="submit">查看位置</button>
<button class="page-body-button" type="primary" bindtap="chooseLocation">选择位置</button>
</view>
</form>
</view>
</view>
</view>

解析：这里用到了 <view></view>标签 <text>文字</text> 和 <button ...>按键名</butoon>标签

index.wxss文件：

[plain] view plain copy

/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 20px;
}
.wrapper{
height: 100%;
background:#fff;
}
.page-body-form-value{
font-size: 14px;
color:darkturquoise;
font-weight: bold;
padding-left: 15px;
border: 1px solid rgb(72, 165, 131);
border-radius: 4px;
height: 30px;
line-height: 30px;
}
.page-body-form-key{
font-size:14px;
padding: 10px;
margin-top:15px;
font-family: "Microsoft Yahei";
font-weight: bold;
height: 30px;
line-height: 30px;
}
.page-body-button{
margin-top:20px;
line-height: 2;
}

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

手机预览：（需要在新建项目的时候就输入AppID，不然不能预览）

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