web-view中H5如何拉起微信支付？

最近遇到一个需求，要把我正在开发的H5嵌入到某小程序中，所以我活来了，首先查阅资料得知，小程序中嵌入H5是无法拉起支付的，网上的做法是先让H5页面跳转到小程序这边，在小程序这边拉起微信支付。

小程序的开放能力还是相当可以的，提供了web-view这样一个组件，是一个打开网页的容器。

接着来看我项目的处理

首先H5需要拿到token票据才能进行接口访问，所以小程序指定跳转到H5指定的一个页面，在跳转的时候携带需要的参数，我这里是让小程序跳转到H5的index页面，这个页面我主要用来处理url参数，拿到url参数之后，调后端的接口，得到token。

这是获取url参数的代码：

这里需要判断一下H5运行的环境，因为我的项目不止是为了嵌入小程序开发的，H5有可能运行在微信浏览器和外部浏览器这些，这些的支付都是不一样的

这里引入了微信jssdk

引入的方式有很多种，可以查一下，我选的是npm安装 npm install weixin-js-sdk --save-dev

然后在需要用到的地方引入即可，我在index这个页面做H5运行环境判断，并且存到localStoragez中

引入的代码

const wx = require("weixin-js-sdk");

if (ua.match(/MicroMessenger/i) == "micromessenger") {
      //在微信内
      wx.miniProgram.getEnv((res) => {
        if (res.miniprogram) {
          //在小程序里
          localStorage.setItem("environment", "weixin");
        } else {
          //在微信浏览器内
          localStorage.setItem("environment", "wxBrowser");
        }
      });
    } else {
      //不在微信
      localStorage.setItem("environment", "outBrowser");
    }

然后在点击购买的时候，调用下单接口，拿到要下单接口返回的参数，这些参数都是要拼在url后面，跳转回小程序的时候带过去的。

 至此，H5 这边的工作已经做完了，剩下的是小程序那边的事情了。