首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

微信小程序 使用picker封装省市区三级联动实例代码

Posted in Javascript onOctober 28, 2016

 微信小程序 使用picker封装省市区三级联动实例

  目前学习小程序更多的是看看能否二次封装其它组件，利于以后能快速开发各种小程序应用。目前发现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=["福州市", "厦门市", "莆田市", "三明市", "泉州市", "漳州市", "南平市", "龙岩市", "宁德市"]; 
    $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):成功返回的回调函数，已自动过滤微信端添加数据,按接口约定,返回成功后的data数据,过滤掉msg和status 
 * successErrorFun(msg):成功执行请求,但是服务端认为业务错误,执行其他行为,默认弹出系统提示信息. 
 * failFun:接口调用失败的回调函数 
 * completeFun:接口调用结束的回调函数（调用成功、失败都会执行） 
 * header:object,设置请求的 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; //将微信端结果过滤,获取服务端返回的原样数据 
    var status = returnData.status; //按接口约定,返回status时,才调用成功函数 
    //console.log(res); 
    //正常执行的业务函数 
    if( status == true ) { 
      if( successFun ) { 
        var dts = returnData.data; 
        successFun( dts );//回调，相当于获取到data后直接在回调里面处理赋值数据 
      } 
    } else if( status == false ) { 
      var msg = returnData.msg; 
      if( !successErrorFun ) { 
        console.log( msg ); 
      } else { 
        successErrorFun( msg ); 
      } 
 
    } else { 
      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: ["北京市", "上海市"]},只能固定是name和code，因为模板需要根据这俩参数显示 
    city: {}, 
    county: {}, 
    provinceIndex: 0, 
    cityIndex: 0, 
    countyIndex: 0, 
    cityUrl: "http://localhost:8282/phpserver/areas.php?type=city&fcode=",//type表示获取地区 fcode是一级code码，到时具体根据后端请求参数修改 
    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封装省市区三级联动实例代码

这里存在一个bug，开启下拉刷新和picker组件的下拉会重叠了，不知道是开发工具原因，还是还为修改的bug。。。只能等微信方面更新消息给反馈了

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序 使用picker封装省市区三级联动实例代码

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
js实现鼠标左右移动，图片也跟着移动效果
Jan 25 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
基于Layer+jQuery的自定义弹框
May 26 #Javascript
微信开发 js实现tabs选项卡效果
Oct 28 #Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 #Javascript
Easyui的组合框的取值与赋值
Oct 28 #Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 #Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 #Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 #Javascript
instantclient(1) 忘记密码(1) 存储过程(3) TcpServer(1) 优化(1) pt-archiver(1) 增删改查(2) ICF-5900W(2) B+树(2) muduo(1)
You might like
isset和empty的区别
2007/01/15 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
PHP实现简易blog的制作
2016/10/24 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
jquery处理json对象
2014/11/03 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
python中的格式化输出用法总结
2016/07/28 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Python之pymysql的使用小结
2019/07/01 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
浅谈CSS3特性查询（Feature Query: @supports）功能简介
2017/07/31 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
Homestay中文官网：全球寄宿家庭
2018/10/18 全球购物
阿联酋优惠券服务：Living Kool
2019/12/12 全球购物
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
事业单位考核材料
2014/05/21 职场文书
软件测试专业推荐信
2014/09/18 职场文书
借条格式范本
2015/05/25 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书