在vue中使用wx-open-launch-weapp(h5转跳小程序), wx-open-subscribe(服务号订阅通知按钮)

首先:
wx-open-launch-weapp: 是已认证服务号, 小程序为非个人主体
wx-open-subscribe: 是已认证服务号

其次, 你需要判断当前页面是否在微信浏览器中

引用1.6版本的js

wx-open-launch-weapp微信文档

  **wx.js: 要在main.js中引用此文件**
  
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
    appId, // 必填，公众号的唯一标识
    timestamp, // 必填，生成签名的时间戳
    nonceStr, // 必填，生成签名的随机串
    signature, // 必填，签名
    jsApiList: ['wx-open-launch-weapp', 'wx-open-subscribe'], // 必填，需要使用的JS接口列表,
    openTagList: ['wx-open-launch-weapp', 'wx-open-subscribe'],
    fail(err) {
      console.log('config err', err);
    },
  });

  **main.js**
  // 引用此才会在.vue文件中不报错
  Vue.config.ignoredElements = ['wx-open-launch-weapp', 'wx-open-subscribe']
  
  **页面.vue**
  <template>
	  <wx-open-launch-weapp
	      id="launch-btn"
	      username="跳转的小程序原始id"
	      :path="小程序的路径"
	      style="display: inline-block;width: 100%"
	  >
	      <script type="text/wxtag-template">
	          <style>
	              .mini-btn {
	                  display: inline-block;
	                  width: 100%;
	                  text-align: center;
	                  border-top: 1px solid #f9f9f9;
	                  padding-top: 10px;
	                  color: #333;
	                  font-weight: bold;
	              }
	          </style>
	          <p class="mini-btn">点击授权转跳</p>
	      </script>
	  </wx-open-launch-weapp>
	  
	  <wx-open-subscribe template="这里需要自己服务号对应的templateid" id="subscribe-btn">
		  <script type="text/wxtag-template" slot="style">
		    <style>
		      .subscribe-btn {
		        color: #333;
		        background-color: #fff;
		        width: 100%;
		        line-height: 30px;
		      }
		    </style>
		  </script>
		  <script type="text/wxtag-template">
		    <span class="subscribe-btn">
		      点击进行消息订阅              
		    </span>
		  </script>
	  </wx-open-subscribe>
  </template>