微信小程序

小程序OFO首页

1.编写准备

pages文件夹下存放着小程序所有的业务页面;

index文件夹就是一个页面,index.wxml是页面的结构文件,类似html。

index.wxss是页面的样式,其实就是css;index.js是页面的逻辑,数据请求与渲染都是都在这个页面完成。

logs文件夹存放着小程序开发日志,目前暂时用不到。

utils.js可以编写自己的JavaScript插件。

app.js处理全局的一些逻辑,比如定义全局变量存放获取的用户信息,这样每个页面都可以获取用户信息。

app.json 是全局配置文件,比如设置标题栏的背景色等。

app.wxss 存放页面的公共样式,如果多个页面需要用到同一样式,就可以写在这里。

项目按钮显示预览二维码,用于真机调试。必须真机调试测试代码

1.创建页面结构

上一节已经分析了默认的文件结构以及它们的功能,现在我们要创建ofo小程序所需要的页面。

  • 1.删除pages下默认的index文件夹,logs/utils文件夹可选择性删除

  • 2.在与pages同级目录下创建images文件夹,存放页面需要用到的图标,https://pan.baidu.com/s/1b7g8KQ

  • 3.本小程序不需要在app.js里面编写内容,可以注释这里面的代码

  • 4.在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" // 标题栏文字样式
  }
}
  • 5.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;
}

保存后,你的pages文件夹下就是这样的界面了(在app.json下创建路径会自动创建文件夹,贼方便)


2.编写地图首页 (index文件夹)

页面分析:

1.整页显示地图,宽高占手机窗口的100%;
2.地图之上有五个按钮图标和多个黄色ofo标记:定位按钮,立即用车按钮,举报按钮,黄色头像按钮和位于地图中心的标记。

2.1 要在整页显示地图,我们可以在index.wxml引入地图组件:

<!--index.wxml-->
<view class="container">
  <map id="ofoMap" 
    latitude="{{latitude}}"  // 纬度
    longitude="{{longitude}}"  // 经度
    scale="{{scale}}"  // 缩放级别
    show-location/>    // 显示带有方向的小圆点
</view>

{{...}} 里面是数据变量,由js里的data对象定义。

2.2 初始化数据,在index.js的data对象里添加如下代码:

//index.js
Page({
  data: {
    scale: 18, // 缩放级别,默认18,数值在0~18之间
    latitude: 0, // 给个默认值
    longitude: 0 // 给个默认值
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }

这样我们的地图就默认中心位置为经度 0,纬度0。当然可能在开发者工具里显示不出来,莫慌!这不是我们想要的,我们想要的是我们自己的位置,所以得先获取我们当前所在位置的经纬度,在index.js里的onLoad方法里添加如下代码:

onLoad: function(options){
  // 页面初始化 options为页面跳转所带来的参数

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

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

我们在地图上显示了我们的真实位置,但没有移动到中心位置,wx.moveToLocation()函数可以把当前位置移动到地图中心。修改index.js:

//index.js
var app = getApp()
Page({
  data: {
    scale: 18,
    latitude: 0,
    longitude: 0
  },
// 页面加载
  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
        })
      }
    });
}
// 页面显示
  onShow: function(){
    // 1.创建地图上下文,移动当前位置到地图中心
    this.mapCtx = wx.createMapContext("ofoMap"); // 地图组件的id
    this.movetoPosition()
  },
// 定位函数,移动位置到地图中心
  movetoPosition: function(){
    this.mapCtx.moveToLocation();
  }
})

这样,页面一显示就在地图中心显示当前位置。

2.3 满屏显示地图,在index.wxss里编写样式:

/**index.wxss**/
.container{
  position: relative;
  width: 100%; // 宽度占满设备
  height: 100vh; // 高度占满设备
}
#ofoMap{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

保存刷新,整个屏幕就都显示地图了>_<

2.4 添加地图上的按钮

其实这里的按钮不是真正的按钮,它们属于地图上的控件属性,并且不随着地图移动。这里有一个坑:

地图组件属于微信原生组件,层级最高,任何元素都不能在地图之上显示,即无论设置多大z-index都无法显示。所以,要想在地图上添加按钮来满足需求,就要用到地图控件属性。更多地图控件属性说明看这里

要添加地图控件,先在地图组件里声明controls="...":

<!--index.wxml-->
<view class="container">
  <map id="ofoMap" 
    latitude="{{latitude}}"  // 纬度
    longitude="{{longitude}}"  // 经度
    scale="{{scale}}"  // 缩放级别
    controls="{{controls}}" // 地图控件数组,多个控件存放在数组里
    show-location/>    // 显示带有方向的小圆点
</view>

然后在index.js设置controls(代码注释还是挺多的)

//index.js
var app = getApp()
Page({
  data: {
    scale: 18,
    latitude: 0,
    longitude: 0
  },
// 页面加载
  onLoad: function(options){
  // 1.页面初始化 options为页面跳转所带来的参数

  // 2.调用wx.getLocation系统API,获取并设置当前位置经纬度
    ...已省略

  // 3.设置地图控件的位置及大小,通过设备宽高定位
    wx.getSystemInfo({ // 系统API,获取系统信息,比如设备宽高
      success: (res) => {
        this.setData({
          // 定义控件数组,可以在data对象初始化为[],也可以不初始化,取决于是否需要更好的阅读
          controls: [{
            id: 1, // 给控件定义唯一id
            iconPath: '/images/location.png', // 控件图标
            position: { // 控件位置
              left: 20, // 单位px
              top: res.windowHeight - 80, // 根据设备高度设置top值,可以做到在不同设备上效果一致
              width: 50, // 控件宽度/px
              height: 50 // 控件高度/px
            },
            clickable: true // 是否可点击,默认为true,可点击
          },
          {
            id: 2,
            iconPath: '/images/use.png',
            position: {
              left: res.windowWidth/2 - 45,
              top: res.windowHeight - 100,
              width: 90,
              height: 90
            },
            clickable: true
          },
          {
            id: 3,
            iconPath: '/images/warn.png',
            position: {
              left: res.windowWidth - 70,
              top: res.windowHeight - 80,
              width: 50,
              height: 50
            },
            clickable: true
          },
          {
            id: 4,
            iconPath: '/images/marker.png',
            position: {
              left: res.windowWidth/2 - 11,
              top: res.windowHeight/2 - 45,
              width: 22,
              height: 45
            },
            clickable: false
          },
          {
            id: 5,
            iconPath: '/images/avatar.png',
            position: {
              left: res.windowWidth - 68,
              top: res.windowHeight - 155,
              width: 45,
              height: 45
            },
            clickable: true
          }]
        })
      }
    });
}
// 页面显示
  onShow: function(){
    ...
  },
// 定位函数,移动位置到地图中心
  movetoPosition: function(){
    this.mapCtx.moveToLocation();
  }
})

2.5 为地图控件绑定事件

现在地图上总共有四个图标可点击(地图中心的标记控件不需要点击),我们需要为每个控件绑定不同的事件以实现不同的功能:

1.点击定位控件,触发定位当前位置到地图中心,因为用户在拖动地图,有时需要查看当前所在位置。

2.点击立即用车控件,调用微信内置扫码功能。然后获取开锁密码。

3.点击举报按钮,前往维修报障页面。

4.点击用户头像按钮,前往登录页面进行登录,查看余额,充值等操作

为控件绑定事件,需要在地图控件进行声明:bindcontroltap

<!--index.wxml-->
<view class="container">
  <map id="ofoMap" 
    latitude="{{latitude}}"  // 纬度
    longitude="{{longitude}}"  // 经度
    scale="{{scale}}"  // 缩放级别
    controls="{{controls}}" // 地图控件数组,多个控件存放在数组里
    bindcontroltap="bindcontroltap" // 控件点击事件
    show-location/>    // 显示带有方向的小圆点
</view>

注意: bindcontroltap事件会响应所有控件的点击,所以,我们需要根据控件id来区分控件,然后响应不同的事件

在index.js添加bindcontroltap事件:

//index.js
var app = getApp()
Page({
  data: {
    scale: 18,
    latitude: 0,
    longitude: 0
  },
// 页面加载
  onLoad: function(options){
  // 1.获取定时器,用于判断是否已经在计费
    this.timer = options.timer;

  // 2.调用wx.getLocation系统API,获取并设置当前位置经纬度
    ...已省略

  // 3.设置地图控件的位置及大小,通过设备宽高定位
    ...已省略
}
// 地图控件点击事件
  bindcontroltap: function(e){
    // 判断点击的是哪个控件 e.controlId代表控件的id,在页面加载时的第3步设置的id
    switch(e.controlId){
      // 点击定位控件
      case 1: this.movetoPosition();
        break;
      // 点击立即用车,判断当前是否正在计费,此处只需要知道是调用扫码,后面会讲到this.timer是怎么来的
      case 2: if(this.timer === "" || this.timer === undefined){
          // 没有在计费就扫码
          wx.scanCode({
            success: (res) => {
              // 正在获取密码通知
              wx.showLoading({
                title: '正在获取密码',
                mask: true
              })
              // 请求服务器获取密码和车号
              wx.request({
                url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/password',
                data: {},
                method: 'GET', 
                success: function(res){
                  // 请求密码成功隐藏等待框
                  wx.hideLoading();
                  // 携带密码和车号跳转到密码页
                  wx.redirectTo({
                    url: '../scanresult/index?password=' + res.data.data.password + '&number=' + res.data.data.number,
                    success: function(res){
                      wx.showToast({
                        title: '获取密码成功',
                        duration: 1000
                      })
                    }
                  })           
                }
              })
            }
          })
        // 当前已经在计费就回退到计费页
        }else{
          wx.navigateBack({
            delta: 1
          })
        }  
        break;
      // 点击保障控件,跳转到报障页
      case 3: wx.navigateTo({
          url: '../warn/index'
        });
        break;
      // 点击头像控件,跳转到个人中心
      case 5: wx.navigateTo({
          url: '../my/index'
        });
        break; 
      default: break;
    }
  },
// 页面显示
  onShow: function(){
    ...已省略
  },
// 定位函数,移动位置到地图中心
  movetoPosition: function(){
    this.mapCtx.moveToLocation();
  }
})

这里用到的API:
扫码API: wx.scanCode({})
显示加载框: wx.showLoading()
隐藏加载框: wx.hideLoading()
显示提示框: wx.showToast()
隐藏提示框: wx.hideToast()
向服务器发送请求:wx.request({})
关闭当前页面,跳转到指定页面: wx.redirectTo({})
保留当前页面,跳转到指定页面: wx.navigateTo({})
回退到指定页面: wx.naivgateBack({})

2.6 在地图上添加单车标记makers和位置连线,还是在地图组件里先声明:

<!--index.wxml-->
<view class="container">
  <map id="ofoMap" 
    latitude="{{latitude}}"  // 纬度
    longitude="{{longitude}}"  // 经度
    scale="{{scale}}"  // 缩放级别
    controls="{{controls}}" // 地图控件数组,多个控件存放在数组里
    bindcontroltap="bindcontroltap" // 控件点击事件
    polyline="{{polyline}}"  // 位置连线
    markers="{{markers}}" // 标记数组
    bindmarkertap="bindmarkertap" // 标记点击事件
    show-location/>    // 显示带有方向的小圆点
</view>

然后在index.js里定义:

//index.js
var app = getApp()
Page({
  data: {
    scale: 18,
    latitude: 0,
    longitude: 0
  },
// 页面加载
  onLoad: function(options){
  // 1.获取定时器,用于判断是否已经在计费
    this.timer = options.timer;

  // 2.调用wx.getLocation系统API,获取并设置当前位置经纬度
    ...已省略

  // 3.设置地图控件的位置及大小,通过设备宽高定位
    ...已省略

  // 4.请求服务器,显示附近的单车,用marker标记
    wx.request({
      url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/biyclePosition',
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: (res) => {
          this.setData({
            markers: res.data.data
          })
      }
    })
}
// 地图控件点击事件
  bindcontroltap: function(e){
    ...已省略
  },
// 地图标记点击事件,连接用户位置和点击的单车位置
  bindmarkertap: function(e){
    let _markers = this.data.markers; // 拿到标记数组
    let markerId = e.markerId; // 获取点击的标记id
    let currMaker = _markers[markerId]; // 通过id,获取当前点击的标记
    this.setData({
      polyline: [{
        points: [{ // 连线起点
          longitude: this.data.longitude,
          latitude: this.data.latitude
        }, { // 连线终点(当前点击的标记)
          longitude: currMaker.longitude,
          latitude: currMaker.latitude
        }],
        color:"#FF0000DD",
        width: 1,
        dottedLine: true
      }],
      scale: 18
    })
  },
// 页面显示
  onShow: function(){
    ...已省略
  },
// 定位函数,移动位置到地图中心
  movetoPosition: function(){
    this.mapCtx.moveToLocation();
  }
})

2.7 用户拖动地图事件

我们已经为地图控件和标记响应了不同的事件,现在如果用户拖动地图,我们需要在拖动附件显示单车,在地图组件声明地图拖动事件:

<!--index.wxml-->
<view class="container">
  <map id="ofoMap" 
    latitude="{{latitude}}"  // 纬度
    longitude="{{longitude}}"  // 经度
    scale="{{scale}}"  // 缩放级别
    controls="{{controls}}" // 地图控件数组,多个控件存放在数组里
    bindcontroltap="bindcontroltap" // 控件点击事件
    polyline="{{polyline}}"  // 位置连线
    markers="{{markers}}" // 标记数组
    bindmarkertap="bindmarkertap" // 标记点击事件
    bindregionchange="bindregionchange" // 拖动地图事件
    show-location/>    // 显示带有方向的小圆点
</view>

在index.js里实现这个事件方法:

//index.js
var app = getApp()
Page({
 data: {
   scale: 18,
   latitude: 0,
   longitude: 0
 },
// 页面加载
 onLoad: function(options){
 // 1.获取定时器,用于判断是否已经在计费
   this.timer = options.timer;

 // 2.调用wx.getLocation系统API,获取并设置当前位置经纬度
   ...已省略

 // 3.设置地图控件的位置及大小,通过设备宽高定位
   ...已省略

 // 4.请求服务器,显示附近的单车,用marker标记
   ...已省略
}
// 地图控件点击事件
 bindcontroltap: function(e){
   ...已省略
 },
// 地图视野改变事件
 bindregionchange: function(e){
   // 拖动地图,获取附件单车位置
   if(e.type == "begin"){
     wx.request({
       url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/biyclePosition',
       data: {},
       method: 'GET', 
       success: (res) => {
         this.setData({
           _markers: res.data.data
         })
       }
     })
   // 停止拖动,显示单车位置
   }else if(e.type == "end"){
       this.setData({
         markers: this.data._markers
       })
   }
 },
// 地图标记点击事件,连接用户位置和点击的单车位置
 bindmarkertap: function(e){
   ...已省略
 },
// 页面显示
 onShow: function(){
   ...已省略
 },
// 定位函数,移动位置到地图中心
 movetoPosition: function(){
   this.mapCtx.moveToLocation();
 }
})
(1)
分享:

本文由:简书 作者:简书发表,转载请注明来源!

标签:

相关阅读