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

  1. Emplacement actuel
  2. Page d'accueil
  3. Notes d'expérience
  4. Texte principal

Code d'exemple de liaison de niveau provincial, municipal et rural dans WeChat Mini Program

　Exemple de picker encapsulé pour la liaison de provinces, villes et districts en trois niveaux dans l'application WeChat Mini Program

　 Actuellement, l'apprentissage des mini-programmes consiste à voir s'il est possible de regrouper d'autres composants, ce qui est utile pour le développement rapide de diverses applications mini-programmes. Actuellement, j'ai découvert que le modèle selector du composant picker ne peut afficher qu'un niveau de liste déroulable, alors pouvons-nous traverser}}3Un picker pour réaliser le modèle de liaison hiérarchique en trois niveaux et l'introduction d'autres pages? La réponse est positive. Alors, mon idée est ainsi:

1、Utiliser la syntaxe de template template pour l'encapsulation, les données sont transmises depuis la page

2、Selon la syntaxe du composant picker，Le range ne peut être qu'un ensemble d'arrays de régions chinoises, mais nous avons besoin de l'ID unique de chaque région pour déclencher les données de liaison suivante. Ainsi, ma méthode consiste à stocker deux ensembles de données dans un objet: un ensemble de données pour le nom chinois et un autre pour l'ID unique. Format 【province:{code:['110000', '220000'...], name: ['Beijing', 'Tianjin'...]}】，Ce format est fixe, nécessitant une coordination du serveur pour retourner

3、Obtenir les données du niveau suivant via l'événement bindchange du picker, chaque méthode est écrite dans une fonction et exposée pour l'appel de la page

Ensuite, parlons de la structure de répertoire de mon demo:

common

　　　 -net.js//Intégration secondaire de l'interface wx.request

　　　 -cityTemplate.js//Méthode de liaison hiérarchique en trois niveaux

page

　　　 -demo

　　　　　　　 -demo.js

　　　　　　　 -demo.wxml

template

　　　 -cityTemplate.wxml

app.js

app.json

app.wxss

Ensuite, j'ai configuré un serveur simple avec phpstudy pour le test. Ne me demandez pas pourquoi le serveur est ainsi, je ne le sais pas non plus, je suis débutant, je veux juste les données...

Bien sûr, vous pouvez omettre cette étape et fixer les données directement dans demo.js pour le test...

Le code suivant: 【Le format des données de retour du serveur suit la norme suivante: retArr】

<?php 
header("Content-type: text/html; charset=utf-8");  
$type=$_REQUEST["type"];//Obtenir les signes des provinces, villes et districts 
$fcode=$_GET["fcode"]; 
$retArr=[ 
  "status"=>true, 
  "data"=>[], 
  "msg"=>"" 
; 
if($type!="province" && $type!="city" && $type!="county"){ 
  $retArr["status"]=false; 
  $retArr["msg"]="L'erreur de type de région obtenue, veuillez vérifier"; 
  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;  
}sinon($type==\"city\"){ 
  $city=getCity($fcode); 
  $retArr[\"data\"]=$city; 
}else if($type="county"){ 
  $county=getCounty($fcode); 
  $retArr["data"]=$county; 
} 
echo json_encode($retArr); 
?>

Ensuite, c'est 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}}"> --Les deux niveaux de villes-- </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}}"> --Les trois niveaux de régions-- </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：：

/** 
 * Obtenir les trois fonctions de la联动 
 * that:  L'instance de la page d'enregistrement est obligatoire 
 * p_url: url de la province de niveau un, obligatoire 
 * p_data：paramètres de la province de niveau un, optionnel 
 */ 
var net = require( "net" );//Introduction de la méthode de requête 
var g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method; 
function initCityFun( that, p_url, p_data ) { 
  //Obtention des données des provinces de niveau un 
  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 ); 
  //Un clic sur l'événement du picker de niveau un et obtention de la méthode de ville 
  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; 
  //Un clic sur l'événement du picker de niveau deux et obtention de la méthode de région 
  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; 
  //Un clic sur l'événement du picker de niveau trois 
  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'-Type': 'application/json' }; 
  if( header ) { 
    //Couvrir header 
    reqObj.header = header; 
  } 
  if( method ) { 
    reqObj.method = method; 
  } 
  reqObj.success = function( res ) { 
    var returnData = res.data; //Filtrer le résultat du côté WeChat, obtenir les données brutes renvoyées par le serveur 
    var status = returnData.status; //Appel de la fonction réussie uniquement lorsque status est retourné conformément à l'accord de l'interface 
    //console.log(res); 
    //Fonction d'affaires normales 
    if( status == true ) { 
      if( successFun ) { 
        var dts = returnData.data; 
        successFun( dts );//Retour de callback, ce qui équivaut à traiter directement les données assignées après avoir obtenu data 
      } 
    } else if( status == false ) { 
      var msg = returnData.msg; 
      if( !successErrorFun ) { 
        console.log( msg ); 
      } else { 
        successErrorFun( msg ); 
      } 
    } else { 
      console.log( "Le serveur n'a pas renvoyé les données conformément au format de l'interface" ); 
    } 
  } 
  reqObj.fail = function( res ) { 
    if( failFun ) { 
      failFun( res ); 
    } 
  } 
  reqObj.complete = function( res ) { 
    if( completeFun ) { 
      completeFun( res ); 
    } 
  } 
  wx.request( reqObj ); 
} 
module.exports = { 
  r: r 
}

Le code principal est dans ces trois fichiers ci-dessus, voici ce qui suit pour le test dans le fichier 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; 
  //Création d'un objet de données de liaison hiérarchique de trois niveaux ---- Cet objet city est fixe, seul l'URL de la demande est modifiée en fonction de l'adresse du serveur de chaque service 
  _that.setData( { 
   city: { 
    province: {},//format province:{code: ["11000", "12000"], name: ["Beijing", "Shanghai"]}, il ne peut pas être modifié, car le modèle a besoin de ces deux paramètres pour afficher 
    city: {}, 
    county: {}, 
    provinceIndex: 0, 
    cityIndex: 0, 
    countyIndex: 0, 
    cityUrl: "http://localhost:8282/phpserver/areas.php?type=city&fcode="//;type représente l'obtention de la région, fcode est le code de niveau 1, à ce moment-là, il faudra modifier les paramètres de la requête backend spécifiquement 
    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 ); 
 } 
)

Le fichier de code complet a été testé comme suit :

Il existe un bug ici, lorsque le composant picker et le basculement de la liste déroulante sont activés, ils se chevauchent. Je ne sais pas s'il s'agit d'une raison de l'outil de développement ou d'un bug non encore corrigé... Je ne peux que attendre les mises à jour des messages de WeChat pour obtenir un retour.

Merci de lire, j'espère que cela pourra aider tout le monde, merci pour le soutien à ce site !

Tutoriel de base
Vous pourriez aussi aimer