Exemplo de código de encapsulamento de picker para três níveis de província, cidade e distrito no WeChat Mini Program

　Miniaplicação WeChat Usando picker Encapsulamento de Ligação de Nível Três de Província, Cidade e Distrito

　 Atualmente, o aprendizado de miniprogramas é mais sobre verificar se é possível encapsular outros componentes duas vezes, o que é útil para desenvolver rapidamente várias aplicações miniprograms. Atualmente, notei que o modelo selector do picker é de um nível de下拉, então, através de}}3Perguntei como usar vários pickers para implementar o formato de template de联动 de três níveis em outras páginas? A resposta é claramente sim. Então, minha ideia é assim:

1、Usando a sintaxe do template 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 de um código único de cada região para acionar os dados de联动 do próximo nível. Assim, minha abordagem é armazenar os dois conjuntos de dados de nomes e códigos únicos em um objeto, formatado como [province:{code:['110000', '220000'...], name: ['Pequim', 'Tianjin'...]}】，este formato é fixo e precisa do servidor para retornar

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

Em seguida, fale sobre a estrutura de diretórios do meu demo:

common

　　　 -net.js//Integração de segunda vez da interface de solicitação 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 dados...

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

O código a seguir: [O formato de dados de retorno do servidor segue o padrão a seguir: retArr]

<?php 
header("Content-type: text/html; charset=utf-8");  
$type=$_REQUEST["type"];//Obtendo sinal de província, cidade e distrito 
$fcode=$_GET["fcode"]; 
$retArr=[ 
  "status"=>true, 
  "data"=>[], 
  "msg"=>"" 
]; 
if($type!="province" && $type!="city" && $type!="county"){ 
  $retArr["status"]=false; 
  $retArr["msg"]="Obtendo erro no tipo de região, por favor verifique"; 
  echo json_encode($retArr); 
  exit; 
} 
function getEstado(){ 
  $estado=[]; 
  $codigo=["110000", "350000", "710000"]; 
  $estado["code"]=$codigo; 
  $nome=["北京市", "福建省", "台湾省"]; 
  $estado["name"]=$nome; 
  $fcode=["0", "0", "0"]; 
  $estado["fcode"]=$fcode; 
  return $estado; 
} 
function getCidade($P_fcode){ 
  $cidade=[]; 
  $codigo=[]; 
  $nome=[]; 
  $fcode=[]; 
  if($P_fcode=="110000"){ 
    $codigo=["110100"]; 
    $nome=["北京市"]; 
    $fcode=$P_fcode; 
  } 
  if($P_fcode=="350000"){ 
    $codigo=["350100", "350200", "350300", "350400", "350500", "350600", "350700", "350800", "350900"]; 
    $nome=["福州市", "厦门市", "莆田市", "三明市", "泉州市", "漳州市", "南平市", "龙岩市", "宁德市"]; 
    $fcode=$P_fcode; 
  } 
  if($P_fcode=="710000"){ 
  } 
  $cidade=["code"=>$codigo, "name"=>$nome, "fcode"=>$fcode]; 
  return $cidade; 
} 
function getDistrito($P_fcode){ 
  $distrito=[]; 
  $codigo=[]; 
  $nome=[]; 
  $fcode=[];  
  if($P_fcode=="110100"){ 
    $codigo=["110101", "110102", "110103", "110104", "110105", "110106", "110107"]; 
    $nome=["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区"]; 
    $fcode=$P_fcode; 
  } 
  if($P_fcode=="350100"){ 
    $codigo=["350102", "350103", "350104"]; 
    $nome=["鼓楼区", "台江区", "苍山区"]; 
    $fcode=$P_fcode; 
  } 
  if($P_fcode=="350200"){ 
    $codigo=["350203", "350205", "350206"]; 
    $nome=["思明区", "海沧区", "湖里区"]; 
    $fcode=$P_fcode; 
  } 
  $distrito=["code"=>$codigo, "name"=>$nome, "fcode"=>$fcode]; 
  return $distrito; 
} 
//var_dump($estado); 
if($type=="estado"){ 
  $estado=getEstado(); 
  $retArr["data"]=$estado;  
}else if($type=="cidade"){ 
  $cidade=getCity($fcode); 
  $retArr["data"]=$cidade; 
}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}}"> --Cidades de dois níveis-- </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ões 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:  A instância da página de registro obrigatória 
 * p_url: URL da província de um nível, obrigatório 
 * p_data: parâmetros da província de um nível, opcional 
 */ 
var net = require( "net" );//introduzir método de solicitação 
var g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method; 
function initCityFun( that, p_url, p_data ) { 
  //obter 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 é acionado o evento e é obtido o método da cidade 
  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 é acionado o evento e é obtido 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 é acionado 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 
} 

顺道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) { 
    //sobrescreve header 
    reqObj.header = header; 
  } 
  if(method) { 
    reqObj.method = method; 
  } 
  reqObj.success = function(res) { 
    var returnData = res.data; //filtra o resultado do WeChat, obtendo os dados originais retornados pelo servidor 
    var status = returnData.status; //ao retornar status conforme acordado pelo interface, chama a função de sucesso 
    //console.log(res); 
    //função de negócio normal 
    if(status == true) { 
      if(successFun) { 
        var dts = returnData.data; 
        successFun(dts);//callback, equivalente a obter os dados de data diretamente no callback para manipulação de atribuição de dados 
      } 
    } 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 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 nuclear são esses 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 vínculo 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: ["Beijing Shi", "Shanghai Shi"]}, só podem ser name e code, porque o template precisa desses dois parâmetros para exibir 
    city: {}, 
    county: {}, 
    provinceIndex: 0, 
    cityIndex: 0, 
    countyIndex: 0, 
    cityUrl: "http://localhost:8282/phpserver/areas.php#63;type=city&fcode="//;type indica a obtenção de regiões, fcode é o código de nível superior, na hora de modificar os parâmetros de solicitação do back-end 
    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 ); 
 } 
) 

O código completo acima foi testado conforme follows：

Existe um bug aqui, ao ativar a atualização下拉和picker组件的下拉会重叠，不知道是开发工具的原因，还是尚未修复的bug。。。只能等待微信方面的更新消息进行反馈

Agradecemos a leitura, esperamos ajudar a todos, obrigado pelo apoio ao site!