English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Derzeit konzentriert sich die Lernphase von Mini-Programmen mehr darauf, ob andere Komponenten wiederverwendet werden können, was die schnelle Entwicklung verschiedener Mini-Programm-Anwendungen zugünftig macht. Derzeit zeigt der Selector-Modus des Pickers nur eine Ebene der Auswahl an, ob wir durch3einen Picker, um eine dreistufige Verknüpfung im Formular zu verwenden, um andere Seiten zu integrieren? Die Antwort ist eindeutig ja. Meine Überlegung ist so:
1、Verwendung der Template-Syntax zur Verpackung, Daten werden von der Seite übergeben
2、Nach der Syntax des picker-Components kann range nur ein Set von chinesischen Regionen sein, aber wir benötigen einzigartige Codes für jede Region, um die nächste Verknüpfung zu aktivieren. Daher meine Methode, durch两组数据在中文名和唯一码的两个对象数组中分别存储，格式【province:{code:['110000', '220000'...], name: ['Beijing Stadt', 'Tianjin Stadt'...]}】，dieses Format ist festgelegt und das Server-Protokoll muss dazu passen, um zurückzugeben
3、Durch das bindchange-Ereignis des pickers werden die Daten der nächsten Ebene abgerufen, jede Methode wird in eine Funktion geschrieben und dann herausgegeben, um die Seite aufzurufen
Dann erkläre ich die Verzeichnisstruktur meines demos:
common
-net.js//wx.request Anfrageschnittstelle erneut integriert
-cityTemplate.js//Methode zur dreistufigen Verbindung
page
-demo
-demo.js
-demo.wxml
template
-cityTemplate.wxml
app.js
app.json
app.wxss
Dann habe ich eine einfache Server-Infrastruktur mit phpstudy aufgebaut, um zu testen. Frag mich nicht, warum der Server so ist, ich verstehe es nicht, ich bin Anfänger und ich brauche nur Daten...
Natürlich können Sie diesen Schritt weglassen und die Daten direkt im demo.js fest verankern, um zu testen...
Der Rückgabeprotokoll des Servers dieses Codes ist folgendermaßen normiert:【
<?php
header("Content-type: text/html; charset=utf-8");
$type=$_REQUEST["type"];//Zeichen der Provinz, Stadt und Bezirk ermitteln
$fcode=$_GET["fcode"];
$retArr=[
"status"=>true,
"data"=>[],
"msg"=>""
];
if($type!="province" && $type!="city" && $type!="county"){
$retArr["status"]=false;
$retArr["msg"]="Fehler bei der Bereichsart, bitte überprüfen Sie";
echo json_encode($retArr);
exit;
}
function getProvince(){
$province=[];
$code=["110000", "350000", "710000"];
$province["code"]=$code;
$name=["Beijing Stadt", "Fujian Provinz", "Taiwan Provinz"];
$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);
?>
Hier folgt 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]}}</item>/text>
</picker>
</view>
<view class="city">
<block wx:if="{{!city.name.length}}"> --Zweite Stadtregion-- </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]}}</item>/text>
</picker>
</block>
</view>
<view class="county">
<block wx:if="{{!county.name.length}}"> --Dritte Region-- </block>
<block wx:if="{{county.name.length>0}}">
<picker bindchange="countyPickerChange" value="{{countyIndex}}" range="{{county.name}}">
<text class="select-item">{{county.name[countyIndex]}}</item>/text>
</picker>
</block>
</view>
</view>
</template>
cityTemplate.js::
/**
* Erhalten der drei Funktionen der dritten Ebene der Kombination
* that: Beispielinstanz der Registrierungsseite, obligatorisch
* p_url: URL der ersten Ebene der Provinz, obligatorisch
* p_data: Parameter der ersten Ebene der Provinz, optional
*/
var net = require("net");//Einführung der Anforderungsmethode
var g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method;
function initCityFun( that, p_url, p_data ) {
//Erhalten Sie die Daten der ersten Provinz
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 );
//Klicken Sie auf das erste picker, lösen Sie das Ereignis aus und erhalten Sie die Stadtmethoden
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;
//Klicken Sie auf das zweite picker, lösen Sie das Ereignis aus und erhalten Sie den Gebietsmethode
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;
//Klicken Sie auf das dritte picker, um das Ereignis auszulösen
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
}
Schonmal erwähnt: net.js-Methode:：
/**
* Netzwerk sendet HTTP-Anfrage, Standardwert für Rückgabetyp ist json
*
* url: Muss, andere Parameter nicht obligatorisch, Interface-Adresse
* data: Parameter der Anfrage Object oder String
* successFun(dts): Callback-Funktion für den erfolgreichen Rückgabewert, automatisch gefilterte Daten hinzugefügt von der WeChat-Plattform, gemäß den Vereinbarungen der Schnittstelle, gibt die Daten zurück, die nach dem Erfolg zurückgegeben werden, filtert msg und status
* successErrorFun(msg): Erfolgreiche Ausführung der Anfrage, aber der Server betrachtet den Geschäftsfehler als Fehler, führt andere Aktionen aus, Standardmäßig wird eine Systemhinweisinformation angezeigt.
* failFun: Callback-Funktion für fehlgeschlagene Interface-Aufrufe
* completeFun: Callback-Funktion am Ende der Interface-Aufrufe (wird bei Erfolg und Fehler aufgerufen)
* header: Objekt, Setzen der Header für die Anfrage, Referer darf im Header nicht gesetzt werden
* method: Standardwert GET, gültige Werte: 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;
//Standard-Header für JSON
reqObj.header = { 'Content-Typ': 'application/json' };
if( header ) {
//header ersetzen
reqObj.header = header;
}
if( method ) {
reqObj.method = method;
}
reqObj.success = function( res ) {
var returnData = res.data; //Filterung der Ergebnisse des WeChat-Endgeräts, um die Originaldaten der Rückgabe des Servers zu erhalten
var status = returnData.status; //Nur wenn status nach dem Abkommen der Schnittstelle zurückgegeben wird, wird die Erfolgsmethode aufgerufen
//console.log(res);
//Normaler Geschäftsfunc
if(status == true) {
if(successFun) {
var dts = returnData.data;
successFun(dts);//Rückruf, was bedeutet, dass die Daten direkt im Callback nach dem Erhalten von data verarbeitet und zugewiesen werden
}
} else if(status == false) {
var msg = returnData.msg;
if(!successErrorFun) {
console.log(msg);
} else {
successErrorFun(msg);
}
} else {
console.log("Der Server hat die Daten nicht im vereinbarten Format der Schnittstelle zurückgegeben");
}
}
reqObj.fail = function(res) {
if(failFun) {
failFun(res);
}
}
reqObj.complete = function(res) {
if(completeFun) {
completeFun(res);
}
}
wx.request(reqObj);
}
module.exports = {
r: r
}
Das Kerncode ist in diesen drei Dateien oben, was folgt ist der Test in der Datei 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;
//Erstellen eines dreistufigen Datenobjekts ---- Dieser city-Objekt ist festgelegt, nur die URL der Anfrage wird entsprechend der Adressen der jeweiligen Server-Endpunkte geändert.
_that.setData({
city: {
province: {},//Format province:{code: ["11000", "12000"], name: ["Beijing Stadt", "Shanghai Stadt"], können nur name und code festgelegt werden, da das Template diese beiden Parameter benötigt, um anzuzeigen
city: {},
county: {},
provinceIndex: 0,
cityIndex: 0,
countyIndex: 0,
cityUrl: "http://localhost:8282/phpserver/areas.php?type=city&fcode="//;type bedeutet, dass Regionen abgerufen werden, fcode ist der erste Code, der später gemäß den Anfrageparametern des Backends geändert wird
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 );
}
})
Hier ist das vollständige Code-Dokument, das wie folgt getestet wurde:
Es gibt hier einen Fehler. Wenn Sie die Dropdown-Auffrischung und das Dropdown des Picker-Components aktivieren, überschneiden sich diese. Es ist nicht bekannt, ob dies auf die Ursachen des Entwicklungsprogramms zurückzuführen ist oder noch nicht behobene Fehler. Wir können nur abwarten, bis Updates von der WeChat-Seite eingehen, um Feedback zu erhalten.
Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und wir freuen uns über Ihre Unterstützung und Ihr Engagement für die Anleitung.
Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetnutzern freiwillig eingereicht und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie urheberrechtlich relevante Inhalte entdecken, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @ beim Senden von E-Mails, um eine Beschwerde zu melden und relevante Beweise bereitzustellen. Sobald die Beschwerde bestätigt wird, wird diese Website die beanstandeten urheberrechtlichen Inhalte sofort löschen.)