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

  1. 現在の場所
  2. ホームページ
  3. 経験記録
  4. 本文

微信開発でpickerを封装して省市区の3つのレベルの連動テンプレートを作成

現在、ミニプログラムの学習は、他のコンポーネントを二次エンブレースできるかどうかを見ることに多くの時間を割いています。現在、ピッカーのselectorモードは一級のドロップダウンだけがありますので、以下のようにできますか？3ピッカーやることで、三级連動テンプレートの形式で他のページに引き入れることは可能です。私の考え方は以下の通りです：

1templateテンプレート语法を使用してエンブレースし、データはページから传入されます。

2、pickerコンポーネントの文法に従って、rangeは中国の地域の配列でなければなりませんが、各地域のユニークなコードが必要で、次のレベルの連動データをトリガーするために使用されます。そのため、私は名前とユニークなコードの2つのオブジェクト配列を分けて保存するオブジェクト内の2つのデータ配列を使用する方法を選びました。フォーマット[province:{code:['}}110000', '220000'...], name: ['北京市', '天津市'...]}】の形式は固定されています。これにはサービス側のサポートが必要です

3、pickerのbindchangeイベントを通じて次のレベルのデータを取得し、各メソッドを関数に記述し、ページの呼び出しに公開します

それでは、私の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に直接固定してテストすることもできます...

以下はサービス側の返却データ形式です：

<?php 
header("Content-Type",-type: text/html; charset=utf-8-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=["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区"]; 
  $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); 
?>

次に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: 登録ページの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( { 
  '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:オブジェクト、リクエストのヘッダーを設定、ヘッダーには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 ) { 
  //ヘッダーをオーバーライド 
  reqObj.header = header; 
 } 
 if( method ) { 
  reqObj.method = method; 
 } 
 reqObj.success = function( res ) { 
  var status = returnData.status; //インターフェースの約定に従って、statusを返す場合にのみ成功関数を呼び出します 
  console.log(res); //通常のビジネス関数の実行 
  //if(status == true) { 
  //if(successFun) { 
  var dts = returnData.data; 
   successFun(dts); 
    コールバック、データを取得した後に直接コールバック内でデータ処理を行うのと同じです 
    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 
}

これらの3つのファイルが核心コードです。次に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オブジェクトは固定で、リクエストのURLは各サービスエンドのアドレスに応じて変更されます 
 _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#63;type=city&fcode="//typeは地域を取得するためです。fcodeは一級コードです。その時点で後端のリクエストパラメータに応じて具体的に修正してください。 
  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); 
 } 
})

以下は完全なコードファイルのテスト結果です：

ここにバグがあります。リフレッシュとピッカーコンポーネントのドロップダウンが重なっています。これは開発ツールの原因でしょうか、それともまだ修正していないバグでしょうか。。。微信側からの更新情報を待つしかありません。

これで本文のすべての内容が終わりです。皆様の学習に役立つことを願っています。また、呐喊教程を多くのサポートをお願いします。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしました。本サイトは所有権を持ちません。人工的な編集は行われていません。また、関連する法的責任を負いません。著作権侵害が疑われる内容を見つけた場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メールを送信する際、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がとりたいとされましたら、本サイトは直ちに侵害疑いの内容を削除します。}

基礎教程
おすすめ