English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Actuellement, l'apprentissage des mini-programmes consiste principalement à voir s'il est possible de réencapsuler d'autres composants, ce qui est bénéfique pour le développement rapide de diverses applications mini-programmes à l'avenir. Actuellement, le modèle de selector du picker ne prend qu'un niveau de déroulement, alors pouvons-nous3un picker pour réaliser le modèle de liaison à trois niveaux et intégrer d'autres pages ? La réponse est définitivement oui. Alors, mon idée est ainsi :
1Utilisez la syntaxe de template pour l'encapsulation, les données sont transmises depuis la page
2、Selon la syntaxe du composant picker, range ne peut être qu'un tableau de régions chinoises, mais nous avons besoin de codes uniques pour chaque région pour déclencher les données de liaison au niveau suivant. Donc, ma méthode consiste à stocker deux ensembles de données dans un objet, des tableaux d'objets séparés pour le nom et le code unique de chaque région. Format [province:{code:['}}110000', '220000'...], name: ['北京市', '天津市'...]}】，Ce format est fixe, nécessitant une coopération du serveur pour retourner
3、Obtenir les données du niveau inférieur via l'événement bindchange de picker, chaque méthode est écrite dans une fonction et exposée pour être appelée par la page
Ensuite, parlons de la structure de répertoire de mon demo :
common
-net.js//intégration deux fois de l'interface wx.request
-cityTemplate.js//méthode de liaison à trois niveaux
page
-demo
-demo.js
-demo.wxml
template
-cityTemplate.wxml
app.js
app.json
app.wxss
Ensuite, j'ai configuré un serveur simple avec phpstudy pour le test. Ne me demandez pas pourquoi le serveur est ainsi, je ne le sais pas non plus, je suis un débutant, je veux juste les données...
Bien sûr, vous pouvez sauter cette étape et fixer les données directement dans demo.js pour le test...
Voici le code : [Les données de retour du serveur respectent le format suivant retArr]
<?php
header("Content-Type",-type: text/html; charset=utf-8-8");
$type=$_REQUEST["type"];//Obtenir les signes des provinces, des villes et des districts
$fcode=$_GET["fcode"];
$retArr=[
"status"=>true,
"data"=>[],
"msg"=>""
];
if($type!="province" && $type!="city" && $type!="county"){
$retArr["status"]=false;
$retArr["msg"]="获取地区类型错误，请 vérifier";
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);
?>
Ensuite, c'est 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}}"> --Régions de deux niveaux-- </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}}"> --Régions de trois niveaux-- </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::
/**
* Obtenir trois fonctions de liaison hiérarchique
* that: instance this de la page d'enregistrement, obligatoire
* p_url: URL de province de premier niveau, obligatoire
* p_data: paramètres de province de premier niveau, optionnel
*/
var net = require( "net" );//Introduire la méthode 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 ) {
//Obtenez les données des provinces de premier niveau
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 );
//Cliquez sur l'événement déclenché par le picker de premier niveau et obtenez la méthode de la ville
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;
//Cliquez sur l'événement déclenché par le picker de deux niveaux et obtenez la méthode de la région
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;
//Cliquez sur l'événement déclenché par le picker de trois niveaux
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
}
Méthode de net.js : :
/**
* Envoi de requêtes HTTP via le réseau, par défaut de type de retour json
*
* url: obligatoire, autres paramètres non obligatoires Adresse de l'interface
* data: paramètres de la requête Object ou String
* successFun(dts): fonction de rappel retournée avec succès, les données ajoutées par le terminal WeChat sont automatiquement filtrées, conformément aux conventions de l'interface, les données data retournées après succès sont filtrées pour msg et status
* successErrorFun(msg): exécution réussie de la requête, mais le serveur considère que c'est une erreur métier, exécute d'autres actions, affiche par défaut un message système.
* failFun: fonction de rappel appelée en cas d'échec de l'appel d'interface
* completeFun: fonction de rappel appelée à la fin de l'appel d'interface (l'appel réussi ou échoué sera exécuté)
* header: objet, définir l'entête de la requête, l'entête ne peut pas définir Referer
* method: par défaut GET, valeurs valides : 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;
//Header par défaut en json
reqObj.header = { 'Content-Type': 'application/json' };
if( header ) {
//Header couverture
reqObj.header = header;
}
if( method ) {
reqObj.method = method;
}
reqObj.success = function( res ) {
var status = returnData.status; //Appel de la fonction réussie uniquement lorsque status est retourné conformément aux conventions de l'interface
console.log(res); //Fonction d'entreprise exécutée normalement
//if(status == true) {
//if(successFun) {
var dts = returnData.data;
successFun(dts);
Retour d'appel, équivalent à traiter directement les données assignées dans le rappel après avoir obtenu data
else if(status == false) {//}
}
var msg = returnData.msg;
if(!successErrorFun) {
console.log(msg);
successErrorFun(msg);
}
else {
}
}
console.log("Le serveur n'a pas renvoyé les données conformément aux conventions de l'interface");
}
}
reqObj.fail = function(res) {
if(failFun) {
failFun(res);
}
}
reqObj.complete = function(res) {
if(completeFun) {
completeFun(res);
}
}
wx.request(reqObj);
}
module.exports = {
r: r
}
Le code principal est dans ces trois fichiers ci-dessus, puis c'est le fichier demo qui effectue les tests : :
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;
//Créer un objet de données de liaison hiérarchique de trois niveaux ---- Ce city objet est fixe, seule l'URL de la demande est modifiée en fonction de l'adresse du serveur de chaque service.
_that.setData({
city: {
province: {},//format province:{code: ["11000", "12000"], name: ["北京市", "上海市"], il ne peut pas être fixe que name et code, car le modèle a besoin de ces deux paramètres pour afficher
city: {},
county: {},
provinceIndex: 0,
cityIndex: 0,
countyIndex: 0,
cityUrl: "http://localhost:8282/phpserver/areas.php#63;type=city&fcode="//;type représente l'obtention de la région, fcode est le code de niveau supérieur, il sera modifié selon les paramètres de la demande du backend
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 );
}
})
Voici le fichier de code complet, le test final est le suivant :
Il existe un bug ici, lorsque vous activez le rafraîchissement en descendant et que le composant picker est également déroulé, ils se chevauchent. Je ne sais pas s'il s'agit d'une raison de l'outil de développement ou d'un bug non encore corrigé... Je ne peux que attendre des mises à jour de WeChat pour obtenir un retour.
Voici la totalité du contenu de cet article, j'espère qu'il vous aidera dans vos études et que vous soutiendrez également le tutoriel à crier.
Déclaration : le contenu de cet article est tiré d'Internet, propriété de ses auteurs respectifs, contribué et téléchargé par les utilisateurs d'Internet de manière volontaire. Le site Web ne détient pas de droits de propriété, n'a pas été édité par l'homme et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation et fournir des preuves. Une fois vérifié, le site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)