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

  1. Ubicación actual
  2. Página principal
  3. Notas de experiencia
  4. Texto principal

Ejemplo de código de enlace de联动实例 de picker en WeChat Mini Program

　Ejemplo de联动实例 de picker para mini programa de WeChat

　 Actualmente, el aprendizaje de mini programas se centra más en ver si se puede encapsular otros componentes para facilitar el desarrollo rápido de varios mini programas en el futuro. Actualmente, he descubierto que el selector del modelo picker solo tiene un nivel de desplazamiento, ¿entonces, ¿podemos]}3¿Y cómo puedo usar un picker para implementar el formato de tres niveles de联动 plantilla desde otras páginas? La respuesta es claramente sí. Entonces, mi enfoque es así:

1、Utilizar la sintaxis de plantilla template para encapsular, los datos se pasan desde la página

2、De acuerdo con la sintaxis del componente picker，El rango solo puede ser un grupo de arrays de regiones chinas, pero necesitamos el código único de cada región para activar los datos de联动 del siguiente nivel. De esta manera, mi enfoque es almacenar dos arrays de datos de dos conjuntos en un objeto, uno para el nombre de la región y el otro para el código único. Formato [province:{code:['110000', '220000'...], name: ['Pekín', 'Tianjin'...]}]，este formato es fijo, se requiere que el lado del servidor lo coordine para devolver

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

Luego hablemos de la estructura de directorios de mi demo:

common

　　　 -net.js//wx.request integración de la solicitud de interfaz dos veces

　　　 -cityTemplate.js//Método de联动 tres niveles

page

　　　 -demo

　　　　　　　 -demo.js

　　　　　　　 -demo.wxml

template

　　　 -cityTemplate.wxml

app.js

app.json

app.wxss

Luego, utilice phpstudy para construir un servidor simple para la prueba. No me pregunten 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 código siguiente: [El formato de datos de retorno del lado del servidor sigue el estándar de retArr mencionado a continuación]

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

A continuación, 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}}"> --Áreas urbanas 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}}"> --Áreas tricolores-- </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:  Página de registro de instancia de this obligatoria 
 * p_url: URL del primer nivel de provincias, obligatorio 
 * p_data: Parámetros del primer nivel de provincias, opciónal 
 */ 
var net = require( "net" );//Importar el método de solicitud 
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 provincias 
  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 primer nivel y obtener el método de ciudad y región 
  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 segundo nivel y obtener el método de 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 tercer nivel 
  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 ) { 
    //Cover header 
    reqObj.header = header; 
  } 
  if( method ) { 
    reqObj.method = method; 
  } 
  reqObj.success = function( res ) { 
    var returnData = res.data; //Filtrar el resultado del extremo de WeChat y obtener los datos originales devueltos por el servidor 
    var status = returnData.status; //Al retornar status según el acuerdo de la interfaz, se llama a la función de éxito 
    //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 directamente el asignamiento de datos en el retorno de llamada 
      } 
    } else if( status == false ) { 
      var msg = returnData.msg; 
      if( !successErrorFun ) { 
        console.log( msg ); 
      } else { 
        successErrorFun( msg ); 
      } 
    } else { 
      console.log( "El servidor no devolvió datos en el formato acordado por la 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 nuclear es estos tres archivos, a continuación, se realiza la prueba en el archivo 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; 
  //Crear objeto de datos de联动 de tres niveles ---- Este objeto city es fijo, solo la 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: ["Pekín", "Shanghai"]}, solo se puede fijar en name y code, porque el template 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 obtener la región, fcode es el código de nivel superior,届时具体根据 los parámetros de solicitud del backend para modificar 
    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 ha probado de la siguiente manera:

Aquí hay un bug, al activar la actualización de desplazamiento y el componente picker, se solapan, no sé si es por reasons de 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 la retroalimentación

Gracias por leer, espero que pueda ayudar a todos, gracias por el apoyo a este sitio!

Tutoriales básicos
Te gustará