微信H5跳转（Vue）

微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4

一、绑定域名

注意：
· 请确保小程序是已认证的非个人主体的小程序，或者已认证的服务号
· “JS接口安全域名” 已经绑定（登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”）

二、安装“weixin-js-sdk”依赖（版本1.6.0）

npm install weixin-js-sdk

三、 vue项目需要在main.js加上

全局注册：Vue.config.ignoredElements = ['wx-open-launch-weapp']

四、通过config接口注入权限验证配置

需要后台开发人员配合

wx.config({
   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
   appId: this.signatureData.appId, // 必填，公众号的唯一标识
   timestamp: this.signatureData.timestamp, // 必填，生成签名的时间戳
   nonceStr: this.signatureData.noncestr, // 必填，生成签名的随机串
   signature: this.signatureData.signature, // 必填，签名
   jsApiList: [], // 必填，需要使用的JS接口列表 
   openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})
// 通过ready接口处理成功验证
wx.ready(function () {
   // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
})
// 通过error接口处理失败验证
wx.error(function (res) {
   // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
})

五、页面引入

在需要使用的vue文件中引入：import wx from 'weixin-js-sdk'，在控制台上打印出相关信息console.log(wx)，如果没有打印出来，说明微信JSSDK并没有引入，可以尝试var wx = require('weixin-js-sdk')

<wx-open-launch-weapp id="launch-btn" :username="username" path="pages/tabBar/index/index.html" @error="handleErrorFn" @launch="handleLaunchFn">
    <script type="text/wxtag-template">
        <style>.btn { height: 33px; font-weight: bold; margin-top: 35px; }</style>
        <button class="btn">点击返回小程序</button>
    </script>
</wx-open-launch-weapp>

注意：
1、<template></template>和<script type="text/wxtag-template"></script>的区别，vue中需要使用script标签代替template插槽，html中使用template，在Vue中使用template按钮没有显示。
2、username要填写跳转的小程序原始id，即小程序对应的以gh_开头的id：gh_xxxxxxx

遇到的问题：

1、invalid signature

2、config:invalid url domain

检查“JS接口安全域名”是否配置好，appId是公众号的appId，必填项一定要填，同时让后台开发人员也检查一下。

浏览器跳转（非微信浏览器）

微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html

通过URL Scheme打开小程序

window.location.href = 'weixin://dl/business/?t=xxxxxxxxx'

如何获取URL Scheme地址？

登录“微信公众平台”，“工具”-“生成URL Scheme”，可以直接生成，分永久有效和到期时期失效两种。

小程序web-view跳转回小程序

微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

我这里是使用的Vue来做的，以下是Vue中实现的流程：

一、安装依赖：weixin-js-sdk

npm install weixin-js-sdk（版本1.6.0）

二、页面引入

import wx from 'weixin-js-sdk'

同样地，打印一下相关信息console.log(wx)，看看微信JSSDK是否成功引入。
接下来可以根据文档中提供的接口返回小程序：