استخدام picker لتقسيم المقاطعات والمحافظات والمديريات في تطوير WeChat

حاليًا، دراسة تطبيقات الهاتف الذكي تتعلق بالتحقق من إمكانية تعقيم مكونات أخرى، مما يسهل تطوير تطبيقات الهاتف الذكي المختلفة في المستقبل. لقد وجدت أن نموذج 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"=>\"\" 
]; 
إذا ($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=[]; 
 إذا ($P_fcode==\"110000\") { 
  $code=[\"110100\"]; 
  $name=[\"北京市\"]; 
  $fcode=$P_fcode; 
 } 
 إذا ($P_fcode==\"350000\") { 
  $code=[\"350100\", \"350200\", \"350300\", \"350400\", \"350500\", \"350600\", \"350700\", \"350800\", \"350900\"]; 
  $name=[\"福州市\", \"厦门市\", \"莆田市\", \"三明市\", \"泉州市\", \"漳州市\", \"南平市\", \"龙岩市\", \"宁德市\"]; 
  $fcode=$P_fcode; 
 } 
 إذا ($P_fcode==\"710000\") { 
 } 
 $city=[\"code\"=>$code, \"name\"=>$name, \"fcode\"=>$fcode]; 
 return $city; 
} 
function getCounty($P_fcode){ 
 $county=[]; 
 $code=[]; 
 $name=[]; 
 $fcode=[]; 
 إذا ($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); 
?> 

الآن يليه template.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: 注册页面的this实例 必填 
 * p_url: 一级省份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( { 
  'مدينة.الولاية': 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 ]; 
  إذا( !_fcode ) { 
   _fcode = 0; 
  } 
  var _cityUrl = e.target.dataset.cityUrl; 
  g_url = _cityUrl + _fcode; 
  g_cbSuccess = function( res ) { 
   that.setData( { 
    'مدينة.المدينة': res 
   }); 
  } 
  net.r( g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method ); 
 }; 
 that[ "مكانيةالولايةPickerChange" ] = changeProvince; 
 //استدعاءحدثpickerثانويالنقروالحصولعلىطريقةالمنطقة 
 var changeCity = function( e ) { 
  that.setData( { 
   'مدينة.مكانيةالمدينة': e.detail.value 
  }); 
  var _fcode = that.data.city.city.code[ e.detail.value ]; 
  إذا( !_fcode ) { 
   _fcode = 0; 
  } 
  var _countyUrl = e.target.dataset.countyUrl; 
  g_url = _countyUrl + _fcode; 
  g_cbSuccess = function( res ) { 
   that.setData( { 
    'مدينة.القضاء': res 
   }); 
  }; 
  net.r( g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method ); 
 }; 
 that[ "مدينة.مكانيةالمدينة" ] = changeCity; 
 //استدعاءحدثpickerثلاثيالنقر 
 var changeCounty = function( e ) { 
  that.setData( { 
   'مدينة.مكانيةالقضاء': e.detail.value 
  }); 
 }; 
 that["مدينة.القضاء"] = changeCounty; 
} 
function getProvinceFun(that, p_url, p_data){ 
 g_cbSuccess = function( res ) { 
  that.setData( { 
  'مدينة.الولاية': 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 an HTTP request, the 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, the data added by the WeChat end is automatically filtered, 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 pop system prompt information. 
 * failFun: Callback function when the interface call fails 
 * completeFun: Callback function after the interface call ends (either success or failure will execute) 
 * header: object, sets the request header, Referer cannot be set in the header 
 * 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 ) { 
  // Override header 
  reqObj.header = header; 
 } 
 if( method ) { 
  reqObj.method = method; 
 } 
 reqObj.success = function( res ) { 
  var returnData = res.data; // Filter the results from the WeChat end to get the original data returned by the server 
  var status = returnData.status; // According to the interface agreement, the success function is called only when status is returned 
  if(status == true) { 
  if(successFun) { 
  var dts = returnData.data; 
   successFun(dts); // إرجاع، يشبه الحصول على data وتعامل البيانات مباشرة داخل الإرجاع 
    else if(status == false) { 
    } 
   } 
  var msg = returnData.msg; 
   if(!successErrorFun) { 
   console.log(msg); 
    successErrorFun(msg); 
   } 
    else { 
   } 
  } 
   console.log("لم يتبع الخادم الشكل المحدد للبيانات في واجهة البروتوكول"); 
  } 
 } 
 reqObj.fail = function(res) { 
  if(failFun) { 
   failFun(res); 
  } 
 } 
 reqObj.complete = function(res) { 
  if(completeFun) { 
   completeFun(res); 
  } 
 } 
 wx.request(reqObj); 
} 
module.exports = { 
 r: r 
} 

الشفرة الأساسية هي هذه الملفات الثلاثة، والآن ننتقل إلى ملف 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; 
 //إنشاء جسم بيانات الت联动 ثلاثي المستويات ---- هذا الجسم city ثابت، ويتم تغيير عنوان الطلب بناءً على عنوان الخادم الخاص بكل خدمة 
 _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 represents the area to be obtained fcode is the first-level code, it will be modified according to the backend request parameters 
  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 للإبلاغ عن الرد.

هذا هو محتوى المقال الكامل، آمل أن يكون قد ساعد في تعلمكم، وآمل أن تشجعوا دائمًا على دعم دروس النفخ.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، حقوق النشر تخص المالك الأصلي، المحتويات تم إدراجها من قبل مستخدمي الإنترنت بذاتهم، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل أي مسؤولية قانونية. إذا لاحظت أي محتوى يخالف حقوق النشر، يرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' ب '@') لإبلاغنا، وقدم الأدلة ذات الصلة، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فوراً.