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

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