微信h5调试环境搭建

VConsole

手机网页的前端开发者调试面板, vConsole 传送门

1. 安装

   $ npm install vconsole
   or
   $ yarn add vconsole
   
   

2. 使用

   vue react 项目可以直接在入口文件 引入，然后创建实例

   import VConsole from 'vconsole';
   const vConsole = new VConsole();
   // 或者使用 options 选项初始化
   const vConsole = new VConsole({ maxLogNumber: 1000 });
   
   // 接下来即可照常使用 `console` 等方法
   console.log('Hello world');
   
   // 结束调试后，可移除掉
   

3. 网页直接引入脚本使用

   <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
   <script>
     // VConsole 默认会挂载到 `window.VConsole` 上
     var vConsole = new window.VConsole();
   </script>
   

4. 这时候就可以在项目中看到vconsole浮窗

内网映射

我们在对微信api调试的时候，需要讲自己本地的网络映射到公网，然后微信就可以公网调用的到我们的本地网络(内网映射)，

从而提高开发效率，是用的工具 俗称魔法隧道，常用的工具有如下几种

1. ngrok

   免费开源的的内网映射工具。特点是免费，安装方便，使用方便，缺点是每次重启，url都会改变

   # 全局安装
   npm install ngrok -g
   
   # 使用 创建不同的映射
   ngrok http 80                    # secure public URL for port 80 web server
   ngrok http -subdomain=baz 8080   # port 8080 available at baz.ngrok.io
   ngrok http foo.dev:80            # tunnel to host:port instead of localhost
   ngrok http https://localhost     # expose a local https server
   ngrok tcp 22                     # tunnel arbitrary TCP traffic to port 22
   ngrok tls -hostname=foo.com 443  # TLS traffic for foo.com to port 443
   ngrok start foo bar baz          # start tunnels from the configuration file
   
   

2. 魔法隧道

   另外个工具，按流量收费，速度比较快。网址在微信受信任

   魔法隧道

   # 安装 需要下载客户端
   http://www.mofasuidao.cn/rest/page/download # 客户端下载地址
   
   # 使用 参考官网即可
   http://www.mofasuidao.cn/rest/page/help
   

3. 哲西云

   可以微信调试，按照隧道，带宽收费，收费略高(仅推荐调试微信支付的时候使用)

   # 1. 进入官网，微信扫码登录
   https://cloud.zhexi.tech/auth/mpqr
   # 2. 下载客户端
   https://cloud.zhexi.tech/xd/device/terminal # 点击安装客户端，选择对应的系统版本
   # 3.创建第一条隧道
   https://cloud.zhexi.tech/xd/remote/mapping # 默认可以开通一条隧道，（有时间限制，延期需要续费）
   # 4. 隧道内容编辑
   	# 隧道名称： 这个可以按照自己的习惯，仅显示
   	# 隧道授权: 不同的内容，收费不同， 默认不做改动，需要的话后期扩容
   	# 客户端： 当前电脑安装的客户端
   	# 内网url： 我们的本地开发地址，如： 127.0.0.1:3333
   	
   

Vue 项目使用魔法队隧道访问

默认开发服务器会对host进行检查，当我们直接使用魔法隧道访问，会提示 invalid host header，

这时候我们需要修改devServer配置

// 在vue.config.js中配置 devserver， 新增disableHostCheck配置项，设置为false
module.exports = {
	devServer: {
    disableHostCheck: true, // 关闭host 检查，保证魔法隧道可以访问
    port: 3333, // 配置端口号 保证每次启动在同一个端口
  }
}

// 重启项目，然后用隧道访问项目

微信登录

微信登录代码快

1. getcode

   const appid = 'appid' // 你要开发的微信公众号appid
    /**
    * @desc 获取微信code
    */
   export const getWxCode = () => {
     // 拿到code后的返回地址
     const { origin, pathname } = location
     const url = `${origin}${pathname}`
     window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect` 
   }
   

2. isWx 判断是否在微信浏览器

   // 判断是不是微信浏览器
   export function isWeiXin(){
     var ua = window.navigator.userAgent.toLowerCase();
     if(ua.match(/MicroMessenger/i) == 'micromessenger'){
         return true;
     }else{
         return false;
     }
   }
   

支付

流程图如下

初始化 wxjdk

/**
 * @desc 加载微信jdk
 */
export const initWxJdk = () => {
  let wxJdkSrc = 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js'
  const script = document.createElement('script')
  script.src = wxJdkSrc
  document.body.append(script)

}

发起微信支付

/**
 * @desc 微信浏览器调起微信支付页面，输入密码，完成支付
 * @param { Object } data 服务器返回微信支付信息
 * @param { string | number } data.timeStamp 统一下单的时间戳
 * @param { string } data.nonceStr 随机字符串
 * @param { string } data.package 签名字符串
 * @param { string } data.paySign 微信签名
 */
wxPay(data) {
  let self = this
  // 初始化微信支付
  if (typeof WeixinJSBridge == 'undefined') {
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady)
  } else {
    onBridgeReady()
  }
  // 微信支付调用
  function onBridgeReady(){
    // eslint-disable-next-line no-undef
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
          "appId": appid,     //公众号名称，由商户传入     
          "timeStamp": `${data.timeStamp}`,         //时间戳，自1970年以来的秒数     
          "nonceStr": data.nonceStr, //随机串     
          "package": data.package,     
          "signType":"MD5",         //微信签名方式：     
          "paySign": data.paySign //微信签名 
        },
        res => {
          if(res.err_msg == "get_brand_wcpay_request:ok" ){
            // 使用以上方式判断前端返回,微信团队郑重提示
            self.$notify({
              type: 'success',
              message: '支付成功'
            })
            // 跳转支结果页面
            self.$router.push({
              path: '/order-result',
              query: data
            })
          } else{
            self.$notify({
              type: 'error',
              message: '支付失败'
            })
          }
    }); 
  }
}

支付宝支付

拿到支付宝返回的支付表单内容，然后传入该组件即可发起支付

<template>
  <div v-html="info">
  </div>
</template>

<script>
export default {
  props: {
    info: String
  },
  data() {
    return {}
  },
  watch: {
    info() {
      this.$nextTick(() => {
        document.querySelector('#alipaysubmit').submit()
      })
    }
  }
}
</script>

注意

1. 创建订单的接口是我们自己的后台的
2. 创建订单号就可以拿到订单号，我们在使用这个订单号去发起支付
3. 根据不同的环境，调用不同的下单接口(微信or支付宝)
4. 拿到下单结果
   1. 微信支付-> 将服务端返回的内容直接传入wxPay函数，发起支付
   2. 支付宝支付，拿到返回结果html内容，渲染，吊起支付宝或者支付宝网页支付
5. 拿到支付结果，将订单号作为传参传递到订单结果页
   1. 微信支付->等待函数执行完毕，跳转至订单结果页
   2. 支付宝支付->支付结束后会自动跳转值支付结果页(需要在后台配置，讲支付结果页的url给到后台即可)
   3. 从路由解析订单号，然后从后台查询支付结果(因为支付宝有大概五秒的延迟，这边需要做一个动画过渡，5秒后查询结果)