微信小程序-省市區縣三級聯動選擇器

項目地址:https://github.com/leesonp/littleAPP.git

2017.07.21 17:30 更新

以前版本是從頭寫到尾沒有封裝的，有的同窗可能看的一臉懵逼，昨天我用微信官方提供的WXML模板（template）對代碼進行了封裝，在模板中定義代碼片斷，經過封裝之後咱們就能夠在不一樣的地方調用了。 Demo已上傳到github。

文件組成：
1.模板類（model）
2.舊版未封裝類 （index）
3.新版調用類 （modelTest）
4.數據源 （area.js）

怎麼使用呢？ 只需在要用到的類中導入模板模板，引入對應後綴的文件，作一些簡單必要操做便可。 以上傳的Demo爲例：

// modelTest.js
var model = require('../../model/model.js')

var show = false;
var item = {};

Page({
  data: {
    item: {
      show: show
    }
  },
   //生命週期函數--監聽頁面初次渲染完成
  onReady: function (e) {
    var that = this;
    //請求數據
    model.updateAreaData(that, 0, e);
  },
  //點擊選擇城市按鈕顯示picker-view
  translate: function (e) {
    model.animationEvents(this, 0, true,400);  
  },
  //隱藏picker-view
  hiddenFloatView: function (e) {
    model.animationEvents(this, 200, false,400);
  },
  //滑動事件
  bindChange: function (e) {
    model.updateAreaData(this, 1, e);
    item = this.data.item;
    this.setData({
      province: item.provinces[item.value[0]].name,
      city: item.citys[item.value[1]].name,
      county: item.countys[item.value[2]].name
    });
  },
  onReachBottom: function (){
  },
  nono: function (){}
})

<!--modelTest.wxml-->
<import src="../../model/model.wxml"/>
<view class="infoText">{{province}} {{city}} {{county}}</view>
<button class="animation-button" bindtap="translate">選擇城市</button>
<template is="areaData" data="{{...item}}"/>

/* modelTest.wxss */
@import '../../model/model.wxss'

在model.js文件中我就暴露了兩個接口，引入模板後，所有代碼就這些。是否是感受舒服不少？ 代碼簡潔、邏輯清晰，是封裝給咱們帶來的好處，但願沒試過封裝的同窗能夠嘗試下。

-- END --

------------------------------ 分割線 ------------------------------

2017.07.17 更新

本人以前一直從事iOS開發，最近無項目閒來無事研究了下微信小程序。 我沒有像重新學一門語言同樣從頭至尾看一遍文檔，我我的感受小程序相似前端開發，正好以前對前端也略有涉獵，因此直接就拿我以前iOS的項目的某個模塊練手，不懂的再去查閱官方文檔。 由於有個建立紅包的界面，UITableView的某個cell點擊會彈出選擇區域和時間選擇器，下面就給你們講一下小程序版是怎樣的一種操做。

在iOS中我用的是UIPickView,體驗還OK。那在小程序中選什麼控件呢？查閱官方文檔，有兩種滑動選擇器。

picker:從底部彈起的滾動選擇器，現支持三種選擇器，經過mode來區分，分別是普通選擇器，時間選擇器，日期選擇器，默認是普通選擇器。由於是固定的，直接pass掉了。可是最開始我覺得只有這一種，而後想去百度找找有沒有自定義的。結果發現幾乎網上沒有很好的區域選擇器的方案。我就再回過頭來查閱官方文檔發現還有個picker-view。 picker-view：嵌入頁面的滾動選擇器。官方的示例咋一看仍是時間選擇器，覺得也是定死的呢。可是看代碼就能夠發現，其實跟iOS的寫法邏輯類似。 既然類似咱們就能夠着手寫代碼了。可是開始寫以前首先咱們要拿到省市區縣的數據。網上搜索下中國行政區域能夠找到不少，我選了這個。下載下來是txt文件的Json數據。那怎麼導入工程呢? 有兩種方法： 1.在utils文件夾下新建一個js文件，寫一個函數把txt裏的json數據複製粘貼進去，而後在須要的類目下調用這個函數接收返回值就好了。

//area.js
function getAreaInfo(callBack){
var str =["此處粘貼json數據":... ];//因數據量太大就不在此處所有展現，知道是個數組就好了。

callBack(str);
}
module.exports.getAreaInfo = getAreaInfo;
------------------------------ 分割線 ------------------------------
//index.js
var area = require('../../utils/area.js')
...
Page({
  data: { },
onLoad: function (options) {
    var that = this;
    //獲取省市區縣數據
    area.getAreaInfo(function (arr) {
    });

  }
})
...

2.寫一個接口調用，我本身就是寫的一個PHP接口。

//php代碼
$filename = "ChinaArea.txt";//網絡上下載的文件（PHP或Java須要配置環境才能請求到數據）。
$json_string = file_get_contents($filename);
echo print_r($json_string,true);

我的建議仍是不要把數據源直接寫在項目，由於小程序包是有大小限制的如若超過是沒法提交的因此建議寫接口，或者拿別人現成的接口。

話很少說直接貼代碼吧。(代碼已作必要註釋)

<!--index.wxml-->

  <view class="infoText">{{province}} {{city}} {{county}}</view> 

  <view class="aaaa" >
  <button class="animation-button" bindtap="translate">選擇城市</button>
  </view>
      
  <view class="animation-element-wrapper" animation="{{animation}}" style="visibility:{{show ? 'visible':'hidden'}}" bindtap="hiddenFloatView" data-id="444">
     <view class="animation-element" catchtap="nono">
        <text class="left-bt" catchtap="hiddenFloatView" data-id="555">取消</text>
        <text class="right-bt" catchtap="hiddenFloatView" data-id="666">肯定</text>
          <view class="line"></view> 

        <picker-view indicator-style = "height: 50rpx;" value="{{value}}" bindchange="bindChange" catchtap="nono">
        <!--省-->
        <picker-view-column>
           <view wx:for="{{provinces}}" wx:key="" >
             {{item.name}}
          </view>
        </picker-view-column>
        <!--地級市-->
        <picker-view-column>
          <view wx:for="{{citys}}" wx:key="" >
            {{item.name}}
          </view>
        </picker-view-column>
        <!--區縣-->
        <picker-view-column>
          <view wx:for="{{countys}}" wx:key="" >
            {{item.name}}
          </view>
        </picker-view-column>
        </picker-view>
    </view>
  </view>

/**index.wxss**/
page{
  background-color: rgba(255, 255, 255, 1); 
}

.infoText{
    margin-top: 20rpx;
    text-align: center;
    width: 100%;
    justify-content: center; 
}

picker-view{
  background-color: white;
  padding: 0;
  width: 100%; 
  height: 380rpx;
  bottom: 0;
  position: fixed;
}

picker-view-column view{
  vertical-align:middle; 
  font-size: 28rpx;
  line-height: 28rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------- */

.animation-element-wrapper {
  display: flex;  
  position: fixed;
  left: 0;
  top:0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.animation-element {
  display: flex;
  position: fixed;
  width: 100%;
  height: 470rpx;
  bottom: 0;
  background-color: rgba(255, 255, 255, 1);
}

.animation-button {
  top:20rpx;
  width: 290rpx;
  height: 100rpx;  
  align-items:center;
}


text{
  color: #999999;
  display: inline-flex;  
  position: fixed;
  margin-top: 20rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 34rpx;
  font-family: Arial, Helvetica, sans-serif;
}

.left-bt{
  left: 30rpx;
}
.right-bt {
  right: 30rpx;
}

.line{
  display: block;
  position: fixed;
  height: 1rpx;
  width: 100%;
  margin-top: 89rpx; 
  background-color: #eeeeee;
}

//index.js
//獲取應用實例
var area = require('../../utils/area.js')

var areaInfo = [];//全部省市區縣數據

var provinces = [];//省

var citys = [];//城市

var countys = [];//區縣

var index = [0, 0, 0];

var cellId;

var t = 0;
var show = false;
var moveY = 200;

Page({
  data: {
    show: show,
    provinces: provinces,
    citys: citys,
    countys: countys,
    value: [0, 0, 0]
  },
  //滑動事件
  bindChange: function (e) {
    var val = e.detail.value

    //判斷滑動的是第幾個column
    //若省份column作了滑動則定位到地級市和區縣第一位
    if (index[0] != val[0]) {
      val[1] = 0;
      val[2] = 0;
      getCityArr(val[0], this);//獲取地級市數據
      getCountyInfo(val[0], val[1], this);//獲取區縣數據
    } else {    //若省份column未作滑動，地級市作了滑動則定位區縣第一位
      if (index[1] != val[1]) {
        val[2] = 0;
        getCountyInfo(val[0], val[1], this);//獲取區縣數據
      }
    }
    index = val;

    console.log(index + " => " + val);

    //更新數據
    this.setData({
      value: [val[0], val[1], val[2]],
      province: provinces[val[0]].name,
      city: citys[val[1]].name,
      county: countys[val[2]].name
    })

  },
  onLoad: function (options) {
    cellId = options.cellId;
    var that = this;
    var date = new Date()
    console.log(date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日");

    //獲取省市區縣數據
    area.getAreaInfo(function (arr) {
      areaInfo = arr;
      //獲取省份數據
      getProvinceData(that);
    });

  },
  // ------------------- 分割線 --------------------
  onReady: function () {
    this.animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 0,
      timingFunction: "ease",
      delay: 0
    }
    )
    this.animation.translateY(200 + 'vh').step();
    this.setData({
      animation: this.animation.export(),
      show: show
    })
  },
  //移動按鈕點擊事件
  translate: function (e) {
    if (t == 0) {
      moveY = 0;
      show = false;
      t = 1;
    } else {
      moveY = 200;
      show = true;
      t = 0;
    }
    // this.animation.translate(arr[0], arr[1]).step();
    animationEvents(this,moveY, show);
    
  },
  //隱藏彈窗浮層
  hiddenFloatView(e){
    console.log(e);
    moveY = 200;
    show = true;
    t = 0;
    animationEvents(this,moveY, show);

  },
  //頁面滑至底部事件
  onReachBottom: function () {
    // Do something when page reach bottom.
  }
})

//動畫事件
function animationEvents(that,moveY,show){
  console.log("moveY:" + moveY + "\nshow:" + show);
  that.animation = wx.createAnimation({
    transformOrigin: "50% 50%",
    duration: 400,
    timingFunction: "ease",
    delay: 0
  }
  )
  that.animation.translateY(moveY + 'vh').step()

  that.setData({
    animation: that.animation.export(),
    show: show
  })

}

// ---------------- 分割線 ---------------- 

//獲取省份數據
function getProvinceData(that) {
  var s;
  provinces = [];
  var num = 0;
  for (var i = 0; i < areaInfo.length; i++) {
    s = areaInfo[i];
    if (s.di == "00" && s.xian == "00") {
      provinces[num] = s;
      num++;
    }
  }
  that.setData({
    provinces: provinces
  })

  //初始化調一次
  getCityArr(0, that);
  getCountyInfo(0, 0, that);
  that.setData({
    province: "北京市",
    city: "市轄區",
    county: "東城區",
  })

}

// 獲取地級市數據
function getCityArr(count, that) {
  var c;
  citys = [];
  var num = 0;
  for (var i = 0; i < areaInfo.length; i++) {
    c = areaInfo[i];
    if (c.xian == "00" && c.sheng == provinces[count].sheng && c.di != "00") {
      citys[num] = c;
      num++;
    }
  }
  if (citys.length == 0) {
    citys[0] = { name: '' };
  }

  that.setData({
    city: "",
    citys: citys,
    value: [count, 0, 0]
  })
}

// 獲取區縣數據
function getCountyInfo(column0, column1, that) {
  var c;
  countys = [];
  var num = 0;
  for (var i = 0; i < areaInfo.length; i++) {
    c = areaInfo[i];
    if (c.xian != "00" && c.sheng == provinces[column0].sheng && c.di == citys[column1].di) {
      countys[num] = c;
      num++;
    }
  }
  if(countys.length == 0){
    countys[0] = {name:''};
  }
  that.setData({
    county: "",
    countys: countys,
    value: [column0, column1, 0]
  })
}

最終效果：

本文的難點主要集中在滑動的是哪一列、數據的處理、每次滑動每一列數據的更新數組的定位： 1.滑動第一列: 第二列和第三列位置都置零；更新數組citys和countys。 2.滑動第二列: 第一列不動，第三列置零；更新數組countys。 3.滑動第三列: 第一列和第二列都不動；數據不用更新，改變val[2]便可。 。 處理很差的話體驗會很很差，會有閃跳的感受。

項目地址:https://github.com/leesonp/littleAPP.git

這是我第一次寫文章，寫的很差或者有紕漏的地方，但願你們多多包容、指正，謝謝。