微信小程序开发之OFO共享单车——序幕

1.准备工作
微信小程序当然属于腾讯大佬的（给大佬递茶）：微信小程序开发者工具下载，腾讯开放了小程序个人开发平台，只需要一个微信号就可以成为小程序开发者了。
2.小程序页面
打开小程序开发者工具，用微信扫码登录，创建一个默认的小程序。界面是酱的：

pages文件夹下存放着小程序所有的业务页面；
index文件夹就是一个页面，index.wxml是页面的结构文件，类似html。
index.wxss是页面的样式，其实就是css；index.js是页面的逻辑，数据请求与渲染都是都在这个页面完成。
logs文件夹存放着小程序开发日志，目前暂时用不到。
utils.js可以编写自己的JavaScript插件也可以引入第三方插件。
app.js处理全局的一些逻辑，比如定义全局变量存放获取的用户信息，这样每个页面都可以获取用户信息。
app.json 是全局配置文件，比如设置标题栏的背景色等。
app.wxss 存放页面的公共样式，如果多个页面需要用到同一样式，就可以写在这里。
调试按钮用来进行调试，功能和chrome dev调试工具差不多。
项目按钮显示预览二维码，用于真机调试。必须真机调试测试代码，自带的调试工具有时候会出bug
3.创建页面结构
上一节已经分析了默认的文件结构以及它们的功能，现在我们要创建ofo小程序所需要的页面。
删除pages下默认的index文件夹，logs/utils文件夹可选择性删除

.创建页面结构
上一节已经分析了默认的文件结构以及它们的功能，现在我们要创建ofo小程序所需要的页面。
删除pages下默认的index文件夹，logs/utils文件夹可选择性删除
在与pages同级目录下创建images文件夹，存放页面需要用到的图标，下载图标
本小程序不需要在app.js里面编写内容，可以先注释这里面的代码
在app.json里，删掉默认代码，编写如下代码(注：app.json文件里不能有任何注释，这里是为了描述页面功能更直观)：
{
"pages":[
"pages/index/index", // 地图页
"pages/warn/index",// 车辆报障页
"pages/scanresult/index", // 扫码成功页
"pages/billing/index", // 开始计费页
"pages/my/index", // 账户页
"pages/wallet/index", // 钱包页
"pages/charge/index", // 充值页
"pages/logs/logs" // 日志页
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#b9dd08", // 标题栏背景色
"navigationBarTitleText": "ofo 共享单车",// 标题栏文字
"navigationBarTextStyle":"black" // 标题栏文字样式

"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#b9dd08", // 标题栏背景色
"navigationBarTitleText": "ofo 共享单车",// 标题栏文字
"navigationBarTextStyle":"black" // 标题栏文字样式
}
}
在app.wxss里面。我们先把页面的通用样式给出来（这一步我是在所有页面写完后，发现有些页面有着相同的样式，再把公共样式抽离出来放在app.wxss里面的。）
/**app.wxss**/
.container{
background-color: #f2f2f2;
height: 100vh;
}
.title{
background-color: #f2f2f2;
padding: 30rpx 0 30rpx 50rpx;
font-size: 28rpx;
color: #000;
}
.tapbar{
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
padding: 40rpx;
}
.btn-charge{
width: 90%;
background-color: #b9dd08;
margin: 40rpx auto 30rpx;
text-align: center;
}

font-size: 28rpx;
color: #000;
}
.tapbar{
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
padding: 40rpx;
}
.btn-charge{
width: 90%;
background-color: #b9dd08;
margin: 40rpx auto 30rpx;
text-align: center;
}
保存后，你的pages文件夹下就是这样的界面了（在app.json下创建路径会自

4.编写地图首页 (index文件夹)
先来看一下地图首页效果图

页面分析：
整页显示地图，宽高占手机窗口的100%地图之上有五个按钮图标和多个黄色ofo标记：定位按钮，立即用车按钮，举报按钮，黄色头像按钮和位于地图中心的定位标记。
要在页面显示地图，我们需要在index.wxml引入地图组件：
<!--index.wxml-->
<view class="container">
<map id="ofoMap"
latitude="{{latitude}}"// 纬度
longitude="{{longitude}}"// 经度
scale="{{scale}}"// 缩放级别
show-location/> // 显示带有方向的小圆点
</view>

</view>
{{...}} 里面是模板数据，待会会在index.js里的data对象里面定义。
初始化模板数据，在index.js的data对象里添加如下代码：
//index.js
Page({
data: {
scale: 18, // 缩放级别，默认18，数值在0~18之间
latitude: 0, // 给个默认值
longitude: 0 // 给个默认值
},
onLoad: function(options){
// 1.页面初始化 options为页面跳转所带来的参数
},
onReady: function(){
// 页面渲染完成

onReady: function(){
// 页面渲染完成
},
onShow: function(){
// 页面显示
},
onHide: function(){
// 页面隐藏
},
onUnload: function(){
// 页面关闭
这样我们的地图就默认中心位置为经度 0，纬度0。当然可能在开发者工具里显示不出来(有bug)。莫慌！因为这不是我们想要的，我们想要的是我们自己的位置，所以得先获取我们当前所在位置的经纬度，在index.js里的onLoad方法里添加如下代码：
onLoad: function(options){
// 1.页面初始化 options为页面跳转所带来的参数

// 2.调用wx.getLocation系统API,获取并设置当前位置经纬度
wx.getLocation({
type: "gcj02", // 坐标系类型
// 获取经纬度成功回调
success: (res) => { // es6 箭头函数，可以解绑当前作用域的this指向，使得下面的this可以绑定到Page对象
this.setData({// 为data对象里定义的经纬度默认值设置成获取到的真实经纬度，这样就可以在地图上显示我们的真实位置
longitude: res.longitude,
latitude: res.latitude
})
}
});

tips：res是一参数对象，它是由调用的对应API传过来的，如果你想知道res的具体值，可以在成功回调函数里打印：console.log(res)，然后在控制台输出，看看它包含什么内容。在调用一个陌生API的时候可以用这种方法查看返回的对象数据，对处理逻辑很有帮助。