English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Местоположение
  2. Стартовая страница
  3. Записки о опыте
  4. Основной текст

Пример кода для реализации многоуровневой связи провинций, городов и районов с помощью picker в WeChat Mini Program

　Использование picker для упаковки многоуровневой связи провинций, городов и районов в mini-applications WeChat

　 В настоящее время изучение mini-applications в основном направлено на то, чтобы посмотреть, можно ли повторно упаковать другие компоненты, что поможет в будущем быстро разрабатывать различные приложения mini-applications. В настоящее время обнаружено, что модель selector компонента picker поддерживает только одноуровневое下拉, поэтому, возможно ли использовать три picker для создания формы многоуровневой связи шаблона и ввода других страниц? Ответ肯定 да. Так что мой подход такой:

1. Используйте синтаксис шаблона template для упаковки, данные передаются с страницы

2. В зависимости от синтаксиса компонента pickerRange может быть только набором китайских региональных массивов, но нам нужны уникальные коды каждого региона для вызова данных многоуровневой связи. Таким образом, я храню两组 данных в объекте в двух массивах объектов, хранящих китайские имена и уникальные коды. Формат 【province:{code:['110000', '220000'...], name: ['Пекин', 'Тяньцзинь'...]}】 является фиксированным и требует взаимодействия с сервером для возврата

3. Получите данные следующего уровня через событие bindchange picker и напишите каждую функцию, чтобы она была доступна для вызова страницей

Затем я расскажу о структуре директории моего demo:

common

　　　 -net.js//вторичная интеграция интерфейса wx.request

　　　 -cityTemplate.js//методы многоуровневой связи

page

　　　 -demo

　　　　　　　 -demo.js

　　　　　　　 -demo.wxml

template

　　　 -cityTemplate.wxml

app.js

app.json

app.wxss

Затем, я использовал phpstudy для создания простого сервера для тестирования. Не спрашивайте меня, почему сервер такой, я тоже не знаю, на начальном этапе мне нужны только данные...

Конечно, вы можете пропустить этот шаг и напрямую закрепить данные в demo.js для тестирования...

Код如下：【Формат возвращает данных сервера соответствует下面的 retArr стандарту】

<?php 
header("Content-type: text/html; charset=utf-8");  
$type=$_REQUEST["type"];//Получение знака провинции, города, района 
$fcode=$_GET["fcode"]; 
$retArr=[ 
  "status"=>true, 
  "data"=>[], 
  "msg"=>"" 
]; 
if($type!="province" && $type!="city" && $type!="county"){ 
  $retArr["status"]=false; 
  $retArr["msg"]="Ошибка получения типа региона, пожалуйста, проверьте"; 
  echo json_encode($retArr); 
  exit; 
} 
function getProvince(){ 
  $province=[]; 
  $code=["110000", "350000", "710000"]; 
  $province["code"]=$code; 
  $name=["Пекинshi", "Фуцзянshi", "Тайваньshi"]; 
  $province["name"]=$name; 
  $fcode=["0", "0", "0"]; 
  $province["fcode"]=$fcode; 
  return $province; 
} 
function getCity($P_fcode){ 
  $city=[]; 
  $code=[]; 
  $name=[]; 
  $fcode=[]; 
  if($P_fcode=="110000"){ 
    $code=["110100"]; 
    $name=["Пекинshi"]; 
    $fcode=$P_fcode; 
  } 
  if($P_fcode=="350000"){ 
    $code=["350100", "350200", "350300", "350400", "350500", "350600", "350700", "350800", "350900"]; 
    $name=["Фучжоуси", "Симин", "Путяньshi", "Саньминshi", "Куанчжоуси", "Чанцзянshi", "Нанпинshi", "Луньянshi", "Няндэshi"]; 
    $fcode=$P_fcode; 
  } 
  if($P_fcode=="710000"){ 
  } 
  $city=["code"=>$code, "name"=>$name, "fcode"=>$fcode]; 
  return $city; 
} 
function getCounty($P_fcode){ 
  $county=[]; 
  $code=[]; 
  $name=[]; 
  $fcode=[];  
  if($P_fcode=="110100"){ 
    $code=["110101", "110102", "110103", "110104", "110105", "110106", "110107"]; 
    $name=["Дунцзин區", "Сичжоуку", "Чунвэньку", "Чуанси", "Чаоянь", "Фентайку", "Шицзинци"]; 
    $fcode=$P_fcode; 
  } 
  if($P_fcode=="350100"){ 
    $code=["350102", "350103", "350104"]; 
    $name=["Луцзин區", "Тайцзян區", "Сяошан區"]; 
    $fcode=$P_fcode; 
  } 
  if($P_fcode=="350200"){ 
    $code=["350203", "350205", "350206"]; 
    $name=["Симин區", "Хайцзян區", "Хуили區"]; 
    $fcode=$P_fcode; 
  } 
  $county=["code"=>$code, "name"=>$name, "fcode"=>$fcode]; 
  return $county; 
} 
//var_dump($province); 
if($type=="province"){ 
  $province=getProvince(); 
  $retArr["data"]=$province;  
}else if($type=="city"){ 
  $city=getCity($fcode); 
  $retArr["data"]=$city; 
}else if($type="county"){ 
  $county=getCounty($fcode); 
  $retArr["data"]=$county; 
} 
echo json_encode($retArr); 
?>

Следующий является cityTemplate.wxml：：

<template name="city"> 
<view class="areas"> 
 <view class="province"> 
  <picker bindchange="provincePickerChange" value="{{provinceIndex}}" range="{{province.name}}" data-city-url="{{cityUrl}}"> 
  <text class="select-item">{{province.name[provinceIndex]}}</text> 
  </picker> 
 </view> 
 <view class="city"> 
 <block wx:if="{{!city.name.length}}"> --二级市区-- </block> 
 <block wx:if="{{city.name.length>0}}">  
  <picker bindchange="cityPickerChange" value="{{cityIndex}}" range="{{city.name}}" data-county-url="{{countyUrl}}"> 
   <text class="select-item">{{city.name[cityIndex]}}</text> 
  </picker> 
 </block> 
 </view> 
 <view class="county"> 
 <block wx:if="{{!county.name.length}}"> --三级地区-- </block> 
 <block wx:if="{{county.name.length>0}}"> 
  <picker bindchange="countyPickerChange" value="{{countyIndex}}" range="{{county.name}}"> 
   <text class="select-item">{{county.name[countyIndex]}}</text> 
  </picker> 
 </block> 
 </view> 
</view> 
</template>

cityTemplate.js：：

/** 
 * 获取三级联动的三个函数 
 * that: 注册页面的this实例 必填 
 * p_url: 一级省份url 必填 
 * p_data：一级省份参数 选填 
 */ 
var net = require( "net" );//引入request方法 
var g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method; 
function initCityFun( that, p_url, p_data ) { 
  //获取一级省份数据 
  g_cbSuccess = function(res) { 
   that.setData({ 
    'city.province': res 
   }); 
  }; 
  net.r( p_url, p_data, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method ); 
  //点击一级picker触发事件并获取市区方法 
  var changeProvince = function(e) { 
    that.setData({ 
      'city.provinceIndex': e.detail.value 
    }); 
    var _fcode = that.data.city.province.code[ e.detail.value ]; 
    if (!_fcode) { 
      _fcode = 0; 
    } 
    var _cityUrl = e.target.dataset.cityUrl; 
    g_url = _cityUrl + _fcode; 
    g_cbSuccess = function(res) { 
      that.setData({ 
        'city.city': res 
      }); 
    } 
    net.r(g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method ); 
  }; 
  that[ "provincePickerChange" ] = changeProvince; 
  //点击二级picker触发事件并获取地区方法 
  var changeCity = function(e) { 
    that.setData({ 
      'city.cityIndex': e.detail.value 
    }); 
    var _fcode = that.data.city.city.code[ e.detail.value ]; 
    if (!_fcode) { 
      _fcode = 0; 
    } 
    var _countyUrl = e.target.dataset.countyUrl; 
    g_url = _countyUrl + _fcode; 
    g_cbSuccess = function(res) { 
      that.setData({ 
        'city.county': res 
      }); 
    }; 
    net.r(g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method ); 
  }; 
  that[ "cityPickerChange" ] = changeCity; 
  //点击三级picker触发事件 
  var changeCounty = function(e) { 
    that.setData({ 
      'city.countyIndex': e.detail.value 
    }); 
  }; 
  that["countyPickerChange"] = changeCounty; 
} 
function getProvinceFun(that, p_url, p_data){ 
  g_cbSuccess = function(res) { 
   that.setData({ 
    'city.province': res 
   }); 
  }; 
  net.r( p_url, p_data, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method ); 
} 
module.exports={ 
  initCityFun: initCityFun,, 
  getProvinceFun: getProvinceFun 
}

попутно net.js метод: :

/** 
 * сетевая отправка http-запроса, по умолчанию тип возвращения json 
 *  
 * url: обязательно, другие параметры не обязательны адрес интерфейса 
 * data: параметры запроса Объект или Строка 
 * successFun(dts): функция回调 при успешном возвращении, автоматически фильтрует добавленные данные в端的 WeChat, по соглашению интерфейса, возвращает данные data после успеха, фильтрует msg и status 
 * successErrorFun(msg): успешное выполнение запроса, но сервер считает ошибку бизнеса, выполняет другие действия, по умолчанию появляется системное сообщение. 
 * failFun: функция回调 при неудачном вызове интерфейса 
 * completeFun: функция回调 при завершении вызова интерфейса (вызывается при успешном и неуспешном вызове) 
 * header: объект, устанавливает заголовки запроса, в header не может быть установлено Referer 
 * method: по умолчанию GET, допустимые значения: OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT 
 *  
 */ 
function r( url, data, successFun, successErrorFun, failFun, completeFun, header, method ) { 
  var reqObj = {}; 
  reqObj.url = url; 
  reqObj.data = data; 
  //默认头为json 
  reqObj.header = { 'Content-Type': 'application/json' }; 
  if( header ) { 
    //覆盖header 
    reqObj.header = header; 
  } 
  if( method ) { 
    reqObj.method = method; 
  } 
  reqObj.success = function( res ) { 
    var returnData = res.data; //Фильтрация результатов微信-клиента, получение оригинальных данных, возвращенных сервером 
    var status = returnData.status; //При вызове status по соглашению интерфейса, вызывается функция успеха 
    //console.log(res); 
    //Нормальная функция бизнеса 
    if( status == true ) { 
      if( successFun ) { 
        var dts = returnData.data; 
        successFun( dts );//Обратный вызов, эквивалентно обработке данных после получения data в回调е 
      } 
    } else if( status == false ) { 
      var msg = returnData.msg; 
      if( !successErrorFun ) { 
        console.log( msg ); 
      } else { 
        successErrorFun( msg ); 
      } 
    } else { 
      console.log( "Сервер не вернул данные в约定的 формате интерфейса" ); 
    } 
  } 
  reqObj.fail = function( res ) { 
    if( failFun ) { 
      failFun( res ); 
    } 
  } 
  reqObj.complete = function( res ) { 
    if( completeFun ) { 
      completeFun( res ); 
    } 
  } 
  wx.request( reqObj ); 
} 
module.exports = { 
  r: r 
}

Основной код содержится в этих трех файлах, дальше идет тестирование файла demo：：

demo.wxml：：

<import src="../../template/cityTemplate.wxml"/> 
<template is="city" data="{{...city}}" />

demo.js：：

var city = require( '../../common/cityTemplate' ); 
Page( { 
 data: { 
 }, 
 onLoad: function( options ) { 
  var _that = this; 
  //Создание объекта для триплетной анимации данных ---- Этот объект city фиксирован, только URL запроса изменяется в зависимости от адреса сервера各自ых сервисов 
  _that.setData( { 
   city: { 
    province: {},//формат province:{code: ["11000", "12000"], name: ["Пекин", "Шанхай"]}, они должны быть фиксированными, так как шаблон отображается на основе этих параметров 
    city: {}, 
    county: {}, 
    provinceIndex: 0, 
    cityIndex: 0, 
    countyIndex: 0, 
    cityUrl: "http://localhost:8282/phpserver/areas.php?type=city&fcode=",//type указывает на получение региона fcode - это код первого уровня, в будущем конкретные параметры запроса на сервере будут изменены 
    countyUrl: "http://localhost:8282/phpserver/areas.php?type=county&fcode=" 
   } 
  ) 
  var _url = "http://localhost:8282/phpserver/areas.php"; 
  var _data = { 'type': 'province', 'fcode': '0' }; 
  city.initCityFun( _that, _url, _data ); 
 } 
)

Полный код файла, тестирование завершено следующим образом:

Здесь есть ошибка, при включении обновления списка и компонента picker они перекрываются, не знаю, из-за ошибки в инструменте разработки или еще не исправленной ошибки... Придется ждать обновлений от WeChat и предоставить обратную связь.

Спасибо за чтение, надеюсь, это поможет вам, спасибо всем за поддержку нашего сайта!

Основной учебник
Тебе понравится