微信小程序从入门到放弃

不久前，微信小程序已经开放了个人注册，不再局限于企业注册了，所以广大的个人开发者可以去搞个来玩玩。跟着哥，一步一步来。
一、首先，得注册一个小程序账号。网址：小程序注册
注册步骤就不说了，选择小程序，然后填写一堆信息，选择个人开发者就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、比目云开发文档
这个文档主要是数据信息在小程序和第三方云的交互

五、最后说几句，小程序这个东西，前端开发人员最好去熟悉了解一下，并不难，毕竟社会竞争大，掌握多种技能对自己还是有好处的，还可以锻炼下自己接受新知识的能力。说完了，卖个广告，谁想开发小程序的可以找我啊，或者有好创意的，找我，我来帮你实现。