مثال على تنسيق联动 بين المحافظات والمدن والمناطق باستخدام picker في تطبيقات WeChat Mini Program

　استخدام picker في تطبيقات الصغرى لإنشاء نموذج اتصال ثلاثي الأبعاد لولاية ومدينة ومقاطعة

　 حاليًا، يركز تعلم التطبيقات الصغيرة على معرفة ما إذا كان بالإمكان تضمين مكونات أخرى مرة أخرى، مما يساعد في تطوير تطبيقات صغيرة مختلفة بسرعة في المستقبل. لقد وجدت أن نموذج selector الخاص بـ picker هو فقط مستوى تنزيل واحد، هل يمكننا أن نحقق تنسيق اتصال ثلاثي الأبعاد باستخدام ثلاثة picker لجلب نماذج أخرى إلى الصفحات الأخرى؟ الإجابة هي نعم. إذن، أفكاري تبدأ من هنا:

1. استخدم لغة النمذجة template لتقديم الطبقة، والبيانات تأتي من الصفحة

2. بناءً على بنية picker المكون، يمكن أن تكون range مجموعة من الأماكن الصينية فقط، ولكن نحتاج إلى رمز الفريدة لكل منطقة لتنشيط البيانات الاتصالية التالية. لذا، طريقتي هي من خلال مجموعتين من البيانات في عنوان مزدوج لتخزين مجموعتين من الأسماء والرموز الفريدة في عنوان مزدوج. نموذج [province:{code:['110000', '220000'...], name: ['بكين', 'تانغشان'...]}]، وهو نموذج ثابت، ويجب أن يعمل السيرفر بشكل مشترك ليعود

3. للحصول على بيانات المستوى التالي باستخدام أحداث bindchange الخاصة بـ picker، وكل طريقة يجب أن تكون مكتوبة كدالة وتُعرض للصفحة للاستدعاء

ثم سأحدثك عن بنية مجلدات demo الخاصة بي:

common

　　　 -net.js//wx.request طلب وحدة الاتصال ثانيًا

　　　 -cityTemplate.js//طريقة الاتصال الثلاثي الأبعاد

page

　　　 -demo

　　　　　　　 -demo.js

　　　　　　　 -demo.wxml

template

　　　 -cityTemplate.wxml

app.js

app.json

app.wxss

ثم، قمت بإنشاء خدمة بسيطة باستخدام phpstudy للاختبار. لا تسألني لماذا هو هذا الشكل في الخدمة السيرفر، ولا أستطيع أن أعرف، فقط أريد البيانات عند بدء تعلمي...

بالطبع يمكنك تجنب هذا الخطوة، وإذا كنت تستطيع تثبيت البيانات مباشرة في demo.js للاختبار...

كود التالي：【تنسيق البيانات التي تعود من الخادم يتبع النمط التالي retArr】

<?php 
header("Content-type: text/html; charset=utf-8");  
$type=$_REQUEST["type"];//获取省市区的标志 
$fcode=$_GET["fcode"]; 
$retArr=[ 
  "status"=>true, 
  "data"=>[], 
  "msg"=>"" 
]; 
if($type!="province" && $type!="city" && $type!="county"){ 
  $retArr["status"]=false; 
  $retArr["msg"]="获取地区类型错误，请检查"; 
  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=["Dongcheng Qu", "Xicheng Qu", "Chongwen Qu", "Xuanwu Qu", "Chaoyang Qu", "Fengtai Qu", "Shijingshan Qu"]; 
    $fcode=$P_fcode; 
  } 
  if($P_fcode=="350100"){ 
    $code=["350102", "350103", "350104"]; 
    $name=["Gulou Qu", "Taijiang Qu", "Cangshan Qu"]; 
    $fcode=$P_fcode; 
  } 
  if($P_fcode=="350200"){ 
    $code=["350203", "350205", "350206"]; 
    $name=["Siming Qu", "Haicang Qu", "Huli Qu"]; 
    $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); 
?> 

الآن يليه 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}}"> --مدينة مستوى الثاني-- </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}}"> --منطقة مستوى الثالث-- </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::

/** 
 * الحصول على ثلاثة وظائف للتحكم في المستوى الثالث 
 * that: نموذج الصفحة المسجلة، يجب ان يكون مطلوباً 
 * p_url: عنوان التقييم الاولي، يجب ان يكون مطلوباً 
 * p_data: اختيارار امكانية التقييم الاولي 
 */ 
var net = require( "net" );//引入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 ) { 
  //获取一级省份数据 
  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 ); 
  //点击一级picker触发事件并获取市区方法 
  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; 
  //点击二级picker触发事件并获取地区方法 
  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; 
  //点击三级picker触发事件 
  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،ضبط عنوان الطلب،لا يمكن تعيين Referer في header 
 * 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 ) { 
    //覆盖header 
    reqObj.header = header; 
  } 
  if( method ) { 
    reqObj.method = method; 
  } 
  reqObj.success = function( res ) { 
    var returnData = res.data; // Filter the results on the WeChat side to get the original data returned by the server 
    var status = returnData.status; // When returning status according to the interface agreement, call the success function 
    //console.log(res); 
    // normal business function execution 
    if( status == true ) { 
      if( successFun ) { 
        var dts = returnData.data; 
        successFun( dts );// callback, equivalent to processing the assigned data directly in the callback after getting the data 
      } 
    } else if( status == false ) { 
      var msg = returnData.msg; 
      if( !successErrorFun ) { 
        console.log( msg ); 
      } else { 
        successErrorFun( msg ); 
      } 
    } else { 
      console.log( "The server did not return data in the agreed format" ); 
    } 
  } 
  reqObj.fail = function( res ) { 
    if( failFun ) { 
      failFun( res ); 
    } 
  } 
  reqObj.complete = function( res ) { 
    if( completeFun ) { 
      completeFun( res ); 
    } 
  } 
  wx.request( reqObj ); 
} 
module.exports = { 
  r: r 
} 

The core code is the above three files, and the next is the demo file for testing：：

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; 
  // create a three-level联动 data object ---- this city object is fixed, and only the request url changes according to the server address of each service 
  _that.setData( { 
   city: { 
    province: {},//التنسيق هو province:{code: ["11000", "12000"], name: ["بكين", "شنيانغ"]}، يجب أن يكون ثابتًا لأن النموذج يحتاج إلى استخدامه لهذه المعاملتين name وcode 
    city: {}, 
    county: {}, 
    provinceIndex: 0, 
    cityIndex: 0, 
    countyIndex: 0, 
    cityUrl: "http://localhost:8282/phpserver/areas.php?type=city&fcode=",//type يعني الحصول على منطقة fcode هو رمز المستوى الأول، عند ذلك يجب تعديل المعاملات الطلب الخلفي حسب الحاجة 
    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 ); 
 } 
) 

في النهاية، يتم اختبار ملفات الكود الكامل كما يلي:

هناك بيانوكس في هذا المكان، عند تشغيل تحديث السحب من الأسفل ومدخل picker، يحدث تلاقي. لا أعرف إذا كان السبب هو أداة التطوير، أو أنه ما زال هناك بيانوكس لم يتم تعديله... يمكنني فقط أن أتطلع إلى تحديثات من قبل WeChat لإعطاء رد.

شكرًا على القراءة، آمل أن تكون قد ساعدتكم، شكرًا لدعمكم لموقعنا!