h5跳小程序（uniapp，vue）wx-open-launch-weapp

<template>
    <div style="width: 100%; height:160rpx;">
        <wx-open-launch-weapp
		username="gh_xxxxxxxxx"          
		path="/pages/index/index.html"
		>       
		<script type="text/wxtag-template"> 
			<view style="font-size: 40px;">去查看(跳转小程序)</view>      
			</script>     
		</wx-open-launch-weapp> 
    </div>
</template>

<script>
import Api from '@/api/test';
export default {
	name:"tiao",
    methods: {
        wxmini(){
        	// 获取密钥
            Api.getSignPackage({url:window.location.href}).then(res=>{
                wx.config({ // eslint-disable-line
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
                    appId:res.data.data.appId, // 必填，公众号的唯一标识
                    timestamp:res.data.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr:res.data.data.nonceStr, // 必填，生成签名的随机串
                    signature:res.data.data.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>

效果为

注：此处真机才显示按钮，且安卓正常显示

iOS很多新版本不显示 其中有两种方法 

1，一般刷新页面就可以显示（有效 但项目不一定允许）

2，用v-html渲染

注意</script>在其中要用‘\’进行转义  写为： <\/script>  

<template>
    <div style="width: 100%;" v-html="html">
         
    </div>
</template>

<script>
import Api from '@/api/test';
export default {
	data() {
		return {
			html:''
		}
	},
	name:"tiao",
    methods: {
        wxmini(){
        	// 获取密钥
            Api.getSignPackage({url:window.location.href}).then(res=>{
                wx.config({ // eslint-disable-line
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
                    appId:res.data.data.appId, // 必填，公众号的唯一标识
                    timestamp:res.data.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr:res.data.data.nonceStr, // 必填，生成签名的随机串
                    signature:res.data.data.signature,// 必填，签名
                    jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的JS接口列表
                    openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
                });
                /* eslint-disable */
                wx.ready(function () {
                    console.log('ready')
                });
            })
        }
    },
    created() {
        this.html=
        `<wx-open-launch-weapp
          username="gh_XXXXXXXXXX"          
          path="/pages/index/index.html"
          >       
          <script type="text/wxtag-template"> 
            <view style="font-size: 40px;">去查看(跳转小程序)</view>      
            <\/script>     
          </wx-open-launch-weapp>
          `
        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>