解决企业微信内嵌H5页面导航栏返回上一级是空白页面问题

在项目中,产品要求返回上一级不能空白页,可以是工作台,所以要引入企业微信的返回按钮的用法,以下是详细步骤:

1.引入企业微信的版本内容

<script src="https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js"></script>

在public底下的index.html底下引入的 

2.获取wx签名(这步骤是必须得)

/**
 * 获取wx签名
 **/
export function getWxJsApi(data) {
    return request({
        url: '/js-sdk',
        method: 'post',
        data
    })
}

3,把接口引入页面使用,就平时正常的引用就行

import {getWxJsApi} from "@/api/arrives";//@/api/arrives接口文档名

(我是在mounted中写的)

 let url = location.href
    getWxJsApi({url}).then(res =>{
      wx.config({
        beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '', // 必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用
        timestamp: '', // 必填，生成签名的时间戳
        nonceStr: '', // 必填，生成签名的随机串
        signature: '',// 必填，签名，见 附录-JS-SDK使用权限签名算法
        jsApiList: [ 'onHistoryBack',] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
      });
      wx.ready(() =>{
        wx.onHistoryBack(function(){
          console.log('用户点击了返回按钮');
          wx.closeWindow();
        });
      })
    })

到此就是直接返回工作台了