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

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

微信小程序 使用pickerで省市区の3つのレベルの連動を実現する例コード

　微信小程序でpickerを使用して省市区の三级連動の例

　 現在、小程序の学習では、他のコンポーネントの二次包装ができるかどうかを見ています。これにより、将来的にはさまざまな小程序アプリケーションの迅速な開発が可能になります。現在、pickerのselectorモードは一級のドロップダウンのみがあるため、私たちがそれを通じて}}3、どのpickerを使って三段階連動のテンプレート形式を導入するか？答えはもちろんできます。私の考え方は以下の通りです：

1、templateテンプレート文法を使用して包装し、データはページから渡されます

2、pickerコンポーネントの文法に従って、rangeは中国の地域の配列のみが許可されていますが、各地域のユニークなコードが必要で、次のレベルの連動データをトリガーするために、私は名前とユニークなコードの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に直接固定してテストすることもできます...

以下のコードは以下のretArrの規格に従っています【サーバー側の返信データ形式】

<?php 
header("Content-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: 必須、他のパラメータは任意 接口のURL 
 * data:リクエストのパラメータ ObjectまたはString 
 * successFun(dts):成功で返されるコールバック関数、微信端に追加されたデータは自動的にフィルタリングされ、インターフェースの約定に従って、成功後のdataデータが返され、msgとstatusはフィルタリングされます 
 * successErrorFun(msg):リクエストが成功しましたが、サーバーはビジネスエラーと認識し、他のアクションを実行、デフォルトでシステムのポップアップメッセージを表示します。 
 * failFun:インターフェース呼び出しが失敗した際のコールバック関数 
 * completeFun:インターフェース呼び出しが終了した際のコールバック関数（成功、失敗に関わらず実行されます） 
 * 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) { 
    //headerをオーバーライドします 
    reqObj.header = header; 
  } 
  if(method) { 
    reqObj.method = method; 
  } 
  reqObj.success = function(res) { 
    var returnData = res.data; //ウェブアプリケーションエンドの結果をフィルタリングし、サーバーが返した元のデータを取得します 
    var status = returnData.status; //インターフェースの約定に従って、statusを返す場合にのみ成功関数を呼び出します 
    //console.log(res); 
    //通常のビジネスロジックを実行します 
    if(status == true) { 
      if(successFun) { 
        var dts = returnData.data; 
        successFun(dts);//リターン、dataを取得した後に直接コールバック内でデータを処理および割り当てることを意味します 
      } 
    } 
      var msg = returnData.msg; 
      if(!successErrorFun) { 
        console.log(msg); 
      } 
        successErrorFun(msg); 
      } 
    } 
      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だけ固定です。なぜなら、テンプレートはこれら2つのパラメータに基づいて表示する必要があるからです 
    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); 
 } 
)

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

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

読んでいただきありがとうございます。皆様のサポートに感謝します！

基礎教程
おすすめ