Desenvolvimento WeChat: uso de picker para encapsular o modelo de联动 de província, cidade e distrito

Atualmente, o aprendizado de miniprogramas é mais sobre verificar se é possível encapsular outros componentes duas vezes, o que facilita o desenvolvimento rápido de várias aplicações miniprogramas. Atualmente, notei que o modelo de selector do picker só tem um nível de下拉，então, podemos passar por3Um picker para implementar o formato de template de联动三级来引入其他页面呢？答案是肯定的。那么我的思路是这样的：

1Usando a sintaxe do template para encapsular, os dados são passados da página

2、De acordo com a sintaxe do componente picker, o range pode ser um array de nomes de regiões chinesas, mas precisamos do código único de cada região para acionar a ligação de nível inferior. Portanto, minha abordagem é armazenar os dois conjuntos de dados de nomes e códigos únicos de cada região em dois arrays de objetos dentro de um objeto. Formato【province:{code:['110000', '220000'...], name: ['Beijing', 'Tianjin'...]}】，este formato é fixo e precisa do servidor para retornar

3、Obter os dados do próximo nível através do evento bindchange do picker, cada método é escrito na função e exposto para chamada pela página

Em seguida, vou explicar a estrutura do diretório do meu demo:

common

　　　 -net.js//integração secundária da interface de wx.request

　　　 -cityTemplate.js//método de联动三级

page

　　　 -demo

　　　　　　　 -demo.js

　　　　　　　 -demo.wxml

template

　　　 -cityTemplate.wxml

app.js

app.json

app.wxss

Depois disso, use o phpstudy para configurar um servidor simples para teste. Não me perguntem por que o servidor é assim, eu também não entendo, sou iniciante e só quero os dados...

Claro, você pode pular essa etapa e fixar os dados diretamente no demo.js para teste...

O formato dos dados de retorno do servidor deve seguir o padrão abaixo do retArr:【

<?php 
header("Content-type: text/html; charset=utf-8"); 
$type=$_REQUEST["type"];//Obter o sinal de província e cidade 
$fcode=$_GET["fcode"]; 
$retArr=[ 
 "status"=>true, 
 "data"=>[], 
 "msg"=>"" 
]; 
if($type!="province" && $type!="city" && $type!="county"){ 
 $retArr["status"]=false; 
 $retArr["msg"]="Erro ao obter o tipo de região, verifique"; 
 echo json_encode($retArr); 
 exit; 
} 
function getProvince(){ 
 $province=[]; 
 $code=["110000", "350000", "710000"]; 
 $province["code"]=$code; 
 $name=["Beijing", "Fujian", "Taiwan"]; 
 $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); 
?> 

A seguir é 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}}"> --Cidade de nível dois-- </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}}"> --Região de três níveis-- </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::

/** 
 * Obter três funções de联动 
 * that: Instância this da página de registro, obrigatório 
 * p_url: URL da província de nível um, obrigatório 
 * p_data: Parâmetro de província de nível um, opcional 
 */ 
var net = require( "net" );//Introdução ao método 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 ) { 
 //obtém os dados do primeiro nível de província 
 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 ); 
 //ao clique no picker de um nível, dispara o evento e obtém o método da cidade-região 
 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; 
 //ao clique no picker de dois níveis, dispara o evento e obtém o método da região 
 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; 
 //ao clique no picker de três níveis, dispara o evento 
 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 request over the network, default return type is json 
 * 
 * url: must, other parameters are not required, interface address 
 * data: request parameters Object or String 
 * successFun(dts): callback function for successful return, automatically filtered data added by WeChat, 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, execute other actions, default system prompt information is popped up. 
 * failFun: callback function when the interface call fails 
 * completeFun: callback function when the interface call ends (it will be executed whether the call is successful or fails) 
 * header: object, set the request header, header cannot set Referer 
 * method: 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 ) { 
  //Cover header 
  reqObj.header = header; 
 } 
 if( method ) { 
  reqObj.method = method; 
 } 
 reqObj.success = function( res ) { 
  var returnData = res.data; //Filtrar o resultado do微信, obter os dados originais retornados pelo servidor 
  var status = returnData.status; //De acordo com o acordo da interface, chame a função de sucesso apenas quando retornar status 
  //console.log(res); 
  //Função de negócios executada normalmente 
  if(status == true) { 
   if(successFun) { 
    var dts = returnData.data; 
    successFun(dts);//Chamada de volta, equivalente a obter os dados data e tratá-los diretamente no chamada de volta 
   } 
  } else if(status == false) { 
   var msg = returnData.msg; 
   if(!successErrorFun) { 
    console.log(msg); 
   } else { 
    successErrorFun(msg); 
   } 
  } else { 
   console.log("O servidor não retornou dados no formato acordado pelo contrato da interface"); 
  } 
 } 
 reqObj.fail = function(res) { 
  if(failFun) { 
   failFun(res); 
  } 
 } 
 reqObj.complete = function(res) { 
  if(completeFun) { 
   completeFun(res); 
  } 
 } 
 wx.request(reqObj); 
} 
module.exports = { 
 r: r 
} 

O código principal desses três arquivos é acima, em seguida é o arquivo demo para teste::
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; 
 //Criar objeto de dados de ligação de três níveis ---- Este objeto city é fixo, apenas a URL de solicitação é alterada com base no endereço do servidor de cada serviço 
 _that.setData({ 
  city: { 
  province: {},//formato province:{code: ["11000", "12000"], name: ["Pequim", "Shanghai"], apenas name e code podem ser fixos, porque o template precisa exibir esses dois parâmetros 
  city: {}, 
  county: {}, 
  provinceIndex: 0, 
  cityIndex: 0, 
  countyIndex: 0, 
  cityUrl: "http://localhost:8282/phpserver/areas.php?type=city&fcode="//;type indica a obtenção de áreas fcode é o código de nível superior, na hora específica de acordo com os parâmetros da solicitação do back-end 
  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 ); 
 } 
) 

O arquivo de código completo foi testado conforme a seguir:

Existe um bug aqui, ao ativar a atualização de arrastão e o componente picker, eles se sobrepõem. Não sei se é problema do ferramental de desenvolvimento ou se ainda há bugs a serem corrigidos. Apenas posso esperar por atualizações da equipe WeChat para obter feedback.

Isso é tudo o que há no artigo. Esperamos que isso ajude seus estudos e que você apoie o tutorial Yell.

Declaração: O conteúdo deste artigo é de origem na Internet, pertencente ao respectivo autor. O conteúdo é contribuído e carregado voluntariamente pelos usuários da Internet. Este site não possui direitos de propriedade, não foi editado artificialmente e não assume responsabilidade legal. Se você encontrar conteúdo suspeito de infringência de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Se confirmado, o site deletará imediatamente o conteúdo suspeito de infringência.