微信小程序——省市县三级联动，实时通过后台调用PHP代码获取数据

由于项目频繁用到三级联动，比如地区、时间、分类，这些网络上不能满足，所以我们通过后台调用的方式来实现
后台我使用的是PHP语言

目录结构：
|-client
|---pages
|-----index
|-------index.js //包含初始化数据和调用后台的数据，都在这里实现
|-------index.wxml
|-------index.json
|-------index.wxss            
|-server
|---city.php服务端程序

项目下载地址：https://download.youkuaiyun.com/download/u014725495/10562636

index.wxml
 

<view class="weui-cell weui-cell_input">
  <view class="weui-cell__hd">
    <view class="weui-label">地区</view>
  </view>
  <view class="weui-cell__bd">
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{ {multiIndex}}" range="{ {multiArray}}">
      <view class="weui-input">
        { {multiArray[0][multiIndex[0]]}}，{ {multiArray[1][multiIndex[1]]}}，{ {multiArray[2][multiIndex[2]]}}
      </view>
    </picker>
  </view></view>

 

index.js

// pages/area/area.js
var config = require('../../config')
Page({
  /** 
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    wx.request({
      url: config.service.host + '/city.php', //仅为示例，并非真实的接口地址
      data: {
        'method':'initData',
        'type': 'province',
        'fcode': '110000'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function(res) {
        console.log(res.data)
        //util.showSuccess("获取成功")
        var multiObj = jsonToObj(res.data.data); //把json格式变成对象
        that.setData({
          multiArray: res.data.multiArray, //一个由文字组成的二维数组，一共是三个层级，分别是第一级，第二级，第三级
          multiIndex: res.data.multiIndex, //分别对应multiArray所需要指定的层级
          objectMultiArray: multiObj
        })
      }
    })
  },
  bindMultiPickerColumnChange: function(e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    var that = this;
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };

    //获取修改的列和值的集合
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        break;
      case 1:
        data.multiIndex[2] = 0;
        break;
    }

    console.log('index为', data.multiIndex);
    w