评论

H5跳转微信小程序成功案例

轻松解决H5跳转微信小程序的各种问题。

本人使用的VUE框架。
代码提示:
1、vue代码;
2、点击事件代码;
3、php代码;

遇到的大坑重要提示:
3、必须是认证服务号;
4、必须是服务号绑定的微信小程序
5、https接口获取服务号的access_token
6、如果你的https接口没有问题,但是你的wx-open-launch-weapp标签没有显示或者点击无反应。有以下原因:
1》、vue代码样式问题,可以根据我的代码写样式,最好写成一样的。
2》、在微信开发者工具没有反应的话,最好在微信客户端试试。
3》、JSSDK版本是1.6.0。
4》、如果框架写上还不行,可以试试在文件main.js中,写上:
Vue.config.ignoredElements = [‘wx-open-launch-app’, ‘wx-open-launch-weapp’];

新增项:
5》、在小程序后台配置上业务域名,域名必须有证书。代码放到服务器上,用业务域名访问。

官方链接参考:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

还是不行的话,下方留言或者私信我。

1、<template>
<div class=“cnt”>
<div>
<button @click=“onClickOpens”>新开页面跳转</button>
</div>
<div class=“test-position”>
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxxxx"
path=“pages/index/index.html?user=123&action=abc”
>
<script type=“text/wxtag-template”>
<style>.btn {width: 200px; height: 100px;}</style>
<button class=“btn”>打开测试小程序</button>
</script>
</wx-open-launch-weapp>
</div>
</div>
</template>

2、
onClickOpens() {
this.$axios({
method: “POST”,
url: “https://接口”,
data: {
url: window.location.href,
},
}).then(function (res) {
console.log(res);
if (res.status == 200) {
console.log(res.data.appid);
wx.config({
debug: true,
appId: res.data.appid,
timestamp: res.data.timestamp,
nonceStr: res.data.nonce_str,
signature: res.data.sign,
jsApiList: [“scanQRCode”],
openTagList: [“wx-open-launch-weapp”], // 可选,需要使用的开放标签列表,例如[‘wx-open-launch-weapp’]
});
wx.error(function (res) {
console.log(res);
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
}
});
},
3、

最后一次编辑于  2022-12-25  
点赞 1
收藏
评论

41 个评论

  • w
    w
    2023-02-21

    你好,我的完全不生效

    2023-02-21
    赞同
    回复 1
    • w
      w
      2023-02-21
      安卓手机能显示,苹果手机不显示,点击按钮完全没反应,页面不报错
      2023-02-21
      回复
  • 张宁
    张宁
    2022-06-24

    2022-06-24
    赞同
    回复
  • 张宁
    张宁
    2022-06-24

    麻烦看下就是按钮不显示的问题

    公众号JS域名都已经配置过了

    2022-06-24
    赞同
    回复 1
    • 昨夜一壶酒
      昨夜一壶酒
      2023-03-01
      公众号 是注册小程序的那个公众号,还是绑定H5的那个公众号?????
      2023-03-01
      回复
  • 磊
    2021-12-13

    楼主,跳转小程序按钮显示出来了,但是跳转时报了一个加载小程序超时,无法启动的错,这是咋回事

    2021-12-13
    赞同
    回复
  • Mr.Lee
    Mr.Lee
    2021-11-11

    非常详细的步骤,改代码->详细部署:小程序跳转:云开发之h5跳小程序

    2021-11-11
    赞同
    回复
  • sakura
    sakura
    2021-11-02

    博主您好,请问调用这个openTagList一定要用正式的服务号吗,我用测试号在wx.config成功后但是openTagList返回为空。

    


    2021-11-02
    赞同
    回复 1
    • 小V书写
      小V书写
      2021-11-02
      需要正式的
      2021-11-02
      回复
  • 瓶子
    瓶子
    2021-11-01

    楼主你好,请教下,我开发的 h5 页面,想要点击跳转第三方微信小程序,公司有接口返回 wx.config 中的配置值,但是这个接口是之前用来我们自己微信开发用的,它返回的配置值,改下 appId 后,能用来跳转第三方小程序吗?

    2021-11-01
    赞同
    回复 2
  • 盛
    2021-09-14

    都没问题,就是显示不出来


    2021-09-14
    赞同
    回复 1
    • 小V书写
      小V书写
      2021-11-02
      代码发出来看看
      2021-11-02
      回复
  • 2021-08-18

    为什么我在公众号设置了安全域名但是访问域名下的链接却提示不一致

    2021-08-18
    赞同
    回复 1
    • 蓝星
      蓝星
      2021-09-15
      解决了吗??
      2021-09-15
      回复
  • 徐宁宁
    徐宁宁
    2021-08-07

    我想请问下IOS不显示按钮怎么解决的


    2021-08-07
    赞同
    回复 2
    • 小V书写
      小V书写
      2021-11-02
      需要代码排查
      2021-11-02
      回复
    • 勠力同心
      勠力同心
      2021-12-03回复小V书写
      您能帮我看一下, 这个为啥不显示按钮的原因吗?
      2021-12-03
      回复

正在加载...

登录 后发表内容