乐趣区

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

如果看了这个文章还是搞不定,那我就没方法了,曾经很具体了
退出移动版