使用mpvue+springboot开发微信小程序 三 - 地图导航功能与后台获取openId方法实现

简介

入坑程序员一年多,主攻后端javaWeb方向,但是对前端技术栈一直都有很大的兴趣,经常看一些技术博文和教程。有一次看到了一个婚礼邀请函的微信小程序,作者将其开发的程序开源出来了,顺手clone下来看了看源码。因为本人的婚期也已经提上了日程,熟悉了项目套路之后,就准备自己开发一个类似的小程序。
项目相关的代码已经放到GitHub上了,有兴趣的看官可以去看看,如果可以给个星星的话那便更好了。
后端服务:https://github.com/HowToRun/marry-restructure.git
前端代码:https://github.com/HowToRun/wxdemo.git

后台接口

参考项目中的接口是一个统一的请求入口,根据请求头中method字段的不同而进行不同的逻辑。不过因为本人javaWeb开发的习惯,将后台接口中不同的逻辑拆分成了多个接口。
婚礼邀请函的业务结果比较简单,大概分为照片墙,地图导航,点赞评论三个部分。其中地图导航,微信都提供有成熟的接口,只需要在前端直接调用即可。

小程序地图导航接口:
wx.getLocation({//获取当前经纬度
      type: 'wgs84', //返回可以用于wx.openLocation的经纬度,官方提示bug: iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息  
      success: function (res) {
        wx.openLocation({//​使用微信内置地图查看位置。
          latitude: 22.5542080000,//要去的纬度-地址
    
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,在微信小程序后台添加一个支付接口,获取商户号、AppID、AppSecret、商户支付密钥等信息。然后,我们可以使用微信提供的SDK进行开发。 1. 添加依赖 在pom.xml文件中添加以下依赖: ```xml <!-- 微信支付 SDK --> <dependency> <groupId>com.github.wxpay</groupId> <artifactId>wxpay-sdk</artifactId> <version>3.0.9</version> </dependency> ``` 2. 配置参数 在配置文件中添加微信支付相关参数: ```yaml wx: pay: appId: xxx # 公众账号ID mchId: xxx # 商户号 mchKey: xxx # 商户支付密钥 notifyUrl: xxx # 支付回调地址 tradeType: JSAPI # 交易类型 ``` 3. 编写支付逻辑 编写一个充值接口,接收用户传来的金额,然后调用微信支付API生成预支付订单,并返回给小程序前端。前端根据返回的信息调起微信支付界面进行支付。 ```java @RestController @RequestMapping("/recharge") public class RechargeController { @Autowired private WxPayService wxPayService; @Value("${wx.pay.notifyUrl}") private String notifyUrl; @PostMapping("/pay") public Result recharge(@RequestParam("amount") Integer amount) throws Exception { // 生成订单号 String orderId = UUID.randomUUID().toString().replace("-", ""); // 构建请求参数 WxPayUnifiedOrderRequest request = new WxPayUnifiedOrderRequest(); request.setBody("充值"); request.setOutTradeNo(orderId); request.setTotalFee(BaseWxPayRequest.yuanToFen(String.valueOf(amount))); request.setSpbillCreateIp("127.0.0.1"); request.setNotifyUrl(notifyUrl); request.setTradeType(WxPayConstants.TradeType.JSAPI); request.setOpenid("用户的openid"); // 调用统一下单API WxPayMpOrderResult result = wxPayService.createOrder(request); // 返回给前端的参数 Map<String, Object> map = new HashMap<>(); map.put("appId", result.getAppId()); map.put("timeStamp", String.valueOf(System.currentTimeMillis() / 1000)); map.put("nonceStr", result.getNonceStr()); map.put("package", "prepay_id=" + result.getPrepayId()); map.put("signType", "MD5"); map.put("paySign", wxPayService.createSign(map)); return Result.success(map); } } ``` 4. 处理支付回调 当用户支付成功后,微信服务器会向我们预设的回调地址发送一个POST请求,我们需要在该地址提供回调方法,处理支付结果。 ```java @RestController @RequestMapping("/wx/pay") public class WxPayController { @Autowired private WxPayService wxPayService; @PostMapping("/notify") public String notify(HttpServletRequest request) throws Exception { ServletInputStream inputStream = request.getInputStream(); ByteArrayOutputStream outputStream = new ByteArrayOutputStream(); byte[] buffer = new byte[1024]; int len; while ((len = inputStream.read(buffer)) != -1) { outputStream.write(buffer, 0, len); } String xml = outputStream.toString("UTF-8"); WxPayOrderNotifyResult result = wxPayService.parseOrderNotifyResult(xml); if ("SUCCESS".equals(result.getResultCode())) { // 处理支付成功逻辑 return "<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>"; } return "<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[处理失败]]></return_msg></xml>"; } } ``` 以上就是整合微信小程序实现充值功能的demo,需要注意的是,本例中的支付流程仅供参考,实际开发中还需要考虑诸如安全性、异常处理等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值