微信 разработка использование picker для создания шаблона связки провинций, городов и районов

В настоящее время изучение小程序 больше направлено на то, чтобы увидеть, можно ли повторно 包装 другие компоненты, что будет полезно для быстрого разработки различных приложений小程序 в будущем. В настоящее время обнаружено, что модель selector компонента picker может быть только одним уровнем下拉, так ли мы можем использовать три picker для создания многоуровневого шаблона связи и ввода других страниц? Ответ определенно да. Тогда мой план такой:

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

2、В соответствии с синтаксисом компонента picker, range может быть только массивом китайских регионов, но нам нужно уникальный код каждого региона для запуска следующего уровня связи данных. Таким образом, я храню两组 данных в объекте: один массив с китайскими названиями и один с уникальными кодами. Формат:【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=["Пекинский город", "Фуцзянская провинция", "Тайваньский провинция"]; 
 $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=["Пекинский город"]; 
  $fcode=$P_fcode; 
 } 
 if($P_fcode=="350000"){ 
  $code=["350100", "350200", "350300", "350400", "350500", "350600", "350700", "350800", "350900"]; 
  $name=["Фучжоуский город", "Синьмэньский город", "Путяньский город", "Саньминский город", "Куанчжоуский город", "Чанцзянский город", "Нанпинский город", "Луньяньский город", "Нингдэский город"]; 
  $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 уровня 1 провинции (обязательно) 
 * p_data: параметры провинции уровня 1 (дополнительно) 
 */ 
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 
} 

By the way, net.js method: :

/** 
 * Send http requests over the network, the default return type is json 
 * 
 * url: Must, other parameters are not required, interface address 
 * data: The parameters of the request Object or String 
 * successFun(dts): The callback function after a successful return, the data added by the WeChat end has been automatically filtered, according to the interface agreement, return the data after success, filter out msg and status 
 * successErrorFun(msg): The request is executed successfully, but the server considers it a business error, and other actions are executed, the default is to pop up the system prompt information. 
 * failFun: The callback function after the interface call fails 
 * completeFun: The callback function after the interface call ends (both success and failure will be executed) 
 * header:object, set the request header, Referer cannot be set in header 
 * method: The default is GET, valid values: 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; 
 // Default header is json 
 reqObj.header = { 'Content-Type': 'application/json' }; 
 if( header ) { 
  // Override header 
  reqObj.header = header; 
 } 
 if( method ) { 
  reqObj.method = method; 
 } 
 reqObj.success = function( res ) { 
  var returnData = res.data; // Filter the results from the WeChat end and get the original data returned by the server 
  var status = returnData.status; // According to the interface agreement, the success function is called only when the status is returned 
  //console.log(res);}} 
  //Нормальная функция бизнеса 
  if(status == true) { 
   if(successFun) { 
    var dts = returnData.data; 
    successFun(dts); //回调, эквивалентно обработке данных после получения data 
   } 
  } 
   var msg = returnData.msg; 
   if(!successErrorFun) { 
    console.log(msg); 
   } 
    successErrorFun(msg); 
   } 
  } 
   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: ["Пекин", "Шанхай"]}, только name и code могут быть фиксированными, так как шаблон отображается на основе этих параметров 
  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 и предоставлять обратную связь.

Вот и все, что было в этой статье, я надеюсь, что это поможет вам в изучении, и希望大家多多支持呐喊教程。

Заявление: содержание этой статьи взято из Интернета, авторское право принадлежит соответствующему автору, материал предоставлен пользователями Интернета в добровольном порядке, сайт не имеет права собственности, материал не был отредактирован вручную, и сайт не несет ответственности за соответствующие юридические последствия. Если вы обнаружите материал,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении, и предоставьте соответствующие доказательства. При подтверждении факта нарушения сайт немедленно удалил涉嫌侵权的内容。