├── pages ├── aboutUs │ ├── aboutUs.js │ ├── aboutUs.wxml │ └── aboutUs.wxss ├── main │ ├── main.json │ ├── main.wxss │ ├── main.wxml │ └── main.js ├── logs │ ├── logs.json │ ├── logs.wxss │ ├── logs.wxml │ └── logs.js └── index │ ├── index.wxss │ ├── index.wxml │ └── index.js ├── image ├── logo.png ├── icon_home.png ├── icon_person.png ├── icon_home_select.png └── icon_person_select.png ├── app.wxss ├── README.md ├── utils └── util.js ├── app.json └── app.js /pages/aboutUs/aboutUs.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/main/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "enablePullDownRefresh": true 3 | } -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adongLuck/weapp-wechat-nearby/HEAD/image/logo.png -------------------------------------------------------------------------------- /image/icon_home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adongLuck/weapp-wechat-nearby/HEAD/image/icon_home.png -------------------------------------------------------------------------------- /image/icon_person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adongLuck/weapp-wechat-nearby/HEAD/image/icon_person.png -------------------------------------------------------------------------------- /image/icon_home_select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adongLuck/weapp-wechat-nearby/HEAD/image/icon_home_select.png -------------------------------------------------------------------------------- /image/icon_person_select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adongLuck/weapp-wechat-nearby/HEAD/image/icon_person_select.png -------------------------------------------------------------------------------- /pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: space-between; 7 | padding: 200rpx 0; 8 | box-sizing: border-box; 9 | } -------------------------------------------------------------------------------- /pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | var util = require('../../utils/util.js') 3 | Page({ 4 | data: { 5 | logs: [] 6 | }, 7 | onLoad: function () { 8 | this.setData({ 9 | logs: (wx.getStorageSync('logs') || []).map(function (log) { 10 | return util.formatTime(new Date(log)) 11 | }) 12 | }) 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .userinfo { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .userinfo-avatar { 9 | width: 128rpx; 10 | height: 128rpx; 11 | margin: 20rpx; 12 | border-radius: 50%; 13 | } 14 | 15 | .userinfo-nickname { 16 | color: #aaa; 17 | } 18 | 19 | .usermotto { 20 | margin-top: 200px; 21 | } -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{userInfo.nickName}} 6 | 7 | 8 | {{motto}} 9 | 10 | 11 | -------------------------------------------------------------------------------- /pages/aboutUs/aboutUs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 找事吧 6 | 7 | 8 | Copyright (c) 2015-2016找事吧 版权所有 9 | 10 | 11 | -------------------------------------------------------------------------------- /pages/aboutUs/aboutUs.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .userinfo { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .userinfo-avatar { 9 | width: 128rpx; 10 | height: 128rpx; 11 | margin: 20rpx; 12 | border-radius: 50%; 13 | } 14 | 15 | .userinfo-nickname { 16 | color: #aaa; 17 | } 18 | 19 | .usermotto { 20 | margin-top: 250px; 21 | font-size:15px; 22 | text-align: center; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # weapp-wechat-nearby-master 2 | 3 | > 功能点：轮播；列表，下拉刷新上拉加载更多；地图；网络请求；数据绑定等 4 | > 文本仿照了 找事吧app 附近三公里功能，并感谢找事吧数据的提供。考虑到数据的私密性，本文贴出的代码并没有贴出请求URL，敬请谅解。 5 | > 本文基于微信小程序公测版，IDE：微信开发者工具 0.10.102800 6 | 7 | 效果图如下： 8 | 9 | ![enter image description here](http://img.blog.csdn.net/20161115163622331) 10 | 11 | 具体的介绍分析，放在了csdn的博客中，博客地址：[http://blog.csdn.net/u010635353/article/details/53173633](http://blog.csdn.net/u010635353/article/details/53173633) 12 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | Page({ 5 | data: { 6 | motto: 'Hello World', 7 | userInfo: {} 8 | }, 9 | //事件处理函数 10 | bindViewTap: function() { 11 | wx.navigateTo({ 12 | url: '../logs/logs' 13 | }) 14 | }, 15 | onLoad: function () { 16 | console.log('onLoad') 17 | var that = this 18 | //调用应用实例的方法获取全局数据 19 | app.getUserInfo(function(userInfo){ 20 | //更新数据 21 | that.setData({ 22 | userInfo:userInfo 23 | }) 24 | }) 25 | } 26 | }) 27 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/main/main", 4 | "pages/aboutUs/aboutUs", 5 | "pages/index/index", 6 | "pages/logs/logs" 7 | ], 8 | "window": { 9 | "backgroundTextStyle": "dark", 10 | "navigationBarBackgroundColor": "#fff", 11 | "navigationBarTitleText": "demo", 12 | "navigationBarTextStyle": "black", 13 | "backgroundColor":"#2345bf" 14 | 15 | }, 16 | "tabBar": { 17 | "color": "#a9a9a9", 18 | "selectedColor": "#1f1f1f", 19 | "backgroundColor": "#fefefe", 20 | "borderStyle": "white", 21 | "list": [ 22 | { 23 | "pagePath": "pages/main/main", 24 | "text": "首页", 25 | "iconPath": "image/icon_home.png", 26 | "selectedIconPath": "image/icon_home_select.png" 27 | }, 28 | { 29 | "pagePath": "pages/aboutUs/aboutUs", 30 | "text": "关于我们", 31 | "iconPath": "image/icon_person.png", 32 | "selectedIconPath": "image/icon_person_select.png" 33 | } 34 | ] 35 | } 36 | } -------------------------------------------------------------------------------- /pages/main/main.wxss: -------------------------------------------------------------------------------- 1 | /**main.wxss**/ 2 | .swiper_box { 3 | width: 100%; 4 | } 5 | 6 | swiper-item image { 7 | width: 100%; 8 | display: inline-block; 9 | overflow: hidden; 10 | } 11 | 12 | 13 | .sv{ 14 | background-color:#efeff4; 15 | margin-top: 10rpx 16 | } 17 | .items{ 18 | float:left; 19 | width: 20%; 20 | background-color:#fff; 21 | } 22 | .item-img{ 23 | width: 100%; 24 | height: 60rpx; 25 | } 26 | .item-text{ 27 | width: 100%; 28 | height: 60rpx; 29 | font-size: 25rpx; 30 | text-align:center; 31 | } 32 | .data{ 33 | margin-top: 10rpx; 34 | background-color:#fff; 35 | padding: 10rpx; 36 | } 37 | .data-title{ 38 | padding-left: 10rpx; 39 | padding-top: 15rpx; 40 | } 41 | .data-items{ 42 | width: 100%; 43 | margin-top: 10rpx; 44 | margin-bottom: 10rpx; 45 | overflow: hidden; 46 | } 47 | .data-item-img{ 48 | width: 20%; 49 | height:120rpx; 50 | float:left; 51 | } 52 | .data-item-text{ 53 | width: 75%; 54 | padding: 5rpx; 55 | height:120rpx; 56 | float:left; 57 | } 58 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | var that = this 5 | console.log('App Launch') 6 | //调用API从本地缓存中获取数据 7 | var logs = wx.getStorageSync('logs') || [] 8 | logs.unshift(Date.now()) 9 | wx.setStorageSync('logs', logs) 10 | 11 | wx.getLocation({ 12 | type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标 13 | success: function(res){ 14 | // success 15 | that.globalData.latitude = res.latitude 16 | that.globalData.longitude = res.longitude 17 | }, 18 | fail: function() { 19 | // fail 20 | }, 21 | complete: function() { 22 | // complete 23 | } 24 | }) 25 | }, 26 | getUserInfo:function(cb){ 27 | var that = this 28 | if(this.globalData.userInfo){ 29 | typeof cb == "function" && cb(this.globalData.userInfo) 30 | }else{ 31 | //调用登录接口 32 | wx.login({ 33 | success: function () { 34 | wx.getUserInfo({ 35 | success: function (res) { 36 | that.globalData.userInfo = res.userInfo 37 | typeof cb == "function" && cb(that.globalData.userInfo) 38 | } 39 | }) 40 | } 41 | }) 42 | } 43 | }, 44 | onShow: function () { 45 | console.log('App Show') 46 | }, 47 | onHide: function () { 48 | console.log('App Hide') 49 | }, 50 | globalData:{ 51 | userInfo:null, 52 | latitude:null, 53 | longitude:null 54 | }, 55 | }) -------------------------------------------------------------------------------- /pages/main/main.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | {{item.text}} 19 | 20 | 21 | 22 | {{title}} 23 | 24 | 25 | 27 | 28 | 29 | {{item.name}} 30 | {{item.address}} 31 | {{item.phone}} 32 | 33 | 34 | 35 | 36 | 37 | 38 | 41 | 42 | -------------------------------------------------------------------------------- /pages/main/main.js: -------------------------------------------------------------------------------- 1 | //main.js 2 | //获取应用实例 3 | var app = getApp() 4 | var count = 10; 5 | var total = 0; 6 | var code = "2"; 7 | Page({ 8 | data: { 9 | title: "附近三公里", 10 | indicatorDots: true, 11 | vertical: false, 12 | autoplay: true, 13 | interval: 3000, 14 | duration: 1000, 15 | loadingHidden: false, // loading 16 | array: [{ 17 | code: '1', 18 | id: 'icon_1', 19 | src: 'http://123.57.15.173:8089/userfiles/1/images/gatherType/img/2016/09/7(1).png', 20 | text: '家政' 21 | }, { 22 | code: '2', 23 | id: 'icon_2', 24 | src: 'http://123.57.15.173:8089/userfiles/1/images/gatherType/img/2016/09/10(1).png', 25 | text: '药店' 26 | }, { 27 | code: '3', 28 | id: 'icon_3', 29 | src: 'http://123.57.15.173:8089/userfiles/1/images/gatherType/img/2016/09/9(2).png', 30 | text: '银行' 31 | }, { 32 | code: '4', 33 | id: 'icon_4', 34 | src: 'http://123.57.15.173:8089/userfiles/1/images/gatherType/img/2016/09/2(1).png', 35 | text: '维修' 36 | }, { 37 | code: '5', 38 | id: 'icon_5', 39 | src: 'http://123.57.15.173:8089/userfiles/1/images/gatherType/img/2016/09/1(1).png', 40 | text: '公厕' 41 | }, { 42 | code: '6', 43 | id: 'icon_6', 44 | src: 'http://123.57.15.173:8089/userfiles/1/images/gatherType/img/2016/09/8(6).png', 45 | text: '医院' 46 | }, { 47 | code: '7', 48 | id: 'icon_7', 49 | src: 'http://123.57.15.173:8089/userfiles/1/images/gatherType/img/2016/09/11(1).png', 50 | text: '加油站' 51 | }, { 52 | code: '8', 53 | id: 'icon_8', 54 | src: 'http://123.57.15.173:8089/userfiles/1/images/gatherType/img/2016/09/5(5).png', 55 | text: '汽车洗护' 56 | }, { 57 | code: '9', 58 | id: 'icon_9', 59 | src: 'http://123.57.15.173:8089/userfiles/1/images/gatherType/img/2016/09/5(1).png', 60 | text: '营业厅' 61 | }, { 62 | code: '10', 63 | id: 'icon_10', 64 | src: 'http://123.57.15.173:8089/userfiles/1/images/gatherType/img/2016/09/12(2).png', 65 | text: '停车场' 66 | }], 67 | dataArray: [] 68 | }, 69 | 70 | //事件处理函数 71 | swiperchange: function (e) { 72 | // 此处写 轮播 改变时会触发的 change 事件 73 | }, 74 | 75 | // 轮播item点击事件 76 | itemclick: function (e) { 77 | wx.showToast({ 78 | title: e.currentTarget.dataset.id + "", 79 | icon: 'success', 80 | duration: 2000 81 | }) 82 | }, 83 | 84 | // 分类item单击事件 85 | typeclick: function (e) { 86 | total = 0; 87 | code = e.currentTarget.dataset.code + ""; 88 | var name = e.currentTarget.dataset.text + ""; 89 | this.data.dataArray = []; 90 | 91 | this.setData({ 92 | title: "附近三公里: " + name 93 | }) 94 | 95 | this.periphery(); 96 | }, 97 | 98 | onLoad: function () { 99 | console.log('onLoad') 100 | var that = this 101 | 102 | count = 10; 103 | total = 0; 104 | 105 | //sliderList 106 | wx.request({ 107 | url: 'http://192.168.1.137:80/app/guanggao', 108 | method: 'POST', 109 | data: { 110 | type: "1" 111 | }, 112 | header: { 113 | 'Accept': 'application/json' 114 | }, 115 | success: function (res) { 116 | that.setData({ 117 | images: res.data.data.guanggao 118 | }) 119 | } 120 | }) 121 | 122 | this.periphery(); 123 | }, 124 | 125 | // 网络请求 126 | periphery: function () { 127 | var that = this 128 | //sliderList 129 | wx.request({ 130 | url: 'http://192.168.1.137:80/app/periphery', 131 | method: 'POST', 132 | data: { 133 | city: "深圳", 134 | code: code, 135 | count: count + "", 136 | total: total + "", 137 | lat: app.globalData.latitude + "", 138 | lng: app.globalData.longitude + "" 139 | }, 140 | header: { 141 | 'Accept': 'application/json' 142 | }, 143 | success: function (res) { 144 | that.data.dataArray = that.data.dataArray.concat(res.data.data.list) 145 | that.setData({ 146 | dataArray: that.data.dataArray 147 | }) 148 | 149 | setTimeout(function () { 150 | that.setData({ 151 | loadingHidden: true 152 | }) 153 | }, 1000) 154 | } 155 | }) 156 | }, 157 | 158 | // 下拉刷新回调接口 159 | onPullDownRefresh: function () { 160 | total = 0; 161 | this.data.dataArray = []; 162 | this.periphery(); 163 | wx.stopPullDownRefresh; 164 | }, 165 | 166 | // 上拉加载回调接口 167 | onReachBottom: function () { 168 | 169 | total += count; 170 | this.periphery(); 171 | 172 | }, 173 | 174 | openmap: function (e) { 175 | 176 | wx.openLocation({ 177 | latitude: e.currentTarget.dataset.lat , // 纬度，范围为-90~90，负数表示南纬 178 | longitude: e.currentTarget.dataset.lng, // 经度，范围为-180~180，负数表示西经 179 | scale: 28, // 缩放比例 180 | name: e.currentTarget.dataset.name, // 位置名 181 | address: e.currentTarget.dataset.address, // 地址的详细说明 182 | success: function(res){ 183 | // success 184 | }, 185 | fail: function() { 186 | // fail 187 | }, 188 | complete: function() { 189 | // complete 190 | } 191 | }) 192 | }, 193 | }) 194 | 195 | 196 | --------------------------------------------------------------------------------