<wx-open-launch-weapp> 失效不显示问题(已解决)

  之前有在做微信浏览器中的跳转小程序功能,碰到了标签不显示、失效、无法获取标签权限的问题

获取标签权限的前置条件:

1.公众号必须是服务号

2.h5访问地址必须跟服务号绑定

let response = await getWxConfig(appName.baseUrl) // baseUrl为h5进行wx.config时地址
				let data = response;
wx.config({
					debug: false,
					appId: data.appId,
					timestamp: data.timestamp,
					nonceStr: data.nonceStr,
					signature: data.signature,
					jsApiList: ['chooseImage', 'previewImage', 'chooseWXPay'], // 这个api顺序也会影响是否能拿到开放标签权限
					openTagList: ['wx-open-launch-weapp']
				});

以下是页面结构

<wx-open-launch-weapp id="launch-btn" :appid="appName.appid"
						style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: inline-block; border: none;"
						@ready='ready()' v-show="showBtn">
						<script type="text/wxtag-template">
							<style>.btn {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             opacity: 0;
          }</style>
             <button class="btn"></button>
           </script>
					</wx-open-launch-weapp>

以下是成功获取权限的微信开发者工具日志

如果还是无法解决问题我会回复

  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
在 Vue 中使用 `<wx-open-launch-weapp>` 组件时,你需要按照以下步骤进行操作: 1. 首先,确保已经在项目中引入了微信小程序的相关 SDK。 2. 在 Vue 组件中,可以直接使用 `wx-open-launch-weapp` 标签来包裹需要触发打开小程序的内容。 ```html <template> <div> <wx-open-launch-weapp :appid="appId" :path="path" :extra-data="extraData"> <!-- 包裹需要触发打开小程序的内容 --> <button>打开小程序</button> </wx-open-launch-weapp> </div> </template> ``` 3. 在 Vue 组件的 `data` 中定义必要的参数,例如 `appId`、`path` 和 `extraData`: ```javascript <script> export default { data() { return { appId: 'yourAppId', // 小程序 AppID path: 'pages/index', // 小程序页面路径 extraData: {} // 打开小程序时传递的额外参数 } } } </script> ``` 4. 根据实际需求,可以对 `<wx-open-launch-weapp>` 组件进行自定义配置,例如可以添加 `bindsuccess` 和 `bindfail` 事件来处理打开小程序成功和失败的情况。 ```html <wx-open-launch-weapp :appid="appId" :path="path" :extra-data="extraData" @bindsuccess="onLaunchSuccess" @bindfail="onLaunchFail" > <!-- 包裹需要触发打开小程序的内容 --> <button>打开小程序</button> </wx-open-launch-weapp> ``` ```javascript <script> export default { // 其他代码... methods: { onLaunchSuccess() { // 打开小程序成功时的回调 console.log('小程序打开成功'); }, onLaunchFail(e) { // 打开小程序失败时的回调 console.log('小程序打开失败', e); } } } </script> ``` 以上是在 Vue 中使用 `<wx-open-launch-weapp>` 组件的基本方法,根据自己的实际需求进行配置即可。注意,还需要在微信小程序后台配置好相应的参数,例如 AppID 和页面路径等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值