前言
github地址:https://github.com/yexiaochai/wxdemo
这里来说一说我们的理念,我们也学习小程序开发有一周多了,从近期的使用上来说,小程序可以作为底层,但是缺少一个框架层,这个框架层需要提供:
① 组件库
② 更好的代码组织方式,也就是让我们可以做到轻松的组件化开发
我们从最开始到现在,都在沿着这个方向去分解小程序学习,其实小程序本身的东西差不多了,但是我们代码过程中有时候却越高越复杂,多了很多封装,其实这所有的复杂都是为了设置一个基本的架构,一个标准的开发模式,让后面写业务代码的同学能更高效的写代码,经过一年多的发展,事实上这种较为成熟的框架已经有了,比如我们正在使用的:
https://tencent.github.io/wepy/
但是,可以看到小程序基本还是原生JS,这其实是个非常好的学习整理机会,所以我这边一步步和大家对小程序进行了拆分,期望能形成一套还能用的雏形,帮助大家理解,所以我们继续今天的学习吧,为了降低单页面难度,我们将首页进行下改造。
首页
首页做了一点改造,变成了这个样式了:
这里需要三个点击时间点,因为日历组件,我们昨天就做好了,而他这个出发日期事实上就是我们日历组件的selecedDate,处理这块逻辑:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <template name="searchbox"> 2 <view class="c-row search-line" data-flag="start"> 3 <view class="c-span3"> 4 出发</view> 5 <view class="c-span9 js-start search-line-txt"> 6 请选择出发地</view> 7 </view> 8 <view class="c-row search-line" data-flag="arrive"> 9 <view class="c-span3"> 10 到达</view> 11 <view class="c-span9 js-arrive search-line-txt"> 12 请选择到达地</view> 13 </view> 14 <view class="c-row search-line" data-flag="arrive"> 15 <view class="c-span3"> 16 出发日期</view> 17 <view class="c-span9 js-arrive search-line-txt"> 18 {{calendarSelectedDate || '请选择出发日期'}} </view> 19 </view> 20 <view class="c-row " data-flag="arrive"> 21 <span class="btn-primary full-width js_search_list">查询</span> 22 </view> 23 </template>
1 <view class="c-row search-line" data-flag="arrive"> 2 <view class="c-span3"> 3 出发日期</view> 4 <view class="c-span9 js-arrive search-line-txt"> 5 {{calendarSelectedDate || '请选择出发日期'}} </view> 6 </view>
点击时候我们弹出我们的日历,这个时候我们日历模块释放一个事件显示日历:
PS:template不与页面级别WXML共享一个作用域,所以我暂时都采用的include引入
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <view class="c-row search-line" data-flag="start"> 2 <view class="c-span3"> 3 出发</view> 4 <view class="c-span9 js-start search-line-txt"> 5 请选择出发地</view> 6 </view> 7 <view class="c-row search-line" data-flag="arrive"> 8 <view class="c-span3"> 9 到达</view> 10 <view class="c-span9 js-arrive search-line-txt"> 11 请选择到达地</view> 12 </view> 13 <view class="c-row search-line" data-flag="arrive" ontap="showCalendar"> 14 <view class="c-span3"> 15 出发日期</view> 16 <view class="c-span9 js-arrive search-line-txt"> 17 {{calendarSelectedDateStr}}</view> 18 </view> 19 <view class="c-row " data-flag="arrive"> 20 <span class="btn-primary full-width js_search_list">查询</span> 21 </view> 22 <include src="./mod/calendar.wxml" /> 23 <include src="../../utils/abstract-page.wxml" />
1 <view class="c-row search-line" data-flag="arrive" ontap="showCalendar"> 2 <view class="c-span3"> 3 出发日期</view> 4 <view class="c-span9 js-arrive search-line-txt"> 5 {{calendarSelectedDateStr}}</view> 6 </view>
1 /* 2 事实上一个mod就只是一个对象,只不过为了方便拆分,将对象分拆成一个个的mod 3 一个mod对应一个wxml,但是共享外部的css,暂时如此设计 4 所有日历模块的需求全部再此实现 5 */ 6 const util = require('../../../utils/util.js') 7 8 let selectedDate = new Date(); 9 10 module.exports = { 11 showCalendar: function () { 12 this.setData({ 13 isCalendarShow: '' 14 }); 15 }, 16 onCalendarDayTap: function (e) { 17 let data = e.detail; 18 var date = new Date(data.year, data.month, data.day); 19 console.log(date) 20 this.setData({ 21 calendarSelectedDate: date, 22 calendarSelectedDateStr: util.dateUtil.format(date, 'Y年M月D日') 23 }); 24 }, 25 data: { 26 isCalendarShow: 'none', 27 calendarDisplayMonthNum: 2, 28 calendarDisplayTime: new Date(), 29 calendarSelectedDate: selectedDate, 30 calendarSelectedDateStr: util.dateUtil.format(selectedDate, 'Y年M月D日') 31 } 32 }
显然,这里的日历这样摆设有点丑,我们这里将其封装成一个弹出层,所以我们这里再做一个容器类组件,专门用于装载页面样式用:
1 <view class="cm-modal " style="z-index: {{uiIndex}}; position: fixed; display: {{isShow}}; "> 2 <slot ></slot> 3 </view> 4 <view class="cm-overlay" bindtap="onMaskEvent" style="z-index: {{maskzIndex}}; display: {{isShow}}" > 5 </view>
1 <ui-container bindonContainerHide="onContainerHide" is-show="{{isCalendarShow}}" > 2 <view class="calendar-wrapper-box"> 3 <view class="box-hd"> 4 <text class="fl icon-back js_back "></text> 5 <text class="fr icon-next js_next"></text> 6 </view> 7 <ui-calendar bindonDayTap="onCalendarDayTap" displayTime="{{calendarDisplayTime}}"
selectedDate="{{calendarSelectedDate}}" displayMonthNum="{{calendarDisplayMonthNum}}"
is-show="{{isCalendarShow}}"></ui-calendar> 8 </view> 9 </ui-container>
但是这里也引起了其他问题,因为引入了shadow-dom概念,我的样式不能重用,组件内部样式与外部是不能通信的,但是这里是页面级别容器,内容的样式肯定是来源页面的,这里没什么问题,所以我们这里显示的是正确的,但是我这里想做一个出格一点的操作,我想用样式将这里日历月标题换个位置:
而日历组件和外部是不能通信的,我们这里该如何处理呢,我这里想了两个方案:
① 设置一个全局使用的组件库样式,让所有组件继承,但是不知道这里对性能是否有影响,因为这样的话体积不会太小
② 小程序设计了可以传入组件的方法,比如我们这里的日历组件我们可以这样改变其样式
1 .calendar-cm-month { 2 position: absolute; 3 top: 0; 4 height: 90rpx; 5 line-height: 90rpx; 6 width: 100%; 7 color: #00b358; 8 text-align: center; 9 }
1 Component({ 2 externalClasses: ['ex-class'], 3 behaviors: [ 4 View 5 ], 6 properties: { 7 displayMonthNum: { 8 type: Number 9 }, 10 displayTime: { 11 type: Date 12 }, 13 selectedDate: { 14 type: Date 15 } 16 }, 17 data: { 18 weekDayArr: ['日', '一', '二', '三', '四', '五', '六'], 19 }, 20 21 attached: function () { 22 //console.log(this) 23 // debugger 24 }, 25 methods: { 26 onDayTap: function (e) { 27 this.triggerEvent('onDayTap', e.currentTarget.dataset) 28 } 29 } 30 })
1 <ui-container bindonContainerHide="onContainerHide" is-show="{{isCalendarShow}}" > 2 <view class="calendar-wrapper-box"> 3 <view class="box-hd"> 4 <text class="fl icon-back js_back "></text> 5 <text class="fr icon-next js_next"></text> 6 </view> 7 <ui-calendar ex-class="calendar-cm-month" bindonDayTap="onCalendarDayTap"
displayTime="{{calendarDisplayTime}}" selectedDate="{{calendarSelectedDate}}"
displayMonthNum="{{calendarDisplayMonthNum}}" is-show="{{isCalendarShow}}"></ui-calendar> 8 </view> 9 </ui-container>
具体各位去github上查看,总而言之,我们的页面变成了这个样子了:
PS:这里发现一个不知道是不是坑点的点,我们这里属性传递的是一个date对象,但是到了组件层之间变成了对象,不知微信底层做了什么:
calendarDisplayTime: new Date()
好像变成了一个空对象,这里可能发生的情况是,经过传递的日期对象会被某种特殊处理,但是具体发生了什么事情就不知道了,这个却引起了我们不小的麻烦,这里大概去翻开了一下源码:
极有可能,小程序本身就不支持date属性的传递,我们的日历组件能跑起来的原因是什么,我这里都有点疑惑了......
而且就算以对象方式传递到组件的date类型都会变成莫名其妙的东西:
1 ttt: { 2 key: 'date', 3 value: selectedDate 4 },
这个特性有点令人抓不住头脑了,这里根据探查,很有可能Component将date对象传入WXML解释时候,自动转为了日期字符串了,所以我们这里看上去是对象的东西其实是字符串,这里的建议是:跟组件的date传递,暂时全部使用字符串代替,以免自我麻烦,然后我们先将之前的日历操作全部变成字符串,再为我们的前后按钮加上事件:
1 module.exports = { 2 showCalendar: function () { 3 this.setData({ 4 isCalendarShow: '' 5 }); 6 }, 7 hideCalendar: function () { 8 this.setData({ 9 isCalendarShow: 'none' 10 }); 11 }, 12 preMonth: function () { 13 14 this.setData({ 15 calendarDisplayTime: util.dateUtil.preMonth(this.data.calendarDisplayTime).toString() 16 }); 17 }, 18 nextMonth: function () { 19 this.setData({ 20 calendarDisplayTime: util.dateUtil.nextMonth(this.data.calendarDisplayTime).toString() 21 }); 22 }, 23 onCalendarDayTap: function (e) { 24 let data = e.detail; 25 var date = new Date(data.year, data.month, data.day); 26 console.log(date) 27 this.setData({ 28 isCalendarShow: 'none', 29 calendarSelectedDate: date.toString(), 30 calendarSelectedDateStr: util.dateUtil.format(date, 'Y年M月D日') 31 }); 32 }, 33 onContainerHide: function () { 34 this.hideCalendar(); 35 }, 36 37 data: { 38 ttt: { 39 key: 'date', 40 value: selectedDate 41 }, 42 isCalendarShow: '', 43 calendarDisplayMonthNum: 1, 44 calendarDisplayTime: new Date(2018, 9).toString(), 45 calendarSelectedDate: selectedDate, 46 calendarSelectedDateStr: util.dateUtil.format(new Date(selectedDate), 'Y年M月D日') 47 } 48 }
虽然看上去恶心了一点,但是总是不会出什么明显的问题,忍一忍吧......日期部分基本结束了,还有些小的限制没有做上,比如哪些时段能选,哪些不能,这块就有待各位发现吧,我们这里毕竟是学习,做细了很花功夫,我们接下来做出发目的地选择部分。
数据请求
城市列表
城市列表这里看起来需要新开一个页面,但是我这里想做在一个页面中,考虑篇幅,我们使用弹出层容器组件看并且尽量削弱一些特性,几天下来别说写的还有些累......
这个又作为首页的一个模块而存在:
1 <view style="display: {{isCityShow}}; " class="city-wrapper" > 2 <view class="city-list"> 3 <view class="list-name">A</view> 4 <view class="list-item">成都</view> 5 <view class="list-item">成都</view> 6 <view class="list-item">成都</view> 7 <view class="list-item">成都</view> 8 <view class="list-item">成都</view> 9 <view class="list-item">成都</view> 10 </view> 11 <view class="city-list"> 12 <view class="list-name">A</view> 13 <view class="list-item">成都</view> 14 <view class="list-item">成都</view> 15 <view class="list-item">成都</view> 16 <view class="list-item">成都</view> 17 <view class="list-item">成都</view> 18 <view class="list-item">成都</view> 19 </view> 20 </view>
1 /* 2 事实上一个mod就只是一个对象,只不过为了方便拆分,将对象分拆成一个个的mod 3 一个mod对应一个wxml,但是共享外部的css,暂时如此设计 4 所有日历模块的需求全部再此实现 5 */ 6 const util = require('../../../utils/util.js') 7 8 let selectedDate = new Date().toString(); 9 10 module.exports = { 11 showCitylist: function (e) { 12 let flag = e.currentTarget.dataset.flag; 13 14 if(flag === 'start') { 15 16 } else { 17 18 } 19 }, 20 //用于设置城市数据 21 setCityData: function (data) { 22 23 }, 24 showCity: function () { 25 this.setData({ 26 isCityShow: '' 27 }); 28 }, 29 shideCity: function () { 30 this.setData({ 31 isCityShow: 'none' 32 }); 33 }, 34 data: { 35 isCityShow: '' 36 } 37 }
首页调用代码:
1 //获取公共ui操作类实例 2 const _page = require('../../utils/abstract-page.js'); 3 let modCalendar = require('./mod/calendar.js'); 4 let modCity = require('./mod/city.js'); 5 6 //获取应用实例 7 const app = getApp() 8 9 Page(_page.initPage({ 10 data: { 11 }, 12 // methods: uiUtil.getPageMethods(), 13 methods: { 14 }, 15 onShow: function () { 16 global.sss = this; 17 let scope = this; 18 }, 19 onLoad: function () { 20 // this.setPageMethods(); 21 } 22 }, { 23 modCalendar: modCalendar, 24 modCity: modCity 25 }))
这里我们开始有数据请求模块了,小程序使用这个接口请求数据,这里比较尴尬的是他要设置域名白名单:
wx.request(OBJECT)
而我们使用的是测试账号没有可以设置的地方,所以我们还是去申请个小程序账号吧...配置成功,我们继续代码:
可以看到数据请求已经回来了,但是我们一般来说一个接口不止会用于一个地方,每次重新写好像有些费事,加之我这里想将重复的请求缓存起来,所以我们这里封装一套数据访问层出来
数据缓存(持久层)
之前在浏览器中,我们一般使用localstorage存储一些不太更改的数据,微信里面提供了接口处理这一切:
wx.setStorage(OBJECT)
我们这里需要对其进行简单封装,便与后面更好的使用,一般来说有缓存就一定要有过期,所以我们动态给每个缓存对象增加一个过期时间:
1 class Store { 2 constructor(opts) { 3 if(typeof opts === 'string') this.key = opts; 4 else Object.assign(this, opts); 5 6 //如果没有传过期时间,则默认30分钟 7 if(!this.lifeTime) this.lifeTime = 1; 8 9 //本地缓存用以存放所有localstorage键值与过期日期的映射 10 this._keyCache = 'SYSTEM_KEY_TIMEOUT_MAP'; 11 12 } 13 //获取过期时间,单位为毫秒 14 _getDeadline() { 15 return this.lifeTime * 60 * 1000; 16 } 17 18 //获取一个数据缓存对象,存可以异步,获取我同步即可 19 get(sign){ 20 let key = this.key; 21 let now = new Date().getTime(); 22 var data = wx.getStorageSync(key); 23 if(!data) return null; 24 data = JSON.parse(data); 25 //数据过期 26 if (data.deadLine < now) { 27 this.removeOverdueCache(); 28 return null; 29 } 30 31 if(data.sign) { 32 if(sign === data.sign) return data.data; 33 else return null; 34 } 35 return null; 36 } 37 38 /*产出页面组件需要的参数 39 sign 为格式化后的请求参数,用于同一请求不同参数时候返回新数据,比如列表为北京的城市,后切换为上海,会判断tag不同而更新缓存数据,tag相当于签名 40 每一键值只会缓存一条信息 41 */ 42 set(data, sign) { 43 let timeout = new Date(); 44 let time = timeout.setTime(timeout.getTime() + this._getDeadline()); 45 this._saveData(data, time, sign); 46 } 47 _saveData(data, time, sign) { 48 let key = this.key; 49 let entity = { 50 deadLine: time, 51 data: data, 52 sign: sign 53 }; 54 let scope = this; 55 56 wx.setStorage({ 57 key: key, 58 data: JSON.stringify(entity), 59 success: function () { 60 //每次真实存入前,需要往系统中存储一个清单 61 scope._saveSysList(key, entity.deadLine); 62 } 63 }); 64 } 65 _saveSysList(key, timeout) { 66 if (!key || !timeout || timeout < new Date().getTime()) return; 67 let keyCache = this._keyCache; 68 wx.getStorage({ 69 key: keyCache, 70 complete: function (data) { 71 let oldData = {}; 72 if(data.data) oldData = JSON.parse(data.data); 73 oldData[key] = timeout; 74 wx.setStorage({ 75 key: keyCache, 76 data: JSON.stringify(oldData) 77 }); 78 } 79 }); 80 } 81 //删除过期缓存 82 removeOverdueCache() { 83 let now = new Date().getTime(); 84 let keyCache = this._keyCache; 85 wx.getStorage({ 86 key: keyCache, 87 success: function (data) { 88 if(data && data.data) data = JSON.parse(data.data); 89 for(let k in data) { 90 if(data[k] < now) { 91 delete data[k]; 92 wx.removeStorage({key: k, success: function(){}}); 93 } 94 } 95 wx.setStorage({ 96 key: keyCache, 97 data: JSON.stringify(data) 98 }); 99 } 100 }); 101 } 102 103 } 104 105 module.exports = Store
这个类的使用也非常简单,这里举个例子:
1 sss = new global.Store({key: 'qqq', lifeTime: 1}) 2 sss.set({a: 1}, 2) 3 sss.get()//因为没有秘钥会是null 4 sss.get(2)//sss.get(2)
这个时候我们开始写我们数据请求的类:
首先还是实现了一个抽象类和一个业务基类,然后开始在业务层请求数据:
1 class Model { 2 constructor() { 3 this.url = ''; 4 this.param = {}; 5 this.validates = []; 6 } 7 pushValidates(handler) { 8 if (typeof handler === 'function') { 9 this.validates.push(handler); 10 } 11 } 12 setParam(key, val) { 13 if (typeof key === 'object') { 14 Object.assign(this.param, key); 15 } else { 16 this.param[key] = val; 17 } 18 } 19 //@override 20 buildurl() { 21 return this.url; 22 } 23 onDataSuccess() { 24 } 25 //执行数据请求逻辑 26 execute(onComplete) { 27 let scope = this; 28 let _success = function(data) { 29 let _data = data; 30 if (typeof data == 'string') _data = JSON.parse(data); 31 32 // @description 开发者可以传入一组验证方法进行验证 33 for (let i = 0, len = scope.validates.length; i < len; i++) { 34 if (!scope.validates[i](data)) { 35 // @description 如果一个验证不通过就返回 36 if (typeof onError === 'function') { 37 return onError.call(scope || this, _data, data); 38 } else { 39 return false; 40 } 41 } 42 } 43 44 // @description 对获取的数据做字段映射 45 let datamodel = typeof scope.dataformat === 'function' ? scope.dataformat(_data) : _data; 46 47 if (scope.onDataSuccess) scope.onDataSuccess.call(scope, datamodel, data); 48 if (typeof onComplete === 'function') { 49 onComplete.call(scope, datamodel, data); 50 } 51 }; 52 this._sendRequest(_success); 53 } 54 55 //删除过期缓存 56 _sendRequest(callback) { 57 let url = this.buildurl(); 58 wx.request({ 59 url: this.buildurl(), 60 data: this.param, 61 success: function success(data) { 62 callback && callback(data); 63 } 64 }); 65 } 66 } 67 module.exports = Model
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 let Model = require('./abstract-model.js'); 2 3 class DemoModel extends Model { 4 constructor() { 5 super(); 6 let scope = this; 7 this.domain = 'https://apikuai.baidu.com'; 8 this.param = { 9 head: { 10 version: '1.0.1', 11 ct: 'ios' 12 } 13 }; 14 15 //如果需要缓存,可以在此设置缓存对象 16 this.cacheData = null; 17 18 this.pushValidates(function(data) { 19 return scope._baseDataValidate(data); 20 }); 21 } 22 23 //首轮处理返回数据,检查错误码做统一验证处理 24 _baseDataValidate(data) { 25 if (typeof data === 'string') data = JSON.parse(data); 26 if (data.data) data = data.data; 27 if (data.errno === 0) return true; 28 return false; 29 } 30 31 dataformat(data) { 32 if (typeof data === 'string') data = JSON.parse(data); 33 if (data.data) data = data.data; 34 if (data.data) data = data.data; 35 return data; 36 } 37 38 buildurl() { 39 return this.domain + this.url; 40 } 41 42 getSign() { 43 let param = this.getParam() || {}; 44 return JSON.stringify(param); 45 } 46 onDataSuccess(fdata, data) { 47 if (this.cacheData && this.cacheData.set) 48 this.cacheData.set(fdata, this.getSign()); 49 } 50 51 //如果有缓存直接读取缓存,没有才请求 52 execute(onComplete, ajaxOnly) { 53 let data = null; 54 if (!ajaxOnly && this.cacheData && this.cacheData.get) { 55 data = this.cacheData.get(this.getSign()); 56 if (data) { 57 onComplete(data); 58 return; 59 } 60 } 61 super.execute(onComplete); 62 } 63 64 } 65 66 class CityModel extends DemoModel { 67 constructor() { 68 super(); 69 this.url = '/city/getstartcitys'; 70 } 71 } 72 73 module.exports = { 74 cityModel: new CityModel 75 76 }
接下来是实际调用代码:
1 let model = models.cityModel; 2 model.setParam({ 3 type: 1 4 }); 5 model.execute(function(data) { 6 console.log(data); 7 debugger; 8 });
数据便请求结束了,有了这个类我们可以做非常多的工作,比如:
① 前端设置统一的错误码处理逻辑
② 前端打点,统计所有的接口响应状态
③ 每次请求相同参数做数据缓存
④ 这个对于错误处理很关键,一般来说前端出错很大可能都是后端数据接口字段有变化,而这种错误是比较难寻找的,如果我这里做一个统一的收口,每次数据返回记录所有的返回字段的标志上报呢,就以这个城市数据为例,我们可以这样做:
1 class CityModel extends DemoModel { 2 constructor() { 3 super(); 4 this.url = '/city/getstartcitys'; 5 } 6 //每次数据访问成功,错误码为0时皆会执行这个回调 7 onDataSuccess(fdata, data) { 8 super.onDataSuccess(fdata, data); 9 //开始执行自我逻辑 10 let o = { 11 _indate: new Date().getTime() 12 }; 13 for(let k in fdata) { 14 o[k] = typeof fdata[k]; 15 } 16 //执行数据上报逻辑 17 console.log(JSON.stringify(o)); 18 } 19 }
这里就会输出以下信息:
{"_indate":1533436847778,"cities":"object","hots":"object","total":"number","page":"string"}
如果对数据要求非常严苛,对某些接口做到字段层面的验证,那么加一个Validates验证即可,这样对接口的控制会最大化,就算哪次出问题,也能很好从数据分析系统之中可以查看到问题所在,如果我现在想要一个更为具体的功能呢?我想要首次请求一个接口时便将其数据记录下来,第二次便不再请求呢,这个时候我们之前设计的数据持久层便派上了用处:
1 let Store = require('./abstract-store.js'); 2 3 class CityStore extends Store { 4 constructor() { 5 super(); 6 this.key = 'DEMO_CITYLIST'; 7 //30分钟过期时间 8 this.lifeTime = 30; 9 } 10 } 11 12 module.exports = { 13 cityStore: new CityStore 14 }
1 class CityModel extends DemoModel { 2 constructor() { 3 super(); 4 this.url = '/city/getstartcitys'; 5 this.cacheData = Stores.cityStore; 6 } 7 //每次数据访问成功,错误码为0时皆会执行这个回调 8 onDataSuccess(fdata, data) { 9 super.onDataSuccess(fdata, data); 10 //开始执行自我逻辑 11 let o = { 12 _indate: new Date().getTime() 13 }; 14 for(let k in fdata) { 15 o[k] = typeof fdata[k]; 16 } 17 //执行数据上报逻辑 18 console.log(JSON.stringify(o)); 19 } 20 }
这个时候第二次请求时候便会直接读取缓存了
接下来便可以回到我们的页面渲染逻辑了,这个时候就变得非常简单了:
1 <view style="display: {{isCityShow}}; " class="city-wrapper"> 2 <block wx:for="{{cityData}}" wx:key="k"> 3 <view class="city-list"> 4 <block wx:for="{{item}}" wx:key="kk" wx:for-index="key" wx:for-item="value"> 5 <view class="list-name">{{key}}</view> 6 <block wx:for="{{value}}" wx:key="kkk" wx:for-index="i" wx:for-item="v"> 7 <view class="list-item" data-cnname="{{v.name}}" data-id="{{v.regionid}}">{{v.cnname}}</view> 8 </block> 9 </block> 10 </view> 11 </block> 12 </view>
1 //用于设置城市数据 2 setCityData: function(data) { 3 data = data.cities; 4 let citys = {}, sortCitys = []; 5 let k, gname, name, i, tmp = {}, index; 6 7 //首先处理每个name生成唯一K 8 for (k in data) { 9 name = data[k].name; 10 if (!name) { 11 continue; 12 } 13 gname = name[0].toUpperCase(); 14 if (!citys[gname]) citys[gname] = []; 15 citys[gname].push(data[k]); 16 } 17 18 for (i = 65; i < 91; i++) { 19 tmp = {}; 20 tmp[String.fromCharCode(i)] = []; 21 sortCitys.push(tmp); 22 } 23 24 for (k in citys) { 25 index = k.charCodeAt() - 65; 26 tmp = {}; 27 tmp[k] = citys[k]; 28 sortCitys[index] = tmp; 29 } 30 31 this.setData({ 32 cityData: sortCitys, 33 isCityShow: '' 34 }); 35 },
然后我们这里为组件绑定事件等就比较简单了,大家可以自己看github,于是我们首页的功能便完成了:
经过一个多星期的学习,我们慢慢的完成了我们的首页,好像也就几个元素,但是后面的一切却不简单啊,我们明天继续完成list页面逻辑,便开始总结小程序开发