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

  1. Aktuelle Position
  2. Startseite
  3. Erfahrungsnotizen
  4. Haupttext

WeChat Mini-Programm, Beispielcode zur Realisierung der dreistufigen Provinz-Stadt-Distrikt-Verknüpfung mit picker

　WeChat Mini Program: Beispiel für die Verwendung von picker für die dreistufige Verknüpfung von Provinz, Stadt und Bezirk

　 Momentan lerne ich mehr über das Wiederverwenden von anderen Komponenten im Mini-Programm, um schneller verschiedene Mini-Programm-Anwendungen zu entwickeln. Bisher habe ich entdeckt, dass der selector-Modus des pickers nur eine Ebene hat, ob wir ihn durch}}3Wie viele picker können wir verwenden, um das dreistufige Verknüpfungsmuster in anderen Seiten einzuführen? Die Antwort ist sicherlich ja. Dann ist meine Idee so:

1、Verwenden Sie die Template-Syntax, um zu verpacken, Daten von der Seite übergeben

2、Nach dem Syntax der picker-Komponente、Die range kann nur ein Array von chinesischen Regionen sein, aber wir benötigen die eindeutige Nummer jeder Region, um die nächste Verknüpfung zu aktivieren. Daher speichere ich die两组数据分别存储中文名和唯一码的两个对象数组在一个对象中。Format 【province:{code:['110000', '220000'...], name: ['Beijing', 'Tianjin'...]}】，dieser Format ist festgelegt und requires die Zusammenarbeit des Servers, um zurückzugeben

3、Daten der nächsten Ebene werden durch das bindchange-Event des pickers abgerufen, jede Methode wird in eine Funktion geschrieben und ausgegeben, um die Seite aufzurufen

Dann erkläre ich die Verzeichnisstruktur meines demo:

common

　　　 -net.js//Wiederintegration der wx.request-Anfrage

　　　 -cityTemplate.js//Methode zur dreistufigen Verknüpfung

page

　　　 -demo

　　　　　　　 -demo.js

　　　　　　　 -demo.wxml

template

　　　 -cityTemplate.wxml

app.js

app.json

app.wxss

Dann habe ich eine einfache Serverumgebung mit phpstudy aufgebaut, um zu testen. Frag mich nicht, warum der Server so ist, ich verstehe es auch nicht, ich bin Anfänger und ich brauche nur Daten...

Natürlich können Sie diesen Schritt weglassen und die Daten direkt im demo.js festlegen, um zu testen...

Der folgende Code: 【服务端返回的数据格式遵循以下retArr规范】

<?php 
header("Content-Art: Text/html; Zeichensatz=utf-8);  
$type=$_REQUEST["type"];//Beschaffung der Markierungen für Provinz, Stadt und Bezirk 
$fcode=$_GET["fcode"]; 
$retArr=[ 
  "status"=>true, 
  "data"=>[], 
  "msg"=>"" 
); 
if($type!="province" && $type!="city" && $type!="county"){ 
  $retArr["status"]=false; 
  $retArr["msg"]="Fehler bei der Erstellung der Regionstypen, bitte überprüfen Sie"; 
  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); 
?>

Der nächste ist 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}}"> --Zweistufige Stadtregion-- </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}}"> --Dreistufige Region-- </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::

/** 
 * Drei Funktionen für die dreistufige Auswahl 
 * this: Erforderliches Beispiel der Registrierungsseite 
 * p_url: URL der ersten Ebene der Provinz, obligatorisch 
 * p_data：Parameter der ersten Ebene der Provinz, optional 
 */ 
var net = require( "net" );//request-Methode einführen 
var g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method; 
function initCityFun( that, p_url, p_data ) { 
  //Daten der ersten Ebene der Provinz abrufen 
  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 ); 
  //Klicken Sie auf das erste picker, lösen Sie das Ereignis aus und erhalten Sie die Stadt 
  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; 
  //Klicken Sie auf das zweite picker, lösen Sie das Ereignis aus und erhalten Sie die Region 
  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; 
  //Klicken Sie auf das dritte picker, um das Ereignis auszulösen 
  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:请求的参数 Object或String 
 * successFun(dts):成功返回的回调函数，已自动过滤微信端添加数据,按接口约定,返回成功后的data数据,过滤掉msg和status 
 * successErrorFun(msg):成功执行请求,但是服务端认为业务错误,执行其他行为,默认弹出系统提示信息. 
 * failFun:接口调用失败的回调函数 
 * completeFun:接口调用结束的回调函数（调用成功、失败都会执行） 
 * header:object,设置请求的 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'-Typ': 'application/json'}; 
  if( header ) { 
    //Header überschreiben 
    reqObj.header = header; 
  } 
  if( method ) { 
    reqObj.method = method; 
  } 
  reqObj.success = function( res ) { 
    var returnData = res.data; //Filtern des Ergebnisses der WeChat-Plattform, um die Originaldaten des Servers zu erhalten 
    var status = returnData.status; //Nur wenn status zurückgegeben wird, wie vom Interface vereinbart, wird die Erfolgsmethode aufgerufen 
    //console.log(res); 
    //Normaler Geschäftsfall 
    if( status == true ) { 
      if( successFun ) { 
        var dts = returnData.data; 
        successFun( dts );//Rückruf, was bedeutet, dass die Daten direkt im Callback verarbeitet und zugewiesen werden, nachdem data erhalten wurde 
      } 
    } else if( status == false ) { 
      var msg = returnData.msg; 
      if( !successErrorFun ) { 
        console.log( msg ); 
      } else { 
        successErrorFun( msg ); 
      } 
    } else { 
      console.log( "Der Server hat die Daten nicht im vereinbarten Format formatiert zurückgegeben" ); 
    } 
  } 
  reqObj.fail = function( res ) { 
    if( failFun ) { 
      failFun( res ); 
    } 
  } 
  reqObj.complete = function( res ) { 
    if( completeFun ) { 
      completeFun( res ); 
    } 
  } 
  wx.request( reqObj ); 
} 
module.exports = { 
  r: r 
}

Der Kerncode besteht aus diesen drei Dateien,接下来是demo文件做测试::

demo.wxml::

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

demo.js::

var city = require( '../../common/cityTemplate'); 
Seite( { 
 data: {}} 
 }, 
 onLoad: function(options) { 
  var _that = this; 
  //Erstellen Sie ein Datenobjekt für die dreistufige Verknüpfung ---- Dieser city-Objekt ist festgelegt, nur die URL der Anfrage wird entsprechend der Adresse des jeweiligen Server端的 angepasst 
  _that.setData({ 
   city: { 
    province: {},//Format province:{code: ["11000", "12000"], name: ["Beijing Stadt", "Shanghai Stadt"]}, nur name und code können festgelegt werden, da das Template diese beiden Parameter benötigt, um anzuzeigen 
    city: {}, 
    county: {}, 
    provinceIndex: 0, 
    cityIndex: 0, 
    countyIndex: 0, 
    cityUrl: "http://localhost:8282/phpserver/areas.php#63;type=city&fcode="//;type bedeutet die Region, die abgerufen wird, fcode ist der erste Code, der später entsprechend den Anfrageparametern des Backends geändert wird 
    countyUrl: "http://localhost:8282/phpserver/areas.php#63;type=county&fcode=" 
   } 
  ) 
  var _url = "http://localhost:8282/phpserver/areas.php"; 
  var _data = {'type': 'province', 'fcode': '0'}; 
  city.initCityFun(_that, _url, _data); 
 } 
)

Hier ist das endgültige Testen der vollständigen Code-Datei:

Es gibt hier einen Bug, wenn Sie die Dropdown-Auffrischung und das Dropdown-Element des Pickers aktivieren, werden sie übereinanderliegen. Ich weiß nicht, ob es ein Grund ist, dass das Entwicklungsprogramm defekt ist, oder ob es noch nicht behobene Bugs gibt ... Ich kann nur warten, bis die Informationen von der WeChat-Seite aktualisiert werden, um eine Rückmeldung zu geben.

Vielen Dank für das Lesen, ich hoffe, es kann Ihnen helfen, danke für Ihre Unterstützung dieser Website!

Grund教程
Elasticsearch-Tutorial