小程序模板网

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

2018-04-08 东汉分
作者草灯,来自授权地址,本文写于1028版本时代,请酌情参考;

     目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用。目前发现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] view plain
  1. <?php  
  2. header("Content-type: text/html; charset=utf-8");   
  3.   
  4. $type=$_REQUEST["type"];//获取省市区的标志  
  5. $fcode=$_GET["fcode"];  
  6.   
  7. $retArr=[  
  8.     "status"=>true,  
  9.     "data"=>[],  
  10.     "msg"=>""  
  11. ];&


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23129.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询