vue使用wx-open-launch-weapp

官方文件

<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;”