微信 h5页面 跳转微信小程序 wx-open-launch-weapp注意事项
请确保小程序是已认证的非个人主体的小程序,已认证的服务号“JS接口安全域名” 已经绑定。
问题:按照官方文档写的样式没有出现
文档用例:
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index.html?user=123&action=abc"
>
<template>
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
使用内联样式可以解决这个问题。
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index.html?user=123&action=abc"
style="内联样式"
>
<template>
<button class="btn" style="内联样式">打开小程序</button>
</template>
</wx-open-launch-weapp>
问题:静态h5页面好用,使用vue就没有效果。
修改 标签。更换为 <script type="text/wxtag-template">
<script type="text/wxtag-template">
<button class="btn">打开小程序</button>
</script>
问题:按钮真机不出现 微信开发者工具里面出现点击没有作用
-
检查config注入是否成功
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: [], // 必填,需要使用的JS接口列表 openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app'] });
-
注意:所有必填项必须填写,否则无效
如果你的config注入成功,
debug: true,
时,会有弹窗提示注入成功。 -
检查所有必填项
jsApiList
也为必填项,不能因为没有用到这项就不填写**,要在微信提供的jsApiList
所有可选项的表里面填一个,这个方法需要使用。在wx.ready{}
中调用一下** -
openTagList
这个值要是wx-open-launch-weapp
不是wx-open-launch-app
。wx-open-launch-app
是app
里面的用法。 -
样式中的大小最好使用
px
单位。 -
在
jsApiList
中选择的方法要在这里使用下,结果不重要,没有使用可能会导致引入不正确。wx.ready(function () { // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中 });
确定 config注入的时候 所有必填项的值都正确。
appId
- 是 以
wx
- 开头的值。
-
跳转的页面需要有后缀
html
-
不要使用
pc
的浏览器查看页面的效果,请用微信开发者工具查看,否则可能会有网络错误。出现
config:invalid url domain
错误的时候,放置在统一域名下运行。
问题:按钮不出现。
- 要在微信浏览器中打开,不要再
pc
的浏览器中打开。 - 检查
config
是否注入成功。 - 把页面放到小程序相同域名下。
根据手机微信页面弹出的错误提示进行查询。