微信小程序省市区三级联动，动态读取地址库
部分代码来自：http://blog.csdn.net/qq_38125123/article/details/75043607
我主要是把静态的地址库文件改成动态从数据库读取，
以下是小程序的代码：
wxml:
wxss:
.picker-view {
width: 100%;
display: flex;
z-index:12;
background-color: #fff;
flex-direction: column;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0rpx;
left: 0rpx;
height: 40vh;
}
.picker-item {
line-height: 70rpx;
margin-left: 5rpx;
margin-right: 5rpx;
text-align: center;
}
.mask{
background-color: #000;
opacity: 0.2;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10
}JS:
var address = []//地区数据/**
* 页面的初始数据
*/
data: {
animationAddressMenu: {},
addressMenuIsShow: false,
value: [0, 0, 0],
provinces: [],
citys: [],
areas: [],
province: '',
city: '',
area: '',
display: "none",
currentID: '',
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
var that = this;
// 初始化动画变量
var animation = wx.createAnimation({
duration: 500,
transformOrigin: "50% 50%",
timingFunction: 'ease',
})
that.animation = animation;
// 默认联动显示北京
address=wx.getStorage({
key: 'AllArea',
success: function(res) {
if(address == null){
that.getAllArea();
}
else{
that.setAllArea();
}
},
fail: function(res) {
that.getAllArea();
},
complete: function(res) {},
})
}, //获取地址库
getAllArea:function(){
var that= this;
wx.request({
url: app.globalData.url +'/api/Home/GetAllArea',
header: {
'content-type': 'application/json',
},
success: function (res) {
var result = res.data;
if (result.IsError == false) {
wx.setStorage({
key: 'AllArea',
data: result.Result,
});
address = result.Result;
that.setAllArea();
}
else {
wx.showToast({
title: code.Msg,
icon: 'success',
duration: 2000
})
}
},
fail: function (res) {
wx.showToast({
title: "网络错误",
icon: 'success',
duration: 2000
})
},
});
},
//设置默认地址信息
setAllArea:function(){
var id = address.provinces[0].id
this.setData({
provinces: address.provinces,
citys: address.citys[id],
areas: address.areas[address.citys[id][0].id],
})
},
// 点击所在地区弹出选择框
selectDistrict: function (e) {
var that = this
// 如果已经显示，不在执行显示动画
if (that.data.addressMenuIsShow) {
return
}
// 执行显示动画
that.startAddressAnimation(true)
},
// 执行动画
startAddressAnimation: function (isShow) {
var that = this
if (isShow) {
// vh是用来表示尺寸的单位，高度全屏是100vh
that.animation.translateY(0 + 'vh').step();
//显示遮罩层
that.setData({
display: "block"
})
} else {
that.animation.translateY(40 + 'vh').step();
//隐藏遮罩层
that.setData({
display: "none"
})
}
that.setData({
animationAddressMenu: that.animation.export(),
addressMenuIsShow: isShow,
})
},
// 点击地区选择取消按钮
cityCancel: function (e) {
this.startAddressAnimation(false)
},
// 点击地区选择确定按钮
citySure: function (e) {
var that = this
var city = that.data.city
var value = that.data.value
that.startAddressAnimation(false)
// 将选择的城市信息显示到输入框
var areaInfo = that.data.provinces[value[0]].name + ',' + that.data.citys[value[1]].name + ',' + that.data.areas[value[2]].name;
var id = that.data.areas[value[2]].id;
that.setData({
areaInfo: areaInfo,
currentID:id,
})
},
// 点击蒙版时取消组件的显示
hideCitySelected: function (e) {
this.startAddressAnimation(true)
},
// 处理省市县联动逻辑
cityChange: function (e) {
console.log(e)
var value = e.detail.value
var provinces = this.data.provinces
var citys = this.data.citys
var areas = this.data.areas
var provinceNum = value[0]
var cityNum = value[1]
var countyNum = value[2]
// 如果省份选择项和之前不一样，表示滑动了省份，此时市默认是省的第一组数据，
if (this.data.value[0] != provinceNum) {
var id = provinces[provinceNum].id
this.setData({
value: [provinceNum, 0, 0],
citys: address.citys[id],
areas: address.areas[address.citys[id][0].id],
})
} else if (this.data.value[1] != cityNum) {
// 滑动选择了第二项数据，即市，此时区显示省市对应的第一组数据
var id = citys[cityNum].id
this.setData({
value: [provinceNum, cityNum, 0],
areas: address.areas[citys[cityNum].id],
})
} else {
// 滑动选择了区
this.setData({
value: [provinceNum, cityNum, countyNum]
})
}
},以下是后台（.Net）代码：
地址信息模型：
///
/// 微信小程序所需的地址数据模型
///
public class WxAreaModel
{
///
/// 省份信息集合
///
public List provinces { get; set; }
///
/// 城市信息集合
///
public Dictionary> citys { get; set; }
///
/// 区县信息集合
///
public Dictionary> areas { get; set; }
}
///
/// 省份信息
///
public class wxProvince
{
///
/// 省份名
///
public string name { get; set; }
///
/// 省份ID
///
public int id { get; set; }
}
///
/// 城市信息
///
public class wxCity
{
///
/// 所在省份名
///
public string province { get; set; }
///
/// 城市名
///
public string name { get; set; }
///
/// 城市ID
///
public int id { get; set; }
}
///
/// 区县信息
///
public class wxArea
{
///
/// 所在城市名
///
public string city { get; set; }
///
/// 区县名
///
public string name { get; set; }
///
/// 区县ID
///
public int id { get; set; }
} 返回的json对象模型：
///
/// Json返回信息实体
///
public class ReturnResult
{
///
/// 是否错误
///
public bool IsError { get; set; }
///
/// 错误消息
///
public string Msg { get; set; }
///
/// 正确结果
///
public object Result { get; set; }
}从数据库及缓存中读取地址信息：
///
/// 用户在注册时，获取微信上显示的地址库（一般会存到微信本地缓存中，如果缓存不在了，再从后台读取）
///
/// areaList = CacheHelper.GetListFromCache("T_Areas", db.T_Areas);//读取原始地址信息
List provinces = new List();
Dictionary> cityss = new Dictionary>();
Dictionary> areass = new Dictionary>();
//筛选出所有省份
var provAreaList = areaList.Where(t => t.Area_Level == 1).ToList();
foreach (T_Areas prov in provAreaList)
{
//插入省份数据
provinces.Add(new wxProvince() { id = prov.Area_ID, name = prov.Area_Name });
//筛选出这个省份下的所有城市
List citys = new List();
var cityAreaList = areaList.Where(t => t.Area_Parent_ID == prov.Area_ID).ToList();
foreach (T_Areas c in cityAreaList)
{
//插入城市数据
citys.Add(new wxCity() { province = prov.Area_Name, id = c.Area_ID, name = c.Area_Name });
List areas = new List();
//筛选出这个城市下的所有区县
var areaAreaList = areaList.Where(t => t.Area_Parent_ID == c.Area_ID).ToList();
foreach (T_Areas a in areaAreaList)
{
//插入区县数据
areas.Add(new wxArea() { city = c.Area_Name, id = a.Area_ID, name = a.Area_Name });
}
areass.Add(c.Area_ID, areas);
}
cityss.Add(prov.Area_ID, citys);
}
models.provinces = provinces;
models.citys = cityss;
models.areas = areass;
CacheHelper.SetCache("WxAreaModel", models);
}
rr.Result = models;
rr.IsError = false;
}
return rr;
}
catch (Exception ex)
{
LogHelper.WriteLogError(MethodBase.GetCurrentMethod(), System_Log_Operate.用户注册, ex.Message);
rr.Msg = ex.Message;
return rr;
}
}