共享单车微信小程序

微信小程序bike单车,前台使用小程序地图控件+weui+小程序相关组件和API,后台使用SpringBoot+JPA,用户及单车信息保存进mongodb,短信平台的配置信息和临时生成的验证码存放进redis用于校验。实现定位,单车增加及搜索,用户注册,短信接口调用,支付押金等功能。

1. 地图定位及显示周围单车数量

页面通过<map>标签来引入微信地图

<map id=‘myMap‘ longitude=‘{{longitude}}‘ latitude=‘{{latitude}}‘ controls=‘{{controls}}‘ markers=‘{{markers}}‘ show-location=‘true‘ bindcontroltap=‘controltap‘ scale=‘17‘ style=‘width: 100%; height: 100%‘>
</map>

定位通过监听页面加载的生命周期函数onLoad获取经纬度来实现,同时获取周围的单车信息

 onLoad: function() {
    var that = this;
    wx.getLocation({
      success: function(res) {
        var longitude = res.longitude;
        var latitude = res.latitude;
        that.setData({
          longitude: longitude,
          latitude: latitude
        })
        // 查找单车信息
        findBikes(longitude, latitude, that);
      },
    });

/*其他加载项*/
}

查找周围单车

function findBikes(longitude, latitude, that) {
  wx.request({
    url: ‘http://localhost:8080/bike/findNear‘,
    method: ‘GET‘,
    data: {
      longitude: longitude,
      latitude: latitude
    },
    success: function(res) {
      var bikes = res.data.map((geoResult) => {
        return {
          longitude: geoResult.content.location[0],
          latitude: geoResult.content.location[1],
          iconPath: ‘/images/bike.png‘,
          width: 35,
          height: 40,
          id: geoResult.content.id
        }
      })
      // 将bike数组set到当前页面的marker
      that.setData({
        markers: bikes
      })
    }
  })
}

service层中获取周围单车信息

    /**
     * 根据当前经纬度查找附近的bikes
     * @param longitude
     * @param latitude
     * @return
     */
    @Override
    public List<GeoResult<Bike>> findNear(double longitude, double latitude) {
        // 2千米范围内,状态为的0的bike, 数量限制20
        NearQuery nearQuery = NearQuery
                .near(longitude, latitude)
                .maxDistance(2, Metrics.KILOMETERS)
                .query(new Query(Criteria.where("status").is(0)).limit(20));

        GeoResults<Bike> geoResults = mongoTemplate.geoNear(nearQuery, Bike.class);
        return geoResults.getContent();

    }

2. 调用短信接口发送验证码

前台方法省略,电话号码填写完毕后获取短信验证码及校验【注意:短信签名需要在腾讯云申请并获得通过】

    /**
     * 调用腾讯云短信API发送短信,并将手机号及验证码存入redis
     * @param countryCode
     * @param phoneNum
     * @return
     */
    @Override
    public boolean sendMsg(String countryCode, String phoneNum) {
        Jedis jedis = pool.getResource();

        // 从redis中获取之前存储的appid与appkey
        int appid = Integer.parseInt(jedis.get("appid"));
        String appkey = jedis.get("appkey");

        boolean flag = true;
        try {
            // 生成短信验证码(4位)
            int code = (int)((Math.random() * 9 + 1) * 1000);
            SmsSingleSender ssender = new SmsSingleSender(appid, appkey);
            // 向对应手机号的用户发送短信
            SmsSingleSenderResult result = ssender.send(0, countryCode, phoneNum, "【bike单车】你的验证码为:" + code + "。如非本人操作,请忽略本短信。" , "", "");
            // 将发送的手机号作为key,验证码作为value保存到redis中(有效时长300s)
            jedis.setex(phoneNum, 300, code + "");
        } catch (Exception e) {
            flag = false;
            logger.error("调用短信接口异常" + e.getMessage());
        } finally {
            jedis.close();
        }
        return flag;
    }

    /**
     * 从redis中获取并校验验证码是否匹配
     * @param phoneNum
     * @param verifyCode
     * @return
     */
    @Override
    public boolean verify(String phoneNum, String verifyCode) {
        Jedis jedis = pool.getResource();
        String code = jedis.get(phoneNum);
        jedis.close();
        return code != null && code.equals(verifyCode);
    }

3. 押金充值

需要企业认证,方法参考API,需要注意的是充值成功后更新用户押金及状态

   success: function (res) {
              // 关闭充值中的加载对话框
              wx.hideLoading();
              // 交过押金后,将用户status更新为2
              var globalData = getApp().globalData;
              globalData.status = 2;
              wx.setStorageSync("status", 2);
              wx.navigateTo({
                url: ‘../identify/identify‘,
              })
            }

4. 实名认证

formSubmit: function(e) {
    // 获取全局变量的数据
    var globalData = getApp().globalData;

    // 获取手机号
    var phoneNum = myUtil.get(‘phoneNum‘);

    // 获取姓名和身份证号
    var name = e.detail.value.name;
    var idNum = e.detail.value.idNum;
    wx.request({
      url: ‘http://localhost:8080/user/identify‘,
      header: {‘content-type‘: ‘application/x-www-form-urlencoded‘ },
      data: {
        phoneNum: phoneNum,
        name: name,
        idNum: idNum,
        status: 3
      },
      method: ‘POST‘,
      success: function(res) {
        globalData.status = 3;
        wx.setStorageSync(‘status‘, 3);
        // 完成所有注册流程,跳转到首页
        wx.navigateTo({
          url: ‘../index/index‘,
        });
      }
    })
  }

完成这一步,将用户信息存进mongodb,并且跳转到用车界面

5. 故障申报

将故障信息及地理位置写入数据库,修改单车状态。

原文地址:https://www.cnblogs.com/zjfjava/p/9550450.html

时间: 2024-10-15 20:19:06

共享单车微信小程序的相关文章

只需两步快速获取微信小程序源码

只需两步快速获取微信小程序源码 第一次在掘金这样高大上的社区写文章,忐忑地敲下我获取小程序源码过程中的经验分享. 最近在学习微信小程序开发,半个月学习下来,很想实战一下踩踩坑,于是就仿写了某个小程序的前端实现,过程一言难尽,差不多两周时间过去了,发现小程序的坑远比想象的要多的多!!在实际练手中,完全是黑盒的,纯靠推测,部分效果在各种尝试后能能做出大致的实现,但是有些细节,实在不知道如何去实现.这种时候,真的很想一窥源码,查看究竟,看看大厂的前端大神们是如何规避了小程序的一些比较奇葩的坑. 于是就

微信小程序商城制作-共享链开发

微信小程序已经正式发布了一段时间,在互联网知名企业的带领下,众多中小企业也都在迅速涌入这个潜藏巨大商机的市场.其中有京东.去哪儿等热门小程序,大家也已经看了不少了.共享链平台开发:151-1222-4001(微/电)于此同时兄弟连就研发了三款小程序上线,并从中提取要点组织一套可以做微信小程序培训开发全栈班的课程体系,并由教学总监亲自授课.为了能让更多人有机会学习这个课程,针对有一定基础的开发工程师开设了线上课程,现在有几千人同时观看这个直播课,好评如潮.下边呢,我们不妨从一些已经上线并且非常实用

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微

微信小程序-整理各种小程序源码和资料免费下载

微信小程序整理下载 [小程序源码]微信小程序-车源宝微信版 [小程序源码]小程序-微赞社区(论坛demo) [小程序源码]微信小程序-收支账单 [小程序工具]微信小程序-日历 [小程序源码]小程序-在线聊天功能 [小程序源码]微信小程序-大好商城(新增功能天气查询和2048游戏) [小程序源码]微信小程序-查询号码归属地 [小程序源码]微信小程序-备忘录2 [小程序源码]微信小程序-QQ音乐 [小程序源码]小程序-货币汇率 [小程序源码]微信小程序-大学图书馆 [小程序源码]小程序-积分商城 [

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序免费制作一键生成平台是什么原理?速成应用代理需要多少钱

微信10亿活跃用户,10亿的流量等待瓜分.想想现在人们用哪个应用最多?当然是微信,而微信小程序就是依托微信而存在的,先天优势就在那里,怎么可能不火?作为想要创业以及苦于一直没有机会发现好商机的你,为什么要错过速成应用微信小程序加盟代理这个项目? 小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念,用户不用关心是否安装太多应用的问题.应用将无处不在,随时可用,但又无需安装卸载.全面开放

微信小程序常见问题大全

一.什么是微信小程序 小程序相当于运行在微信上无需安装的"APP",微信小程序容纳了千万APP平台,带你逛遍全世界的吃喝玩乐购,足不出户享受不一样的待遇.有了小程序,相当与在微信里面开了一个自己独立的店,微信里10亿用户都可以到这个店里面消费,并且具有支付功能.导航功能.搜索附近的小程序都能看到你的店. 二.小程序有哪些流量入口? 1.附近小程序列表 2.附近小程序列表广告 3.公众号profile页相关小程序 4.公众号自定义菜单 5.公众号模板消息 6.公众号文章,文字形式.图片形

微信小程序个人/企业开放服务类目一览表

之前写了个牙科小程序,结果服务类目没写对,审核没过,在网上搜了小程序官方的服务类目表,还有一些审核标准. 微信小程序个人开放服务类目表 服务类目 类目分类一 类目分类二 引导描述 出行与交通 代驾 / / 生活服务 家政.丽人.摄影/扩印.婚庆服务.环保回收/废物回收 / / 餐饮 点评与推荐.菜谱.餐厅排队 / / 旅游 出境WiFi.旅游攻略 / / 商业服务 会展服务.律师 / [律师]类目需上传<律师执业资格证>, 上传原件或复印件, 复印件务必加盖公司公章 文件格式为jpg.jpeg

微信小程序——豆瓣电影——(2):小程序运行部署

Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正