微信开发 使用picker封装省市区三级联动模板


Posted in Javascript onOctober 28, 2016

目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用。目前发现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。。。只能等微信方面更新消息给反馈了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
javascript html5实现表单验证
Mar 01 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
几种响应式文字详解
May 19 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
详解datagrid使用方法(重要)
Nov 06 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
Easyui的组合框的取值与赋值
Oct 28 #Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 #Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 #Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 #Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 #Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 #Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 #Javascript
You might like
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
图形数字验证代码
2006/10/09 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python 的内置字符串方法小结
2016/03/15 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
简单实现python收发邮件功能
2018/01/05 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
使用python实现名片管理系统
2020/06/18 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
python中time.ctime()实例用法
2021/02/03 Python
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
班干部演讲稿
2014/04/24 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
查摆剖析材料范文
2014/09/30 职场文书
优秀高中学生评语
2014/12/30 职场文书
高考1977观后感
2015/06/04 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书