uni-app 公众号h5跳转微信小程序 使用微信标签wx-open-launch-weapp报错如下
uni-app 公众号h5跳转微信小程序 使用微信标签wx-open-launch-weapp报错如下
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win11 | HBuilderX |
产品分类：uniapp/H5
示例代码：
<wx-open-launch-weapp username="gh_4825d486c75b">
<script type="text/wxtag-template">
<style>
.text {
font-size: 30rpx;
}
</style>
<view class="text">测试跳转小程序</view>
</script>
</wx-open-launch-weapp>
运行就报错如下：
[plugin:vite:vue] Tags with side effect (<script> and <style>) are ignored in client component templates.
操作步骤：
<wx-open-launch-weapp username="gh_4825d486c75b">
<script type="text/wxtag-template">
<style>
.text {
font-size: 30rpx;
}
</style>
<view class="text">测试跳转小程序</view>
</script>
</wx-open-launch-weapp>
运行就报错如下：
[plugin:vite:vue] Tags with side effect (<script> and <style>) are ignored in client component templates.
预期结果：
<wx-open-launch-weapp username="gh_4825d486c75b">
<script type="text/wxtag-template">
<style>
.text {
font-size: 30rpx;
}
</style>
<view class="text">测试跳转小程序</view>
</script>
</wx-open-launch-weapp>
运行就报错如下：
[plugin:vite:vue] Tags with side effect (<script> and <style>) are ignored in client component templates.
实际结果：
<wx-open-launch-weapp username="gh_4825d486c75b">
<script type="text/wxtag-template">
<style>
.text {
font-size: 30rpx;
}
</style>
<view class="text">测试跳转小程序</view>
</script>
</wx-open-launch-weapp>
运行就报错如下：
[plugin:vite:vue] Tags with side effect (<script> and <style>) are ignored in client component templates.
2 回复
针对你在使用uni-app进行公众号H5页面跳转到微信小程序时遇到的wx-open-launch-weapp报错问题，这里提供一个可能的解决方案以及相关代码示例。
首先，确保你已经在微信公众平台配置了相关的小程序跳转规则，包括绑定公众号和小程序、设置小程序跳转路径等。
步骤一：检查HTML标签
确保你的HTML中正确使用了wx-open-launch-weapp标签。这个标签是微信提供的用于从H5页面跳转到小程序的标签。以下是一个基本的示例：
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxx" <!-- 替换为你的小程序原始ID -->
path="pages/index/index" <!-- 替换为你想要跳转的小程序页面路径 -->
href="https://example.com"> <!-- 这是一个占位链接，用户点击时实际会触发小程序跳转 -->
<script type="text/wxtag-template">
<style>.btn { padding: 10px 20px; background-color: #1AAD19; color: white; }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
步骤二：JavaScript处理
虽然wx-open-launch-weapp标签本身已经处理了大部分跳转逻辑，但在某些情况下，你可能还需要添加一些JavaScript代码来处理兼容性或错误处理。以下是一个简单的示例：
document.getElementById('launch-btn').addEventListener('error', function (e) {
console.error('小程序跳转失败', e);
// 可以在这里添加一些错误处理的逻辑，比如显示一个提示信息
alert('无法打开小程序，请确保您已在微信中打开此页面');
});
步骤三：检查报错信息
针对你提到的报错信息，具体错误类型可能有很多种，比如：
invalid username：小程序原始ID不正确。invalid path：小程序页面路径不正确。permission denied：公众号未绑定小程序或未开启跳转权限。
根据报错信息，检查相应的配置是否正确。
总结
以上是一个基本的从uni-app的H5页面跳转到微信小程序的实现方法。如果仍然遇到报错，请仔细检查报错信息，并参考微信官方文档进行排查。此外，确保你的微信客户端和微信公众平台的相关配置都是最新的，以避免因版本问题导致的兼容性问题。
