一、微信环境跳转小程序
第一步、下载并引入wx的SDK
npm install weixin-js-sdk --save
import wx from 'weixin-js-sdk';
第二步、初始化微信相关配置
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId, // 必填，公众号的唯一标识
timestamp, // 必填，生成签名的时间戳
nonceStr, // 必填，生成签名的随机串
signature, // 必填，签名
jsApiList: [], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 需要使用的开放标签列表
});
第三步、组件使用
<div class="container">
<van-button block>免费领取</van-button>
<wx-open-launch-weapp username="gh_f34f9c2b2b26" path="pages/index/index.html" :style="{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }">
<script type="text/wxtag-template">
<style>
.open-weapp-btn-mark{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%
opacity: 0;
}
</style>
<div class="open-weapp-btn-mark" />
</script>
</wx-open-launch-weapp>
</div>
注：
1、本组件是在vue使用的，这里有保存文件可能会报一个该组件没找到的错我们可以在main.js中引入
Vue.config.ignoredElements = ['wx-open-launch-weapp'];
2、解释一下为什么这样写这个组件，因为wx-open-launch-weapp组件设置样式非常恶心，我们可以自己单独写一个button或者一个元素，并在wx-open-launch-weapp组件内的插槽内添加一个蒙层类的dom，目的是让他的点击区域覆盖到你显示的元素，大家可以根据我这个例子自由改变样式
二、外部浏览器跳转小程序
这里我们可以使用微信的 URL Scheme
官方文档地址： developers.weixin.qq.com/miniprogram…
这里就是需要调用接口来生成对应的url
developers.weixin.qq.com/miniprogram…
基本参数：
"path": '/pages/index/index', // 小程序页面路径
"query": '?a=1&b=2' // 参数
生成的 URL Scheme 如下所示：
weixin://dl/business/?t= *TICKET*
最后我们可以使用window.location.href = weixin://dl/business/?t= *TICKET*来进行跳转
总结
好啦，这就是我工作中用到的两种跳转小程序的方式，第二种微信内部其实也可以使用，但官方回复说，第二种安卓机会有兼容问题，推荐使用第一种，具体使用哪一种各位可根据实际方式选用
