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

  1. Posizione attuale
  2. Pagina principale
  3. Note di esperienza
  4. Corpo del testo

Esempio di codice per il联动 di livello provinciale, cittadino e distrettuale utilizzando picker in WeChat Mini Program

　Esempio di联动 di tre livelli di province, città e regioni in WeChat Mini Program utilizzando picker

　 Al momento, imparare le applet più spesso è guardare se è possibile impacchettare altri componenti, utile per lo sviluppo rapido di vari applet in futuro. Al momento, ho scoperto che il modello selector del picker ha solo un livello di elenco a discesa, quindi possiamo forse realizzare il modello di联动 di tre livelli del template picker utilizzando tre picker per introdurre altre pagine? La risposta è sì. Quindi, il mio pensiero è questo:

1、Utilizza la sintassi del template per impacchettare, i dati vengono trasmessi dalla pagina

2、Secondo la sintassi del componente picker，l'intervallo può essere un array di regioni cinesi, ma abbiamo bisogno del codice unico di ogni regione per attivare i dati di联动 del livello successivo. Così, la mia soluzione è memorizzare due array di oggetti all'interno di un oggetto, uno per il nome della regione e l'altro per il codice unico. Formato [province:{code:['110000', '220000'...], name: ['Pechino', 'Tianjin'...]}]，questo formato è fisso e richiede la collaborazione del server per restituire

3、Ottieni i dati del livello successivo tramite l'evento bindchange del picker, inserisci ogni metodo in una funzione e rendilo disponibile per la chiamata dalla pagina

Poi, parliamo della struttura dei directory del mio demo:

common

　　　 -net.js//integrazione secondaria dell'interfaccia wx.request

　　　 -cityTemplate.js//metodo di联动 di tre livelli

page

　　　 -demo

　　　　　　　 -demo.js

　　　　　　　 -demo.wxml

template

　　　 -cityTemplate.wxml

app.js

app.json

app.wxss

Poi, ho configurato un server semplice utilizzando phpstudy per il test. Non chiedermi perché il server è così, non lo so nemmeno, sono alle prime armi e ho solo bisogno dei dati...

Certo, puoi saltare questa fase e testare direttamente i dati nel demo.js...

Il codice di seguito:【Il formato dei dati di ritorno del server segue lo standard di retArr elencato di seguito】

<?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); 
?>

Il seguente è 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 
}

metodo net.js:：

/** 
 * invio di richieste http di rete,predefinito il tipo di ritorno è json 
 *  
 * url:obbligatorio,altri parametri non obbligatori indirizzo dell'interfaccia 
 * data:parametro della richiesta Object o String 
 * successFun(dts):funzione di callback restituita con successo, automaticamente filtrati i dati aggiunti dal lato WeChat,secondo l'accordo dell'interfaccia,ritorna i dati data successivi,filtra msg e status 
 * successErrorFun(msg):esecuzione del richiesto con successo, ma il server considera un errore di business,esegue altre azioni,predefinito visualizza un messaggio di sistema. 
 * failFun:funzione di callback chiamata in caso di fallimento dell'interfaccia 
 * completeFun:funzione di callback chiamata alla fine della chiamata dell'interfaccia (vengono eseguiti sia il successo che l'errore) 
 * header:oggetto,imposta l'intestazione della richiesta,non è possibile impostare Referer nell'intestazione 
 * method:predefinito a GET, valori validi: 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; 
  //header predefinito come json 
  reqObj.header = { 'Content-Type': 'application/json' }; 
  if( header ) { 
    //sovrascrivi header 
    reqObj.header = header; 
  } 
  if( method ) { 
    reqObj.method = method; 
  } 
  reqObj.success = function( res ) { 
    var returnData = res.data; //Filtrare i risultati del微信 e ottenere i dati originali restituiti dal server 
    var status = returnData.status; //Secondo l'accordo dell'interfaccia, chiamare la funzione di successo solo quando viene restituito status 
    //console.log(res); 
    //Funzione aziendale normale 
    if( status == true ) { 
      if( successFun ) { 
        var dts = returnData.data; 
        successFun( dts );//Callback, equivalente a ottenere i dati di data direttamente nel callback e assegnare i dati 
      } 
    } else if( status == false ) { 
      var msg = returnData.msg; 
      if( !successErrorFun ) { 
        console.log( msg ); 
      } else { 
        successErrorFun( msg ); 
      } 
    } else { 
      console.log( "Il server non ha restituito i dati secondo la convenzione dell'interfaccia" ); 
    } 
  } 
  reqObj.fail = function( res ) { 
    if( failFun ) { 
      failFun( res ); 
    } 
  } 
  reqObj.complete = function( res ) { 
    if( completeFun ) { 
      completeFun( res ); 
    } 
  } 
  wx.request( reqObj ); 
} 
module.exports = { 
  r: r 
}

Il codice centrale è contenuto in questi tre file, quindi seguiamo con il file demo per il test：：

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; 
  //Creazione dell'oggetto dati per il联动 a tre livelli ---- Questo oggetto city è fisso, solo l'URL della richiesta è modificato in base all'indirizzo del server di ciascun servizio 
  _that.setData( { 
   city: { 
    province: {},//Il formato è province:{code: ["11000", "12000"], name: ["Beijing", "Shanghai"]}, deve essere fisso name e code perché il template deve essere visualizzato in base a questi parametri 
    city: {}, 
    county: {}, 
    provinceIndex: 0, 
    cityIndex: 0, 
    countyIndex: 0, 
    cityUrl: "http://localhost:8282/phpserver/areas.php?type=city&fcode=",//type indica di ottenere la regione fcode è il codice di livello superiore, verrà modificato in base ai parametri della richiesta backend 
    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 ); 
 } 
)

Il file di codice completo è stato testato come segue:

Esiste un bug qui, quando si abilita la ricarica in basso e il componente picker, i menu si sovrappongono. Non so se è un problema degli strumenti di sviluppo o se è ancora un bug da correggere... Devo solo aspettare aggiornamenti da parte di WeChat per fornire feedback.

Grazie per aver letto, spero che possa aiutarvi, grazie per il supporto al nostro sito!

Tutorial di base
Ti piacerebbe anche