评论

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 个评论

  • 一条奋斗的咸鱼。
    一条奋斗的咸鱼。
    2021-04-20

    按照这个写了,wx.config也ok,然而按钮显示不出来,安卓机和ios都显示不了

    2021-04-20
    赞同
    回复 6
    • 小V书写
      小V书写
      2021-04-21
      能私信提供代码片段吗
      2021-04-21
      回复
    • 一条奋斗的咸鱼。
      一条奋斗的咸鱼。
      2021-04-22回复小V书写
      现在可以了,是微信版本和样式的问题,谢谢
      2021-04-22
      回复
    • 小V书写
      小V书写
      2021-05-07
      嗯嗯
      2021-05-07
      回复
    • smileLife
      smileLife
      2021-05-07回复小V书写
      提示这个错误
      2021-05-07
      回复
    • 小V书写
      小V书写
      2021-05-07回复smileLife
      这个标签权限接口不对,排查一下服务端接口吧
      2021-05-07
      回复
    查看更多(1)
  • 白白白
    白白白
    2021-03-11

    帮忙看下 我这是为什么啊  openTagList是空  点击无效果

    2021-03-11
    赞同
    回复 3
    • 何小舟
      何小舟
      2021-03-12
      同样的问题,请问解决了吗、。。。。
      2021-03-12
      回复
    • 小V书写
      小V书写
      2021-03-15
      获取的权限或者点击事件有问题
      2021-03-15
      回复
    • 丁锐
      丁锐
      2021-06-29
      请问解决了么
      2021-06-29
      回复
  • 🐯
    🐯
    2021-03-09

    Vue写的,安卓真机显示不出,ios真机可以,模拟器所有机型可以,有人遇过吗?

    2021-03-09
    赞同
    回复
  • 锦卓
    锦卓
    2021-03-09

    大佬有空看下我的帖子吗,老是说签名错误

    https://developers.weixin.qq.com/community/develop/doc/00024607aa0010011edb8770252000

    2021-03-09
    赞同
    回复 2
    • 小V书写
      小V书写
      2021-03-15
      检查一下access_token的有效性问题
      2021-03-15
      回复
    • 锦卓
      锦卓
      2021-03-17回复小V书写
      这个access_token肯定是没有问题的,之前做的微信卡券解密都没有问题
      2021-03-17
      回复
  • 灿.
    灿.
    2021-02-25

    wx-open-launch-weapp有时候会显示有时候会不显示,昨天没有显示,怎么搞都不行,后面重启后就可以了emmm。今天本来显示的,下午突然又不显示的,难搞

    2021-02-25
    赞同
    回复 3
    • 小V书写
      小V书写
      2021-03-01
      排查页面样式或标签权限问题
      2021-03-01
      回复
    • 灿.
      灿.
      2021-03-01回复小V书写
      看了下jsapi_ticket为空,估计是是太频繁了
      2021-03-01
      回复
    • 小V书写
      小V书写
      2021-03-16回复灿.
      嗯嗯
      2021-03-16
      回复
  • 刘盛
    刘盛
    2021-01-30

    https://developers.weixin.qq.com/community/develop/doc/0006ec98c84e10cfba8b20fbc56009?highLine=%25E7%259F%25AD%25E4%25BF%25A1

    看看这个 跳小程序(无代码版)教程


    2021-01-30
    赞同
    回复
  • 消逝之后℡₁₈₃llll₈₈₉₆
    消逝之后℡₁₈₃llll₈₈₉₆
    2021-01-25

    安卓iphone跳转都正常,就一个iphoneX手机不显示按钮可能是什么原因

    2021-01-25
    赞同
    回复 2
    • 小V书写
      小V书写
      2021-03-15
      样式兼容性考虑了没有
      2021-03-15
      回复
    • zsh
      zsh
      2021-09-26
      楼主解决了吗 是样式问题吗
      2021-09-26
      回复
  • 🍧
    🍧
    2021-01-11

    按照微信官网的模板写,按钮不显示,怎么回事

    2021-01-11
    赞同
    回复 2
    • 宏立
      宏立
      2021-01-27
      你解决了没有,我这边标签也没有显示,不起作用
      2021-01-27
      回复
    • 小V书写
      小V书写
      2021-03-16
      解决了吗
      2021-03-16
      回复
  • 妙才
    妙才
    2021-01-08

    大佬,帮我看下,我对照了你上面说的问题,我都ok,wx-open-launch-weapp还是不显示。这是我发的帖子:https://developers.weixin.qq.com/community/develop/doc/000aa8f19fcba8fb548b4f48d5bc00?fromCreate=0

    2021-01-08
    赞同
    回复 5
    • 🍧
      🍧
      2021-01-11
      我也遇到相同的问题,你解决了吗
      2021-01-11
      回复
    • 宏立
      宏立
      2021-01-27
      我也是不显示标签,怎么解决呢
      2021-01-27
      回复
    • 规则,
      规则,
      2021-02-22回复宏立
      手机才显示
      2021-02-22
      回复
    • 小V书写
      小V书写
      2021-03-16
      解决了吗
      2021-03-16
      回复
    • 小V书写
      小V书写
      2021-03-16回复宏立
      解决了吗
      2021-03-16
      回复
  • 逃
    2020-12-29

    你好 我是这样写的,开放标签的宽高都设置的很大 确保它可以把父元素全部填充满。

    在我们的测试服务号是可以正常点击并跳转的。

    现在线上服务号wx.config是ok的,但是这个按钮点击没有反应。

    问题可能是在哪里呢,你可以帮我看一下嘛

    2020-12-29
    赞同
    回复 2
    • 小V书写
      小V书写
      2020-12-30
      检查wx-open-launch-weapp的权限
      2020-12-30
      回复
    • 逃
      2021-03-01回复小V书写
      谢谢楼主的回复,已经解决了。原因是负责人发布的JSSDK版本是1.4
      2021-03-01
      回复

正在加载...

登录 后发表内容