微信小程序 - 豆瓣同城
一、准备工作
软件环境:微信开发者工具
官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
项目目录结构
二、程序实现步骤
主页从微信用户信息获取用户所在的城市,如果用户所在城市支持同城活动,则分类显示该城市的活动列表,没有则显示深圳的活动列表。
// 获取用户所在的城市uid
if (typeof app.globalData.userInfo.city == "string") {
var cityUid = app.globalData.userInfo.city.toLowerCase();
app.globalData.cityUid = cityUid;
}
/** 处理城市信息 */
processLocationListData(data) {
var locs = {};
for (let idx in data) {
var loc = data[idx];
locs[loc.uid] = loc;
}
// 默认加载当前城市的活动,如果不支持当前城市,则默认加载深圳的活动
var cityUid = app.globalData.cityUid;
var currentLoc = null;
if (!locs[cityUid]) {
currentLoc = locs[defaultUid];
} else {
currentLoc = locs[cityUid];
}
app.globalData.locId = currentLoc.id;
app.globalData.city = currentLoc.name;
app.globalData.locs = locs;
// 获取当前城市名称,如果当前城市不再列表中,则显示深圳
this.setData({ "city": app.globalData.city, "currentLoc": currentLoc });
// 获取当前城市的活动列表
this.getEventByLocationId(currentLoc.id);
}
城市切换页,用户点击城市后返回主页并且加载该城市的活动列表。城市列表按照首字母分类排序,支持拼音搜索跟中文搜索。
data: {
hotCityUid: ["beijing", "shanghai", "guangzhou", "shenzhen", "chengdu", "nanjing", "wuhan", "hangzhou", "chongqing"],
hotCity: [],
letterList: [],
cityList: {}
},
/** 处理城市信息 */
processCityListData: function (locs) {
if (locs && typeof locs == "object") {
// 提取热门城市
var hotCity = this.data.hotCityUid.map(function (item, index, input) {
return locs[item];
});
// 按字母顺序排序
var keys = Object.keys(locs);
keys.sort();
// 提取所有城市并按首字母归类
var cityList = {};
var letterList = [];
for (let idx in keys) {
var key = keys[idx];
var letter = key.substring(0, 1);
var city = locs[key];
if (!cityList[letter]) {
cityList[letter] = [];
letterList.push(letter);
}
cityList[letter].push(city);
}
console.log("cityList: " + cityList);
this.setData({
"hotCity": hotCity, "letterList": letterList, "cityList": cityList
});
}
},
城市列表页面布局
<text class="hot-city-title">热门城市</text>
<view class="hot-city">
<view class="hot-city-content">
<block wx:for="{{hotCity}}" wx:for-item="city">
<text class="city-box" data-id="{{city.id}}" data-name="{{city.name}}" data-uid="{{city.uid}}" bindtap="bindCityTap">{{city.name}}</text>
</block>
</view>
</view>
<view class="city-list">
<block wx:for="{{letterList}}" wx:for-item="letter">
<text class="list-title">{{letter}}</text>
<view class="list-content">
<block wx:for="{{cityList[letter]}}" wx:for-item="city">
<text class="city-block" data-id="{{city.id}}" data-name="{{city.name}}" data-uid="{{city.uid}}" bindtap="bindCityTap">{{city.name}}</text>
</block>
</view>
</block>
</view>
分类筛选支持按活动类型、活动时间筛选,点击筛选类别之后重新加载数据。
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var locId = options.locId;
var eventType = options.type;
// 初始化活动类型列表
var typeCategory = {
"all": { "id": "all", "name": "all", "title": "全部" },
"music": { "id": "music", "name": "music", "title": "音乐" },
"film": { "id": "film", "name": "film", "title": "电影" },
"drama": { "id": "drama", "name": "drama", "title": "戏剧 " },
"commonweal": { "id": "commonweal", "name": "commonweal", "title": "公益" },
"salon": { "id": "salon", "name": "salon", "title": "讲座 " },
"exhibition": { "id": "exhibition", "name": "exhibition", "title": "展览" },
"party": { "id": "party", "name": "party", "title": "聚会" },
"sports": { "id": "sports", "name": "sports", "title": "运动" },
"travel": { "id": "travel", "name": "travel", "title": "旅行" },
"course": { "id": "course", "name": "course", "title": "课程" }
};
// 初始化活动日期类型列表
var dateCategory = {
"future": { "id": "future", "name": "future", "title": "全部" },
"today": { "id": "today", "name": "today", "title": "今天" },
"tomorrow": { "id": "tomorrow", "name": "tomorrow", "title": "明天" },
"weekend": { "id": "weekend", "name": "weekend", "title": "周末" },
"week": { "id": "week", "name": "week", "title": "近期" },
};
// 全局保存的活动类型信息
var g_eventCategory = app.globalData.eventCategory;
this.setData({ "locId": locId, "type": eventType, "eventCategory": typeCategory, "current": this.data.type, "typeCategory": typeCategory, "dateCategory": dateCategory, "g_eventCategory": g_eventCategory });
// 请求活动列表
this.getEventListData();
},
/** 选择类型 */
handleType: function (event) {
this.setData({ "eventCategory": this.data.typeCategory, "current": this.data.type, "showCategory": true });
this.resetMenuTap();
this.setData({ "isTypeTap": true });
console.log("handleType");
},
/** 点击某个子类型 */
handleCategory: function (event) {
var id = event.currentTarget.dataset.id;
var readyData = { "showCategory": false };
this.data.isTypeTap && (readyData["type"] = id);
this.data.isDateTap && (readyData["date"] = id);
this.setData(readyData);
this.getEventListData();
this.resetMenuTap();
},
筛选标签切换布局
<view class="session-header">
<text class="type-tab {{type == 'all'?'tab-normal':'tab-HL'}}" bindtap="handleType">{{type == 'all'?'类型':g_eventCategory[type].title }}</text>
<text class="time-tab {{date == 'future'?'tab-normal':'tab-HL'}}" bindtap="handleTime">{{date == 'future' ? '时间' : dateCategory[date].title}}</text>
<text class="loc-tab" bindtap="handleLoc">地点</text>
</view>
<view wx:if="{{showCategory}}" class="category-session">
<view class="type-category-session">
<block wx:for="{{eventCategory}}" wx:for-item="category">
<text class="category {{current == category.id ? 'category-HL': ''}}" catchtap="handleCategory" data-id="{{category.id}}" data-name="{{category.name}}" data-title="{{category.title}}">{{category.title}}</text>
</block>
</view>
<view class="category-cover" bindtap="handleCoverTap"></view>
</view>
活动详情页显示的内容比较多,图片下载,查看位置,拨打电话的功能微信小程序原生支持,很快就做出来了。这里要说的是发表评论的左右切换动画效果,活动评论不支持上传到服务器。
/** 用户点击感兴趣,执行动画 */
handleWish: function (event) {
this.setData({ "action": "wish", "beforeAnimation": "left", "value": "" });
var animation = wx.createAnimation({
duration: 400,
timingFunction: 'linear'
})
animation.translateX(375).step()
this.setData({
animationData: animation.export()
})
setTimeout(function () {
this.reset();
}.bind(this), 400);
},
/** 用户点击要参加,执行动画 */
handleJoin: function (event) {
this.setData({ "action": "join", "beforeAnimation": "right", "value": "" });
var animation = wx.createAnimation({
duration: 400,
timingFunction: 'linear'
})
animation.translateX(-375).step()
this.setData({
animationData: animation.export()
});
setTimeout(function () {
this.reset();
}.bind(this), 400);
},
/** 动画完成后,恢复状态 */
reset: function () {
var animation = wx.createAnimation({
duration: 0,
timingFunction: 'linear'
})
animation.translateX(0).step();
this.setData({ "beforeAnimation": "", animationData: animation.export() });
},
感兴趣与要参加页面布局
<view class="container">
<view class="session-header {{action}}-session">
<text class="wish" bindtap="handleWish">感兴趣</text>
<text class="join" bindtap="handleJoin">要参加</text>
</view>
<view class="session-content {{beforeAnimation}}" animation="{{animationData}}">
<text class="title">{{title}}</text>
<text class="some-count">{{somecount}}</text>
<textarea class="textarea" placeholder-class="placeholder" placeholder="写点评论吧..." focus="true" data-action="{{action}}" bindinput="handleInput" value="{{value}}" />
<button class="confirm" size="default" type="primary" bindtap="handleComfirm" data-action="{{action}}">确定</button>
</view>
</view>
三、运行效果
微信小程序 - 豆瓣同城
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
微信小程序 - 豆瓣同城的更多相关文章
- 微信小程序豆瓣电影项目的改造过程经验分享
在学习微信小程序开发过程中,一部分的难点是前端逻辑的处理,也就是对前端JS的代码编辑:一部分的难点是前端界面的设计展示:本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整,把其中遇到的相关难点和 ...
- 微信小程序——豆瓣电影——(1):基础入门
准备 Demo 项目地址 https://github.com/zce/weapp-demo Clone or Download(需准备GIT环境) $ cd path/to/project/root ...
- 微信小程序——豆瓣电影——(2):小程序运行部署
Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序实例源码大全
微信小程序实例源码大全下载 微信小应用示例代码(phodal/weapp-quick)源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo( ...
- 微信小程序开源项目库汇总
最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...
- 微信小程序开源项目库集合
UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...
- 微信小程序源码推荐
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- 微信小程序一:微信小程序UI组件、开发框架、实用库
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/8079095.html 内容持续更新,维护中 邮箱 ...
随机推荐
- C++笔试题目大全(笔试宝典)(不断完善中)
1.new . delete . malloc . free 关系 delete 会调用对象的析构函数 , 和 new 对应 free 只会释放内存, new 调用构造函数. malloc 与 fre ...
- c/c++类型转换相关总结
在c语言中存在两种类型转换:显式类型转换和隐式类型转换: 显示类型转换:在类型前加上(type)变量,对变量进行的转换,程序员自己显式添加: char *ptra = (char*)ptrb; voi ...
- XXXX公司微课大赛技术储备
XXXX公司微课大赛技术储备 发短信验证 http://www.yunpian.com/ 发邮件 http://sendcloud.sohu.com/ flash头像上传组件 http://www.h ...
- Ajax不能跨域访问的解决方案
文章介绍 这是一篇,引导文吧... 因为写这篇文章时,实在想不出该如何分序.因此以实现跨域访问为目的,从基础知识往上写.最后以百度搜索智能提示为例,来讲解跨域的具体应用! 内容 首先,我们得明确什 ...
- Codeforces Round #377 (Div. 2) A. Buy a Shovel【暴力/口袋里面有无限枚 10 元和一枚 r 面值的硬币,问最少可以买多少把价值为 k 的铁铲】
A. Buy a Shovel time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
- OpenJ_Bailian - 1037 A decorative fence
Discription Richard just finished building his new house. Now the only thing the house misses is a c ...
- [POI2012]Festival
题目大意: 有$n$个正整数$x_1,x_2,\ldots,x_n$,再给出一些限制条件,限制条件分为两类: 1.给出$A,B$,要求满足$X_A+1=X_B$: 2.给出$C,D$,要求满足$X_C ...
- 你也许还不知道const_cast,static_cast,dynamic_cast,reinterpret_cast的区别吧?
[QQ群: 189191838,对算法和C++感兴趣可以进来] 开篇立意: C++中各种转换令人眼花缭乱,看似差不多,实际差很多,而且在当今时间,做一个"差不多先生"其 ...
- iOS 获取当前经纬度
一般说来LBS功能一般分为两块:一块是地理定位,就是获取当前精度.纬度和地理位置的功能,这一部分功能主要用到CoreLocation.Frameworks.一部分就是显示地图信息.丰富地图内容等,这一 ...
- 微软官方的精简版Windows 7——Windows Thin PC
Windows Thin PC是微软的Window 7的精简版本,它的一个非常明显的特点是系统资源占用小.如下是官方的系统配置需求: CPU: 主频1 GHz 内存: 1GB(实际占用约5 ...