h5页面跳转微信小程序。

一、先说页面表现，页面上有几点需要注意：

        1.标签写的时候，button按钮 一定要包在template标签里面。没有用vue的话，可以直接用<template>去包，如果是vue2用 <script type="text/wxtag-template"></script>去包，vue3用<div v-is="'script'" type="text/wxtag-template"></div>去包

        2.比较烦人的是样式，样式可能不显示或者不生效，需要真机测试一下，我这边写的时候呢，在<template>中用<style>标签包裹后出不来，所以改成行内样式。其次就是样式，页面中与布局和定位相关的样式，如position: fixed; top -100;等，尽量不要写在插槽模版的节点中，写在标签或其父节点上比如我加了 class="wx_open_box" 来写定位。

<div class="wx_open_box">
    <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index?user=123&action=abc">
        <script type="text/wxtag-template">
           <button class="btn" 
              style="width: 3rem;height: 3rem;border: none;background:rgba(0,0,0,0);-webkit-tap-highlight-color: transparent!important;">&nbsp;&nbsp;&nbsp;&nbsp;</button>
        </script>
    </wx-open-launch-weapp>
</div>
            
                        
              

页面到这里就OK了，然后就是js部分了。

1、首先就是支持跳转的JSSDK。引入js文件 要注意JSSDK版本需要1.6.0，直接在 index.html 中引用就成：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

 2. config配置（这个配置是H5部分配置的，并非要跳转到的小程序配置），调后端验签接口拿回来配置上就可以，这里要 注意到 验签接口是需要支持跳转小程序这个功能的 ，--- “ 因为我两个接口都通一个能跳一个不行，问了同事说这里是有讲究的”

wx.config({
  debug: true, // 调试的时候打开
  appId: '', // 后端的事情
  timestamp: '', // 后端的事情
  nonceStr: '', // 后端的事情
  signature: '',// 后端的事情
  jsApiList: [] ,// 需要的能力，比如拍照、获取信息等等，跳转小程序不需要
  openTagList:[] // 能够使用的标签，也就是HTML标签，只不过是微信自定义的。
});

 由于跳转小程序需要一个微信自定义的标签 wx-open-launch-weapp，所以上面的配置中的 openTagList 写上

openTagList:['wx-open-launch-weapp']

vue会显示wx-open-launch-weapp 报红，组件未注册。在main.js中加入

Vue.config.ignoredElements = ['wx-open-launch-weapp']

到这里停，一切都通之后页面就可以用了。pc端调试是没反应的，需要真机去试哈 ~