微信h5调用支付宝支付\使用地图全流程

因业务需要，需要开发了一个h5页面，能在微信里打开调用地图导航，以及可以用支付宝支付。中间踩了好多雷，小小的记录一下。

h5发起支付宝支付

h5中调用支付宝的核心代码如下：（我i这个对于支付验签等的处理全部是由后端接口进行处理的，前端只需要接收后端传递的一个form即可）

let divForm = document.getElementsByTagName("divform");
                if (divForm.length) {
                  document.body.removeChild(divForm[0]);
                }
                this.html = res.data;
                var form = res.data;
                const div = document.createElement("divform");
                div.innerHTML = form; //此处form就是后台返回接收到的数据
                document.body.appendChild(div);
                // document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
                document.forms[0].submit();

 此时这里就可以正常调用支付宝发起支付。

但是在微信中发起支付跳转时，会有一个很不美观的长串链接，需要手工复制到浏览器打开，体验很不好，于是查阅了支付宝文档，有一个处理的方法。链接传送门：https://opendocs.alipay.com/open/203/105285

下载链接中的文件，将ap.js和payhtm文件复制到本地项目里，我是复制到这个下面才有效果。放在这里不需要做什么引用就可以在任意地方进行调用了，主要会用到_AP一个方法。

 

因为这个h5不仅仅是在微信中使用，浏览器端也会用到，所以在处理时根据是否在微信中做了判断。

if (this.isweixin) {
                //微信浏览器中需要加个中间页跳转处理
                this.getPayMask(res.data);
              } else {
//不是在微信中，直接处理接口返回的数据，res.data即为接口返回的数据
                let divForm = document.getElementsByTagName("divform");
                if (divForm.length) {
                  document.body.removeChild(divForm[0]);
                }
                this.html = res.data;
                var form = res.data;
                const div = document.createElement("divform");
                div.innerHTML = form; //此处form就是后台返回接收到的数据
                document.body.appendChild(div);
                // document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
                document.forms[0].submit();
              }



 /**判断是不是在微信打开 */
    isWeixin() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.isweixin = true;
      } else {
        this.isweixin = false;
      }
      console.log(this.isweixin)
    },

如果是在微信中，则进入getPayMask方法。上面说的引入的两个文件此时就有用啦，因为下面的_AP.pay方法就是调用的ap.js中的

/**微信浏览器的跳转美观处理 */
    getPayMask(data) {
      let divform = document.getElementsByTagName("divform");
      if (divform.length) {
         document.body.removeChild(divform[0]);
      }
      const div = document.createElement("divform");
      div.innerHTML = data;
      document.body.appendChild(div);
      var queryParam = "";
      Array.prototype.slice
        .call(document.querySelectorAll("input[type=hidden]"))
        .forEach(function(ele) {
          queryParam += "&" + ele.name + "=" + encodeURIComponent(ele.value);
        });

      var gotoUrl =
        document.querySelector("form").getAttribute("action") +
        queryParam;
      _AP.pay(gotoUrl);
    },

 

---

 我先歇会，搬砖之后再更新。