webview嵌套vue页面实现支付宝h5支付和微信h5支付

支付宝h5支付

我的页面支付流程如下:
1,购物车选好商品,点击结算按钮进入确认订单页面
2,选择收货地址,配送时间和结算方式(现在这里选择支付宝)
3,点击提交订单(重要)
点击提交订单调用后台接口,把你该传的参数传给后台,之后后台会跟支付宝后台进行一系列的交互,这个就不清楚了,最后返回给前台一串字符串表单,前台执行下面的代码就好

let ali_params = res.data.body.你的返回字符串内容;
const div = document.createElement("div"); // 创建div
div.innerHTML = ali_params; // 将返回的form 放入div
document.body.appendChild(div);
document.forms[0].submit();

这样就可以调起支付宝支付页面了
支付成功后如何回到商户页面,这个是我之前做项目的时候比较头疼的问题,看了支付宝的技术支持文档,算是有了简单了解

链接如下:小伙伴们有别的问题可以去看看
https://opensupport.alipay.com/support/knowledge/20070/201602164961

当然,这个return_url可以由前台传入,也可以后台直接写死,我是后台直接写死了(支付宝支付成功后跳转到我的订单页面)

走到这一步,在手机端浏览器里调起支付宝支付,支付成功且成功回到了商户端,这样就完美了吧,可惜人算不如天算,打了个apk(模拟的移动端应用包),支付宝支付时发现成功后跳转到了登陆页面,这是怎么搞的呢

我在在main.js设置了路由拦截,一些需要需要登陆才可访问的页面没有userId的话就让其跳转到login.vue页面

// 注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
  // 判断要去的路由有没有requiresAuth
  // let userId = localStorage.getItem("userId")
  if (to.meta.requiresAuth) {
    if (localStorage.userId) {
      next()
    } else {
      next({
        path: '/login',
        query: {
          redirect: to.fullPath
        } // 将刚刚要去的路由path（却无权限）作为参数，方便登录成功后直接跳转到该路由
      })
    }
  } else {
    next()
  }
});

在route配置文件里一些需要登陆才可进入的页面,我设置了requiresAuth属性,方便进行路由拦截,比如这个支付成功后设置页面跳转到的我的订单

{
      path: '/myOrder',
      name: 'myOrder',
      meta: {
        requiresAuth: true,
        // keepAlive: true
      },
      components: {
        view:myOrder
      }
    }

从支付宝返回商户后我所有的存储信息都没了(进行路由拦截的关键信息userId就存在本地存储localStorage里面)
所有从支付宝支付成功并返回后页面直至login.vue(这里我纳闷的是再次登陆失败了,不知道原因,但是就算是再次登陆成功这样也肯定不对,不符合逻辑)
但是浏览器就是好好的啊,跟老板沟通了一下,可能是框架的问题(我的这个项目是webview嵌套vue开发的移动端应用),框架清除了一些缓存,但愿是这个原因吧,会随时更新,现在我要去看微信了

=================================
来更新啦
昨天支付宝支付成功后点击完成跳转到登录页的问题已经解决了,不是我前端的问题,框架也没问题,就是后台小哥调用支付宝API时,若支付完成会有回调,回调里面的某一个链接地址写错了,本应该设为线上地址https://…,(至于具体是哪里设置错了我就不了解,我只管前台代码,就是文章开头的那一段代码,不过不得不说一句,关于支付这一块,真的是辛苦后台人员了),这种的,他给设置成了我自己电脑本机ip地址了,改掉之后就好了

微信H5支付

微信还没成功,后台逻辑有问题,成功了会及时更新的

==============
不论是支付宝还是微信,搞支付之前一定要确认自己开发的项目属于哪一类支付
我现在这个项目是用webview框架嵌套vue开发的一个移动端买菜的应用,类似于叮咚买菜那种性质,刚开始搞支付,同事之前有搞过微信支付,把代码给过来了,但是那是公众号的开发,是微信内支付,弄得我纠结了好久,后来才确认要调用微信的H5支付方式,其实不论是支付宝还是微信的H5支付,前端要做的都很简单,支付宝之前已经讲过了,现在看微信的
文档链接如下
https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4

前端需要做的:
1,点击提交订单,把该传的参数都传过去
2,拿到返回的mweb_url进行跳转

let mweb_url = res.data.body.mweb_url;
window.location.href = mweb_url;
// window.location.replace = mweb_url;
// replace 报错了,,TypeError: Cannot assign to read only property 'replace' of object '[object Location]'  Why???  

这里注意跳转不要用replace,会报错,啥原因嘛,现在不知道
至于重定向那个redirect_url,文档上有介绍那一堆,我现在还没实施,老板急着给客户看,所以我现在的流程是微信支付成功后点击完成按钮直接调到我的订单去了,其实按文档说的不应该这样的,之后再更新

2020-07–06-----------------------------------------------------更新

之前只发布了安卓的版本,支付也只测试了安卓机,安卓机器上没问题
这两天发布了个苹果的版本,提交订单调起支付失败了,才知道苹果机的支付跟安卓机的支付不一样,不过前端所要做的都一样,前端关于支付要做的就是上面所述,需要改动的都在后台设置那边