一个戳中痛点的小程序(内附源码)

小程序是一个“弱”APP,它依赖于微信环境。小程序并不能完全替代APP,只适合将APP中某一个或某一类型的功能抽离出来,使用小程序来快捷实现。

当你在人生地不熟的环境,又恰好碰到内急的情况下,是否要略尴尬的找路人问一句:请问附近哪里有厕所吗?甚至非常内向的人,都不太愿意去问路人吧。好了,为什么我们不开发一个“找厕所”的小程序呢?

百度开发者

我们需要借助百度地图功能(高德、腾讯也可以),首先要去百度地图开放平台,申请成为开发者。如果你已经是开发者了,则只需要去我的应用,新建一个“找厕所”的应用,并拿到AK(API调用权限验证串,后面要使用)

下载API

到开发 > 微信小程序JavaScript API > 相关下载,下载需要的bmap-wx.zip,压缩包里面有我们需要的bmap-wx.js以及压缩版bmap-wx.min.js

搭建项目

首先初始化一个微信小程序项目,并在根目录下新建一个libs目录,将bmap-wx.js复制到libs目录下。在pages目录下,新建一个map目录以及对应的四个配置文件(map.jsmap.jsonmap.wxmlmap.wxss

简单说一下几个核心代码:

1
2
// 引用百度地图微信小程序JSAPI模块 
var bmap = require('../../libs/bmap-wx.js');

onLoad事件中初始化地图组件:

1
2
3
4
// 新建百度地图对象 
var BMap = new bmap.BMapWX({
ak: 'your ak'
});

发起POI检索:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var fail = function (data) {
console.log(data)
};
var success = function (data) {
wxMarkerData = data.wxMarkerData;
that.setData({
markers: wxMarkerData,
latitude: wxMarkerData[0].latitude,
longitude: wxMarkerData[0].longitude
});
}
// 发起POI检索请求
BMap.search({
"query": '厕所',
fail: fail,
success: success
});

最终的效果截图如下:

如果有想体验一下的,可以加我微信fanxin_363310763联系我。申请好友时,请注明找厕所O(∩_∩)O哈哈~

源码:https://github.com/baininghan/searchWC.git

喜欢跟老白一起聊技术的,请右上角点一波关注!


作者:Fancye
头条号:老白聊技术
个人博客:baininghan.com

坚持原创技术分享,您的支持将鼓励我继续创作!