위ixin小程序 사용 picker로 시, 도, 시三级 연동 예제 코드

　위챗小程序 사용자 picker로 시도, 시, 구, 지역 3단계 연동 예제

　 현재小程序을 공부하는 것은 주로 다른 컴포넌트를 재封装할 수 있는지 확인하는 것입니다. 이를 통해 향후 다양한小程序 애플리케이션을 빠르게 개발할 수 있게 됩니다. 현재 picker의 selector 모드는 단일 단계下拉입니다. 따라서 우리는 picker의 selector 모드를 통해}}3picker를 사용하여 세 단계 연동 템플릿 형식으로 다른 페이지에서 데이터를 가져올 수 있을까요? 답은 당연히 가능입니다. 그렇다면 제 생각은 이렇습니다:

1template 템플릿 문법을 사용하여 포장합니다, 데이터는 페이지에서传入

2picker 컴포넌트의 문법에 따라range는 한자 지역 배열만 가능하지만, 우리는 각 지역의 유일한 코드를 통해 다음 단계 연동 데이터를 트리거해야 합니다. 그래서 저는 중文名과 유일한 코드의 두 개의 객체 배열을 분리하여 저장하는 방법을 사용했습니다. 형식【province:{code:['110000', '220000'...], name: ['베이징시', '天津市'...]】이 형식은 고정되어 있으며, 서버가 반환하는 데 서버와 협력이 필요합니다

3picker의 bindchange 이벤트를 통해 다음 단계 데이터를 가져오고, 각 메서드를 함수에 기록하여 페이지가 호출할 수 있도록 노출합니다

그런 다음, 제 demo의 디렉토리 구조에 대해 설명하겠습니다:

common

　　　 -net.js//wx.request API를 두 번째로 통합

　　　 -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=[]; 
  110000"){ 
    $code=[\"110100"]; 
    $name=["北京市"]; 
    $fcode=$P_fcode; 
  } 
  350000"){ 
    $code=[\"350100", "350200", "350300", "350400", "350500", "350600", "350700", "350800", "350900"]; 
    $name=["福州市", "厦门市", "莆田市", "三明市", "泉州市", "漳州市", "南平市", "龙岩市", "宁德市"]; 
    $fcode=$P_fcode; 
  } 
  710000"){ 
  } 
  $city=["code"=>$code, "name"=>$name, "fcode"=>$fcode]; 
  return $city; 
} 
function getCounty($P_fcode){ 
  $county=[]; 
  $code=[]; 
  $name=[]; 
  $fcode=[];  
  110100"){ 
    $code=[\"110101", \110102", \110103", \110104", \110105", \110106", \110107"]; 
    $name=["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区"]; 
    $fcode=$P_fcode; 
  } 
  350100"){ 
    $code=[\"350102", \350103", \350104"]; 
     
    $fcode=$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 이벤트를 trigge하고 시도 메서드를 가져옵니다 
  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 이벤트를 trigge하고 지역 메서드를 가져옵니다 
  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 이벤트를 trigge 
  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): 성공적으로 반환된 콜백 함수, 위챗 엔드에서 추가된 데이터를 자동으로 필터링, 인터페이스 계약에 따라 반환된 데이터, msg와 status를 필터링 
 * successErrorFun(msg): 요청이 성공적으로 수행되었지만 서버는 비즈니스 오류로 간주, 다른 행동을 수행, 기본적으로 시스템 알림 메시지를 표시. 
 * failFun: 인터페이스 호출 실패 시 호출되는 콜백 함수 
 * completeFun: 인터페이스 호출이 끝나면 호출되는 콜백 함수(성공, 실패 모두 호출됨) 
 * header: object, 요청 헤더 설정, 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);//回调, 데이터를 받은 후 즉시回调 내에서 데이터 할당을 처리하는 것과 동일합니다 
      } 
    } 
      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 
}

핵심 코드는 위의 이 세 파일입니다. 다음은 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; 
  //3단계 연동 데이터 객체 생성 ---- 이 city 객체는 고정되어 있습니다. 요청하는 URL은 각 서버 주소에 따라 변경됩니다 
  _that.setData({ 
   city: { 
    province: {},//형식 province:{code: ["11000", "12000"], name: ["베이징시", "상하이시"], 이름과 코드만 고정됩니다. 템플릿은 이 두 매개변수에 따라 표시되어야 합니다 
    city: {}, 
    county: {}, 
    provinceIndex: 0, 
    cityIndex: 0, 
    countyIndex: 0, 
    cityUrl: "http://localhost:8282/phpserver/areas.php#63;type=city&fcode="//;type은 지역을 가져오는 데 사용되며 fcode는 1단계 코드입니다. 그때마다 백엔드 요청 매개변수에 따라 수정됩니다 
    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); 
 } 
)

위의 전체 코드 파일은 다음과 같이 테스트되었습니다:

이곳에는 버그가 있습니다. 드롭다운 리프레시와 피커 컴포넌트의 드롭다운이 겹쳐집니다. 개발 도구의 이유인지 아니면 아직 수정되지 않은 버그인지 모릅니다... 위챗 측에서 메시지를 업데이트해 주기를 기다려야 합니다.

읽어주셔서 감사합니다. 많은 도움이 되길 바랍니다. 감사합니다. 사이트에 대한 지원에 감사합니다!

기본 튜토리얼

추천해드립니다