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

本文介绍了如何在微信小程序中实现省市区三级联动,通过后台PHP服务动态获取数据。详细展示了项目的目录结构,WXML和JS代码,并提供了PHP服务端的示例代码,包括初始化数据和根据选择的列和值获取下级数据的方法。
摘要由CSDN通过智能技术生成

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


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

项目下载地址:https://download.csdn.net/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('

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值