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

/** * 网络发送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 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。。。只能等微信方面更新消息给反馈了。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzgfjx.html