H5打开小程序

前期准备工作(必要)

1:首先拥有有个微信公众号并且配置相关信息（JS接口安全域名，网页授权域名）
2:需要微信小程序的appId
3:拥有H5网页程序

下载weixin-js-sdk

npm install weixin-js-sdk

插件引入使用功能性代码

import wx from 'weixin-js-sdk'

getWXUserSign({
    url: url
}).then(res => {
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.appId, // 必填，公众号的唯一标识
        timestamp: res.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.nonceStr, // 必填，生成签名的随机串
        signature: res.signature, // 必填，签名
        jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData',
            "onMenuShareAppMessage"
        ], // 必填，需要使用的JS接口列表

    })

           <wx-open-launch-weapp id="launch-btn" username="gh_开头的id" path="跳转路径" @launch="sucFun"
      @error="errFun">
                <script type="text/wxtag-template">
                   <style>.guideBtn{width: 347px;
                     height: 50px;
                     background-color: #ff6611;
                     border-radius: 2px;
                     color: #fff;
                     font-size: 16px;
                     line-height: 50px;
                     text-align: center;}</style>
                   <div class="guideBtn">跳转</div>
                 </script>
    
    </wx-open-launch-weapp>




//方法中调用初始化
wx.init()

剩下的样式自己调下就ok