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

  1. 현재 위치
  2. 홈페이지
  3. 경험笔记本
  4. 본문

微信 개발에서 picker를 사용하여 시도, 도시, 시三级 연동 템플릿을 포장

현재小程序을 배우는 것은 주로 다른 컴포넌트를 재포장할 수 있는지 확인하는 것이며, 이는 앞으로 다양한小程序 애플리케이션을 빠르게 개발하는 데 유용합니다. 현재 picker의 selector 모드는 단계별下拉만 있지만, 우리는 이를 통해3picker를 사용하여 3단계 연동 템플릿 형식으로 다른 페이지에 어떻게 도입할 수 있을까요? 답은 확정적입니다. 그렇다면 제 생각은 이렇습니다:

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

2、根據picker組件的語法，range只能是一組中文地區數組，但是我們需要每個地區的唯一碼來觸發下一級聯動數據。這樣，我的做法是通過一個對象裡面的兩組數據分別存儲中文名和唯一碼的兩個對象數組。格式【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"); 
$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): 성공적으로 반환된 콜백 함수, 위챗 플랫폼에 추가된 데이터를 자동으로 필터링, 인터페이스 계약에 따라 성공 후 데이터를 반환, 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; //위ixin 단말기 결과를 필터링하여 서버가 반환한 원본 데이터를 얻습니다 
  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; 
 //三级联动数据对象 생성 ---- 이 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?type=city&fcode="//;type은 지역을 가져오는 데 사용되며, fcode는 1단계 코드입니다. 그때마다 백엔드 요청 매개변수에 따라 수정됩니다 
  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 컴포넌트의下拉이 겹쳐집니다. 개발 도구의 이유인지, 아직 수정되지 않은 버그인지 모르겠습니다. 만약에 웨이보 측에서 메시지를 업데이트해 주면 피드백을 기다리겠습니다.

이것이 본문의 전체 내용입니다. 여러분의 학습에 도움이 되길 바라며, 많은 지원을 부탁드립니다.

고지사항: 본문의 내용은 인터넷에서 수집되었으며, 저작권자가 소유하고 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 사이트는 소유권을 가지지 않으며, 인공적인 편집을하지 않으며, 관련 법적 책임을 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있으면 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 (메일을 보내는 경우 #을 @으로 변경하십시오) 신고하시고 관련 증거를 제공하시면, 사이트가 즉시 저작권 침해 내용을 삭제합니다.

기본 튜토리얼
추천해 드립니다