微信小程序学习：使用picker封装省市区三级联动模板

最新推荐文章于 2024-08-13 16:20:34 发布

草灯

最新推荐文章于 2024-08-13 16:20:34 发布

阅读量3.3w

点赞数 17

分类专栏： web前端微信开发小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/eadio/article/details/52913363

版权

本文介绍了如何在微信小程序中通过template和picker组件实现省市区三级联动的效果。通过服务端返回的数据格式和本地数据相结合，利用bindchange事件处理联动，并在新版本中解决了text组件触发问题，确保功能正常运行。

摘要由CSDN通过智能技术生成

目前学习小程序更多的是看看能否二次封装其它组件，利于以后能快速开发各种小程序应用。目前发现picker的selector模式只有一级下拉，那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢？答案是肯定可以的。那么我的思路是这样的：

1、使用template模板语法进行封装，数据从页面传入

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=["福州市", "厦门市", "莆田市", "三明市", "泉州市", "漳州市", "南平市", "龙岩市",