Desarrollo de WeChat: plantilla de联动模板 de nivel provincial, municipal y municipal encapsulada por picker

Actualmente, el aprendizaje de las aplicaciones de小程序 se centra más en si es posible encapsular otros componentes para facilitar el desarrollo rápido de diversas aplicaciones de小程序. Hasta ahora, el modo selector del picker solo tiene un nivel de desplazamiento inferior, ¿entonces, ¿podemos lograrlo a través de3¿Es posible implementar un picker para crear un formulario de tres niveles de asociación? La respuesta es claramente sí. Entonces, mi enfoque es así:

1Utilice la sintaxis del template para encapsular, los datos se pasan desde la página

2、De acuerdo con la sintaxis del componente picker, range solo puede ser un grupo de arrays de regiones chinas, pero necesitamos el código único de cada región para activar el siguiente nivel de联动数据. Por lo tanto, mi enfoque es almacenar dos arrays de objetos en un objeto, uno para el nombre de la región y otro para el código único. Formato 【province:{code:['110000', '220000'...], name: ['北京市', '天津市'...]}】，este formato es fijo y requiere la cooperación del servidor para retornar

3、Obtener los datos del siguiente nivel a través del evento bindchange del picker, escribir cada método en una función y expónrselo para que la página lo llame

Luego, mencionaré la estructura de directorios de mi demo:

common

　　　 -net.js//Integración secundaria de wx.request para la solicitud de interfaz

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

page

　　　 -demo

　　　　　　　 -demo.js

　　　　　　　 -demo.wxml

template

　　　 -cityTemplate.wxml

app.js

app.json

app.wxss

Luego, use phpstudy para configurar un servidor simple para la prueba. No me preguntes por qué el servidor es así, ni yo lo sé, soy principiante solo quiero los datos...

Por supuesto, puede omitir este paso y fijar los datos directamente en demo.js para la prueba...

El formato de los datos de retorno del servidor se ajusta al siguiente retArr:【

<?php 
header("Content-type: text/html; charset=utf-8"); 
$type=$_REQUEST["type"];//Obtener el símbolo de la provincia, ciudad y región 
$fcode=$_GET["fcode"]; 
$retArr=[ 
 "status"=>true, 
 "data"=>[], 
 "msg"=>"" 
]; 
if($type!="province" && $type!="city" && $type!="county"){ 
 $retArr["status"]=false; 
 $retArr["msg"]="Error al obtener el tipo de región, por favor revise"; 
 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); 
?> 

Lo siguiente es 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}}"> --Ciudad de dos niveles-- </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}}"> --Área de tres niveles-- </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::

/** 
 * Obtener tres funciones de联动三级 
 * that: Instancia this de la página de registro, obligatorio 
 * p_url: URL de provincia de nivel uno, obligatorio 
 * p_data: Parámetro de provincia de nivel uno, opcional 
 */ 
var net = require( "net" );//Introducción al 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 ) { 
 //obtener los datos del primer nivel de la provincia 
 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 ); 
 //al hacer clic en el evento del picker de un nivel y obtener el método de la ciudad 
 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; 
 //al hacer clic en el evento del picker de dos niveles y obtener el método de la región 
 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; 
 //al hacer clic en el evento del picker de tres niveles 
 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: :

/** 
 * Network sends http request, default return type is json 
 * 
 * url: Must, other parameters are not required, interface address 
 * data: Parameters of the request Object or String 
 * successFun(dts): callback function for successful return, automatically filtered data added by WeChat end, according to the agreement of the interface, return data after success, filtered out msg and status 
 * successErrorFun(msg): The request is executed successfully, but the server considers it a business error, execute other actions, default pop system prompt information. 
 * failFun: callback function after interface call fails 
 * completeFun: callback function after interface call is completed (call success or failure will be executed) 
 * 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 status = returnData.status; //Sólo cuando se llama a la función de éxito según el acuerdo del interfaz, se llama a la función de éxito cuando se devuelve status 
  console.log(res); //Función de negocio ejecutada normalmente 
  //if(status == true) { 
  //if(successFun) { 
  var dts = returnData.data; 
   successFun(dts); 
    Retorno, equivalente a obtener data y procesar asignar datos directamente en la devolución de llamada 
    else if(status == false) {//} 
   } 
  var msg = returnData.msg; 
   if(!successErrorFun) { 
   console.log(msg); 
    successErrorFun(msg); 
   } 
    else { 
   } 
  } 
   console.log('El servidor no devuelve datos en el formato acordado por el interfaz'); 
  } 
 } 
 reqObj.fail = function(res) { 
  if(failFun) { 
   failFun(res); 
  } 
 } 
 reqObj.complete = function(res) { 
  if(completeFun) { 
   completeFun(res); 
  } 
 } 
 wx.request(reqObj); 
} 
module.exports = { 
 r: r 
} 

El código central es estos tres archivos, a continuación, el archivo demo realiza la prueba：：
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; 
 //Crear objeto de datos de联动三级 ---- Este objeto city es fijo, solo el url de solicitud se cambia según la dirección del servidor de cada servicio 
 _that.setData({ 
  city: { 
  province: {},//formato province:{code: ["11000", "12000"], name: ["Beijing", "Shanghai"]}, solo se puede fijar en name y code, porque el temple necesita mostrar según estos dos parámetros 
  city: {}, 
  county: {}, 
  provinceIndex: 0, 
  cityIndex: 0, 
  countyIndex: 0, 
  cityUrl: "http://localhost:8282/phpserver/areas.php?type=city&fcode="//;type indica la obtención de áreas, fcode es el código de nivel superior, se modificará según los parámetros de solicitud del 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 ); 
 } 
) 

El archivo de código completo se prueba de la siguiente manera:

Aquí hay un bug, al habilitar la actualización deslizante y el componente picker, se superponen. No sé si es el motivo del herramienta de desarrollo o si aún no se ha solucionado el bug.... Solo puedo esperar que el lado de WeChat actualice el mensaje para dar una respuesta.

Esto es todo el contenido del artículo, espero que sea útil para su aprendizaje y que todos apoyen y alienten el tutorial de grito.

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha realizado un procesamiento editorial humano y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.