小程序开发文档

开发前的准备

1.申请账号，拥有小程序账号。
2.在小程序管理平台，可以看到小程序的 AppID与AppSecret。
3.申请账号，拥有小程序账号。
4.管理员需要将开发人员的微信号设置为开发者账号才可以进行小程序的开发
5.安装微信开发者工具，
6.业务中如果需要获取用户的手机号， 则需要企业账号开通获取用户手机号权限,
7.如果你的小程序中用到了地图，则需要你的账号成为百度地图的开发者，成为开发者之后，在其中需要百度地图的ak。

跳转方式

页面中所有的跳转基本上就用了两种

   wx.navigateTo({
      url: "/pages/management/management"
    })
  wx.navigateBack({
     delta: 1,
    })

功能流程图

获取用户手机号

我们做的这个小程序， 需要获取用户绑定微信的手机号，之前我们获取可以直接调用， 不用经过用户授权， 但之后微信接口更改之后，第一次需要用户授权才能获取手机号。
现在小程序获取授权需要通过button组件的bindgetphonenumber属性，配合open-type属性，实现点击按钮返回获取到的用户手机号：

<button  open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">授权使用</button>

小程序的结构

我在做这个小程序的时候， 把小程序主要分成了三个主要部分，1.打开小程序立刻加载的，也就是最后一个方框里的，2.全局都要用到的要封装的方法，我写在了until里面， 3.这个就是我们写的页面。如果有公共的页面， 我们可以写在components文件夹下面。

在utils里面我封装了请求方式， 封装了请求头信息，接口独自放在了一个api.js文件中，这样做的好处是，我们更改域名的时候不用一个个去各个页面去查找了。然后我又把api.js引入到封装请求的文件http.js中， 通过封装在每个请求上添加请求头，来减少代码。

import {
  API
} from './api';
// import toast from './toast.js';
var token=wx.getStorageSync('token')
var qkauthtoken=token
//异步请求
function http(request) {
  let qkToken;
  try {
    qkToken = qkauthtoken;
  } catch (e) { }
  if (!request.dataType) {
    request.dataType = 'json'
  }
  let header;
  if (qkToken !== 'undefined') {
    header = { 'qk-auth-token':qkauthtoken }
  }
  wx.request({
    url: API[request.url],
    header,
    data: request.data,
    dataType: request.dataType,
    method: request.method,
    success: function (res) {
      request.success(res.data, res.header, res)
    },
    fail: function (err) {
      if (request.fail) {
        request.fail()
      }
    },
    complete() {
      if (request.complete) {
        request.complete()
      }
    }
  });
}
export default http;

小程序的全局配置

app.json是小程序的全局配置，包括小程序的所有页面路径、界面表现、底部 tab 等，一般包含几个字段：pages、window、tabBar
tabBar 一般都是使用默认的，如果自己想要设置有两种方法，一是在单独的一个页面设置，这种方法比较简单，在进入小程序后，获取用户的手机屏幕的高度，流出一定高度在顶部做显示tabBar显示的地方

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
tabBar字段 —— 定义小程序底部tab栏的表现，以及 tab 切换时显示的对应页面。

功能实现

获取用户的地理位置+地图显示+所有的停车场（首页）

实现逻辑

在获取用户的地理位置的时候代码写的有点乱， 没有封装， 开发的时候修改的也比较多，所以看得时候也有点糟心，这个获取用户的地理位置，第一次如果客户选择了允许，就需要拿客户的经纬度去搜附近的停车场，拿经纬度在地图上标记，以周围多大画圆（marker） 然后再拿经纬度去逆解析地址，把经纬度转化为具体地址城市显示在页面上。在页面上也有几个默认的城市，是从后台请求回来的，如果客户选择了从后台请求回来的城市，则调用这个城市从后台请求回来的经纬度，在地图上显示marker ，再用经纬度来查询所有停车场， 当第二次进入小程序的时候，会实时更新用户的地址，地图上的marker也会更新，并把地址显示在页面上。在输入框搜索的时候也要把经纬度带上，再加上客户输入的内容去搜索。

技术难题

因为停车场是悬浮在地图上面的， 而地图的层级是最高的，只有用cover-view标签才能在地图上显示停车场， 否则地图会把停车场覆盖掉，安卓手机没问题，苹果手机不显示
停车场数量较多，做下拉加载操作， 因为停车场在地图上，系统默认你下拉的是地图，所以不能下拉到底部，这个下拉加载不能做全局的下拉加载，做的局部下拉加载

选择车位（全局下拉刷新和单选）

实现逻辑

在实现全局下拉刷新的时候，我选择小程序自带的函数bindDownLoad:， 这个函数可以监听用户是否下拉到底部

bindDownLoad: function () {
    var that = this;
    loadMore(that);
  },

var loadMore = function (that) {
  app. showLoading('加载中...')
  if (page == 0) {
    page = 1
  }
  var parkingcontent = wx.getStorageSync('parkingcontent');
  http({
    url: "GetParkLot",
    method: 'post',
    data: {
      parkId: parkingcontent.parkid,
      pageIndex: page,
      pageSize: 10
    },
    success: function (res) {
      if (res.data.list.length != 0) {
      //这是我对结果进行了处理
        var list = that.data.list;
        for (var i = 0; i < res.data.list.length; i++) {
          list.push(res.data.list[i]);
        }
        for (var i = 0; i < list.length; i++) {
          if (list[i].isSelected == true) {
          } else {
            list[i]['isSelected'] = false;
          }
          if (list[i].parkCode == '') {
            that.setData({
              gu: false
            });
          }
        }
        that.setData({
          list: list
        });
        page++;
        app.hideLoading();
      }else if(res.data.list.length==0 && that.data.list.length>0){
        app.hideLoading();
      }else{
        app.hideLoading();
        app.tipsModal('没有符合条件的车位')
      }
    }
  })
}

对数据进行单项选择这只是一个简单的功能，具体代码如下：

itemSelected: function (e) {
    var item = this.data.list[e.currentTarget.dataset.index];
    if (item.isSelected == false) {
      item.isSelected = true
    }
    if (item.isSelected == true) {
      for (let ii in this.data.list) {
        //下标不为 e.currentTarget.dataset.index 全为 false
        if (ii != e.currentTarget.dataset.index) {
          this.data.list[ii].isSelected = false;
        }
      }
    }
    //重新渲染数据
    this.setData({
      list: this.data.list,
    })
  },

	<view value="" checked="" class="select-num" bindtap='itemSelected' data-index='{{index}}'><view>
	<image src="{{item.isSelected?'../../images/select.png':'../../images/unselect.png'}}"></image>

添加车牌

实现逻辑