不久前，微信小程序已经开放了个人注册，不再局限于企业注册了，所以广大的个人开发者可以去搞个来玩玩。跟着哥，一步一步来。
一、首先，得注册一个小程序账号。网址：小程序注册
注册步骤就不说了，选择小程序，然后填写一堆信息，选择个人开发者就ok了。注册完后，登录，完善你小程序的信息，然后获取拿到一个appid，如下图：
复制这个appid
二、下载微信开发工具。网址：微信开发工具下载
下载好后，安装啦，打开，新建一个项目，把刚才的appid拿过来，填进去。
项目目录那里选择新建一个文件夹
点击添加项目，就会到这个页面啦，截图给大家说下各个板块的功能：
开发工具，看多几眼就熟悉啦
三、实战开发。像我们这些前端开发（Android和ios）不懂后台接口开发，也没有个人的服务器，其实可以用到第三方云来保存数据。推荐下这个：比目
这个有什么用呢？来，看看哥的云数据：
云数据后台
有了这个第三方云，我们就可以做一个niubility的小程序了，比如可以做一个记录旅行的小程序。
流程：
1，根据微信小程序的api，获取到当前位置的地点，经纬度信息
2，用比目云，把这些位置信息记录到云数据库
3，在首页用比目云查找这些位置信息，再在地图上显示出来
思路大概就这样，我们来撸码吧：
首先是微信的api，获取位置信息
wx.chooseLocation({
success: function (res) {
// success
console.log(JSON.stringify(res))
var name = res.name;
if (res.name == "") {
name = res.address
}
//微信的api有点坑，没有返回城市，下面的方法截取并不是很有效
var citys = res.address.split("市");
citys = citys[0];
citys = citys.split("省");
if (citys.length > 1) {
citys = citys[1];
} else {
citys = citys[0];
}
//添加数据到bomb云
that.addBmob(name, res.address, citys, res.latitude, res.longitude)
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
拿到位置信息后，添加数据到云：
//添加到bmob数据库
addBmob: function (name, address, city, lat, lng) {
var Track = Bmob.Object.extend("Track");
var track = new Track();
track.set("title", name);
track.set("address", address);
track.set("city", city);
track.set("lat", lat + "");
track.set("lng", lng + "");
track.set("openId", openid);
track.set("name", Username);
//添加数据，第一个入口参数是null
track.save(null, {
success: function (result) {
// 添加成功，返回成功之后的objectId（注意：返回的属性名字是id，不是objectId），你还可以在Bmob的Web管理后台看到对应的数据
common.showTip('添加成功');
that.checkTrack()
},
error: function (result, error) {
// 添加失败
common.showTip('添加失败' + JSON.stringify(error));
}
});
}
最后查询一下数据，把位置列表拿下来，添加marker到地图上
//查询足迹
checkTrack: function () {
var Track = Bmob.Object.extend("Track");
var query = new Bmob.Query(Track);
query.limit(1000);
query.equalTo("openId", openid);
query.find({
success: function (results) {
TrackList = [];
var citys = [];
for (var i = 0; i < results.length; i++) {
TrackList.push({
iconPath: "/imgs/ic_map.png",
id: i,
latitude: results[i].get("lat"),
longitude: results[i].get("lng"),
title: results[i].get("title")
})
if (results[i].get("city") != null) {
citys.push(results[i].get("city"));
}
}
var city = [];
for (var j = 0; j < citys.length; j++) {
if (city.indexOf(citys[j]) == -1) {
city.push(citys[j])
}
}
that.setData({
markers: TrackList,
trackNum: TrackList.length + "个足迹" + " ，" + city.length + "座城市"
})
},
error: function (error) {
alert("查询失败: " + error.code + " " + error.message);
}
});
}
主要的就是上面三段代码了，想要源码的，私信我哈。
最后给个二维码你们扫一扫，体验一下这个小程序，或者微信搜索：足迹地图
足迹地图
四、如果你真想开发一个小程序，而又没有服务器来保存数据的话，那建议你看以下两个文档，看完绝对能开发出一个小程序了，不行你来砍我。
1、微信小程序官方文档
这个文档主要是熟悉小程序的api，组件的用法，以及发布等等
2、比目云开发文档
这个文档主要是数据信息在小程序和第三方云的交互
五、最后说几句，小程序这个东西，前端开发人员最好去熟悉了解一下，并不难，毕竟社会竞争大，掌握多种技能对自己还是有好处的，还可以锻炼下自己接受新知识的能力。说完了，卖个广告，谁想开发小程序的可以找我啊，或者有好创意的，找我，我来帮你实现。
网友评论