关于小程序: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>

局部代码解释

1. this.$api.GetJSSDKWx 这个是申请接口获取jssdk配置信息不多说
2. username 这个获取的中央，看下图

3.path 这个是小程序的路由，比方小程序的路由是pages/index/index 那个path就是pages/index/index.html

如果看了这个文章还是搞不定，那我就没方法了，曾经很具体了