vue使用wx-open-launch-weapp

此功能的开放对象：

1. 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。（二级域名也需要配）
2. 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

如果你的代码遇到页面不出现按钮的问题

1. 查看 openTagList 是否为 [‘wx-open-launch-weapp’] ，官网默认给的wx-open-launch-app
2. 官网例子中template标签要替换为 <script type="text/wxtag-template"><script>
3. path可以不传，但是传一定要加html后缀

页面报错找不到模板wx-open-launch-weapp,可以在main.js配置

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

下面是实测可用代码，替换接口就ok。 username替换成你的小程序原始ID

<template>
    <div style="width: 100%; height: 100%;">
        按钮按钮：
        <wx-open-launch-weapp          
            username="gh_"          
            path="/pages/index/index.html"
        >       
        <script type="text/wxtag-template">         
            <style>.btn { padding: 12px}</style>
            <button class="btn">跳转小程序</button>      
            </script>     
        </wx-open-launch-weapp> 
    </div>
</template>

<script>
// 通过接口从后端获取加密数据，自定义的文件
import {openWxmini} from '@/assets/js/api.js'
export default {
    methods: {
        wxmini(){
        	// 获取密钥
            openWxmini({url:window.location.href}).then(res=>{
                let {appId,nonceStr,signature,timestamp} = res.result
                wx.config({ // eslint-disable-line
                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
                    appId, // 必填，公众号的唯一标识
                    timestamp, // 必填，生成签名的时间戳
                    nonceStr, // 必填，生成签名的随机串
                    signature,// 必填，签名
                    jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的JS接口列表
                    openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
                });
                /* eslint-disable */
                wx.ready(function () {
                    console.log('ready')
                });
            })
        }
    },
    created() {
        const oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
        oScript.onload = this.wxmini
        document.body.appendChild(oScript);
    },
}
</script>

<style>

</style>

父元素 display:none;的情况下，会出现不渲染的bug。在wx-open-launch-weapp 标签上加 style=“display: inline-block;border: none;”

官方文档