h5页面跳转小程序教程(只限在公众号里面使用的h5页面)

之所以写这个文章记录下，是因为官方文档写的太模棱两可了，总有些东西你会不知道怎么弄，废话不多说，直接看下面vue代码教程

<template>
<div>
    <div v-if="isShowWeapp">
        <wx-open-launch-weapp id="launch-btn"
        username="gh_ea5b485762d6"
        path="pages/index/index.html">
            <script type="text/wxtag-template">
                <style>.wx-btn { display: flex;align-items: center;background-color:red;color:#fff; }</style>
                <button class="wx-btn">跳转小程序</button>
            </script>
        </wx-open-launch-weapp>
    </div>
</div>
</template>
<script>
export default {
    data () {
        return {
        isShowWeapp: false//是否显示小程序按钮
        }
    },
    created () {
        this.getConfig();
    },
    methods: {
    getConfig () {
                    this.$api.GetJSSDKWx(window.location.href).then(res => {
                let config = res.data;
                wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
                appId: config.appId, // 必填，公众号的唯一标识
                timestamp: config.timestamp, // 必填，生成签名的时间戳
                nonceStr: config.nonceStr, // 必填，生成签名的随机串
                signature: config.signature,// 必填，签名
                jsApiList: ["scanQRCode"], // 必填，需要使用的JS接口列表
                openTagList: ["wx-open-launch-weapp"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
                });

                wx.ready(() => {
                    this.isShowWeapp = true;
                });
            });
        }
    }
}
</script>