1、在template中直接添加wx-open-launch-weapp标签只在Android中起作用,如下:
<template> <div class="container"> <a-row style="width: 100%;margin-bottom: 20px;"> <a-col> <wx-open-launch-weapp style="position: absolute;height: 90px;width: 100%;" id="launch-btn" username="gh_XXXXXXX" path="/pages/splash/index.html" @launch="handleLaunchFn" @error="handleErrorFn" > <script type="text/wxtag-template"> <div style="height: 90px;width: 100%;"></div> </script> </wx-open-launch-weapp> <img src="../../../assets/img.png"/> </a-col> </a-row> </div> </template>
由于样式不太好调,直接在外部添加一个img用于代替script中的div,其中 handleLaunchFn为调用西小程序成功后的回调方法,handleErrorFn为调用小程序失败后的回调
2、弥补在IOS中wx-open-launch-weapp标签不起作用
<template> <div class="container"> <a-row style="width: 100%;margin-bottom: 20px;"> <a-col> <div v-html="wxHtml"></div> <img src="../../../assets/img.png"/> </a-col> </a-row> </div> </template> <script> export default { name: 'Index', data() { return { wxHtml:'' } }, created() { this.getSigna() this.getUrl() }, methods: { getSigna() { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印 appId: 'appId', // 必填,公众号的唯一标识 timestamp: 'timestamp', // 必填,生成签名的时间戳 nonceStr: 'nonceStr', // 必填,生成签名的随机串 signature: 'signature',// 必填,签名 jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 必填,需要使用的JS接口列表 openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app'] }) }, //获取小程序地址 getUrl() { let script = document.createElement('script') script.type = 'text/wxtag-template' script.text = `<div style="width: 100%;height:90px;"></div>` this.wxHtml = `<wx-open-launch-weapp style="position: absolute;height: 90px;width: 100%;" id="launch-btn" username="gh_XXXXXXX" path="/pages/splash/index.html" >${script.outerHTML} </wx-open-launch-weapp>` this.$nextTick(() => { let launchButton = document.getElementById('launch-btn') launchButton.addEventListener('launch', function(e) { console.log('success', e.detail) }) launchButton.addEventListener('error', function(e) { console.log('fail', e.detail) }) }) } } } </script>
利用v-html实现IOS调起小程序