评论

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  
点赞 0
收藏
评论

42 个评论

  • huiwang
    huiwang
    2023-07-06

    同问,按钮不显示,wx.error errMsg"config:invalid signature"

    2023-07-06
    赞同 1
    回复 2
    • 陈 住气
      陈 住气
      2023-08-24
      有解决吗
      2023-08-24
      回复
    • 人间冰阔落
      人间冰阔落
      2023-10-30
      +1  请问这个问题解决了吗
      2023-10-30
      回复
  • Mr.Cai
    Mr.Cai
    2021-07-13

    path=“pages/index/index.html?user=123&action=abc” 动态怎么传值呀?

    2021-07-13
    赞同 1
    回复 5
    • 予星河
      予星河
      2021-07-27
      同问,请问解决了吗
      2021-07-27
      1
      回复
    • 小V书写
      小V书写
      2021-07-27
      暂时没有试过动态传值,vue里面可以赋值
      2021-07-27
      回复
    • 予星河
      予星河
      2021-07-27回复小V书写
      我在H5里面通过开放标签跳转小程序,第一次进去有值带过去,第二次标签上有值,但是跳转过去提示没有值。请问遇到过吗
      2021-07-27
      回复
    • 小V书写
      小V书写
      2021-07-30
      暂时没有遇到过这种问题,是不是赋值有一定问题?
      2021-07-30
      回复
    • 皮皮平
      皮皮平
      2022-03-01
      2022-03-01
      回复
  • .
    .
    2021-02-24

    你好。请问签名时而成功,时而失败这个问题见过嘛?

    errMsg"config:fail,Error: 系统错误,错误码:63002,invalid signature [20210224 15:37:31][]"

    2021-02-24
    赞同 1
    回复 4
    • 小V书写
      小V书写
      2021-02-24
      access_token是不是失效了
      2021-02-24
      回复
    • Mike
      Mike
      2021-03-30
      生成签名的时候 url  需要和当前页面一致
      2021-03-30
      回复
    • 大蒜头
      大蒜头
      2021-04-29
      你好,我这边ios可以唤醒,android不行
      2021-04-29
      回复
    • 假装没有昵称
      假装没有昵称
      2021-09-07回复大蒜头
      你好,请问android解决了吗,我现在也遇到这个问题
      2021-09-07
      回复
  • 小V书写
    小V书写
    12-13

    最好私信我,哈哈哈!不过评论的话别人也能看到。

    12-13
    赞同
    回复
  • 天龙
    天龙
    10-28

    请问 H5 跳转到小程序

    使用开发语言是React

    window.wx.config({

    debug: true,

    appId: wxData.appId,

    timestamp: wxData.timestamp,

    nonceStr: wxData.nonceStr,

    signature: wxData.signature,

    jsApiList: ['wx-open-launch-weapp' ],

    openTagList: ['wx-open-launch-weapp']

    });

    });

    使用什么方法进行 调起微信小程序呢 ?

    10-28
    赞同
    回复 1
    • 小V书写
      小V书写
      11-05
      解决了吗
      11-05
      回复
  • jiang
    jiang
    2023-12-12

    初始化sdk 已经ok ,但是openTagList 打印的是[ ],这个是神原因导致的呢

    2023-12-12
    赞同
    回复
  • DYUe
    DYUe
    2023-07-27

    大佬,可以帮忙看看我的问题吗?卡了一天了,不知道问题出在哪

    加载小程序信息超时,无法启动(4,-10005),怎么解决?? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/00044e991541588e61103661561000

    2023-07-27
    赞同
    回复
  • 5
    5
    2023-05-11

    求指点,没有用

    2023-05-11
    赞同
    回复 3
    • 小V书写
      小V书写
      2023-05-21
      调用接口的权限,能获取到吗
      2023-05-21
      回复
    • 杰姆小生
      杰姆小生
      2023-06-27回复小V书写
      请问你这个解决了?
      2023-06-27
      回复
    • 小V书写
      小V书写
      2023-07-07回复杰姆小生
      解决了
      2023-07-07
      回复
  • 左手边
    左手边
    2023-04-06

    最近改了什么,怎么全部都不显示了

    2023-04-06
    赞同
    回复 2
    • 小V书写
      小V书写
      2023-04-12
      可以直接附上代码片段
      2023-04-12
      回复
    • W.QQ
      W.QQ
      2023-06-12回复小V书写
      我也是,之前都正常使用,突然就不显示了,也跳转不了了,之前代码都没动过。
      2023-06-12
      回复
  • 辞
    2023-03-01

    请求的接口必须是https吗

    2023-03-01
    赞同
    回复 1
    • 小V书写
      小V书写
      2023-03-06
      必须是
      2023-03-06
      回复

正在加载...

登录 后发表内容