小程序模板网

微信小程序开发中走过的坑(一):获取城市地理位置及具体位置,下拉及刷新的

2017-12-07 黄縢酒

前言2016年9月21日晚间,微信公众平台开始陆续对外发送小程序内测邀请。此时,便对微信小程序有了关注,打算学习、并开发一款小程序。期间因为有其他项目开发的原因,稍有中断 ...

 
 
 

 
》》》前言

2016年9月21日晚间,微信公众平台开始陆续对外发送小程序内测邀请。此时,便对微信小程序有了关注,打算学习、并开发一款小程序。期间因为有其他项目开发的原因,稍有中断,然在前些天,终于将小程序的初版发布,并审核通过,下面文章中会把我在开发这个图片类小程序(不含上传图片功能)中遇到的一些坑与大家讲解,并附上解决途径。

》》》遇到的坑

(1)获取城市地理位置及具体位置 
需求:根据微信小程序自带的wx.getLocation(OBJECT),获取用户所在具体位置及城市信息。 
解决思路:推荐使用百度地图的api来获取地理位置信息。 
具体流程可参考微信小程序的百度地图获取地理位置 —— 微信小程序教程系列(15) 
上面例子已测试成功。 
开发的大牛还是很多的,我在此基础上再补充几点: 
①调用此处的api,只需要有百度账号即可,在配额不够的情况下,可申请认证,具体可查看《认证开发者权益》; 
②在调用wx.getLocation(OBJECT)时,会弹出“是否获取地理位置”,要考虑用户在不允许获取地理位置的时候,设置一个默认经纬度; 
③附上一个官方的js下载地址:点击这里

(2)下拉及刷新的实现 
需求:根据接口获取第一页数据,下拉后重新获取第一页数据,上拉后可以获取第二页,第N页数据。 
解决思路:现有两种方法: 
方法一:利用page的”onPullDownRefresh”和”onReachBottom”, 
方法二在scroll-view里设定bindscrolltoupper和bindscrolltolower,大家可以根据自己的实际开发情况选用,讲解一下区别:

①方法一和方法二是冲突的,130400版本更新导致下拉刷新和scroll-view不能同时使用,只能选择一个; 
②在现在的版本中,方法一的onPullDownRefresh会自带下拉刷新动作,方法二没有; 
③方法二的scroll-view可以自带参数传递到js中,方法一如果下拉要带参数需要data中设值,下面的代码会有体现。

代码实现:

 

		
  1. // 下拉重新加载照片信息
  2. onPullDownRefresh: function () {
  3. this.setData({
  4. items: [],
  5. personalCurPage: 1
  6. });
  7. var that = this;
  8. common.showTip("刷新中...", "loading", 800);
  9. var userId = wx.getStorageSync('userId');
  10.  
  11. // 如果用户已登录
  12. if (userId != null && userId > 0) {
  13. api.getShooterNewestPics(that, userId, 1);
  14. }
  15. },
  16.  
  17. // 上拉加载下一页
  18. onReachBottom: function (event) {
  19. var that = this;
  20. var curPage = that.data.personalCurPage;
  21. curPage++;
  22. this.setData({
  23. hidden: false,
  24. personalCurPage: curPage
  25. });
  26. var userId = wx.getStorageSync('userId');
  27. common.showTip("加载中...", "loading", 500);
  28. api.getShooterNewestPics(that, userId, curPage);
  29. },

今天暂时讲这两点,下次继续。  有兴趣可以查看查看线上例子: 



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18063.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询