评论

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-08-07

    有没有试过把<button class=“btn”>打开测试小程序</button>这个地方换成动态数据,比如换成图片,图片地址是变量传入的,比如

    <wx-open-launch-weapp id="launch-btn" username="gh_*" path="/pages/index/index.html">
      <script type="text/wxtag-template">
      	<style>.img { width: 100%; height: 107.5px; }</style>
               <img :src="testImg" class="img"/>
       </script>
    </wx-open-launch-weapp>
    
    2021-08-07
    赞同
    回复
  • 笑该动人
    笑该动人
    2021-07-31

    你好,请问手机浏览器跳转打开小程序功能是怎么实现的呢?需要特殊配置吗?我的手机微信客户端现在能打开了,但是网页还是不行

    2021-07-31
    赞同
    回复 5
    • 小V书写
      小V书写
      2021-08-02
      是不是没有看文档呀
      2021-08-02
      回复
    • 笑该动人
      笑该动人
      2021-08-02回复小V书写
      我确实是按照文档上去写的,该引入的sdk也引入了,但是浏览器中H5没反应呢,引入的sdk是这样的
      2021-08-02
      回复
    • 笑该动人
      笑该动人
      2021-08-02回复小V书写
      外部h5跳转小程序的话是通过云开发托管的网页去实现吗
      2021-08-02
      回复
    • 小V书写
      小V书写
      2021-08-02
      不是
      2021-08-02
      回复
    • 笑该动人
      笑该动人
      2021-08-02回复小V书写
      用 URL Scheme吗?
      2021-08-02
      回复
  • 雨天
    雨天
    2021-07-30

    大佬,config一直invalid signature,签名有问题,是啥原因。。。按照官方的测试工具返回的签名跟自己后端返回是一样的,按官方文档的顺序检查下来好像也没什么问题,是还有哪些小细节需要注意的吗?

    2021-07-30
    赞同
    回复 1
    • 小V书写
      小V书写
      2021-08-02
      根据文档中的php接口方法写写试试。接口应该是有问题
      2021-08-02
      回复
  • 笑该动人
    笑该动人
    2021-07-30

    请问在原生html中使用<wx-open-launch-app>后,按钮样式都不显示是什么原因啊

    2021-07-30
    赞同
    回复 1
    • 小V书写
      小V书写
      2021-07-30
      跟文档中的坑一一排查一下
      2021-07-30
      回复
  • 胖里个胖
    胖里个胖
    2021-07-27

    想问下,这个用ios/andriod项目中的webview加载打开,可跳转到小程序嘛?

    2021-07-27
    赞同
    回复 1
    • 小V书写
      小V书写
      2021-07-27
      可以的
      2021-07-27
      回复
  • 七月
    七月
    2021-06-09

    大佬,直接打开h5可以显示跳转小程序按钮,现在把h5嵌入小程序,通过小程序分享出去的,跳转h5的按钮不显示了,是怎么回事

    2021-06-09
    赞同
    回复 3
    • 小V书写
      小V书写
      2021-07-13
      解决了吗?没有解决的话,排查一下权限或样式问题
      2021-07-13
      回复
    • 小丫
      小丫
      2021-08-02
      请问解决了吗?
      2021-08-02
      回复
    • 小丫
      小丫
      2021-08-02回复小V书写
      权限或样式是什么问题
      2021-08-02
      回复
  • smileLife
    smileLife
    2021-05-11

    你这个直接在手机浏览器里可以实现打开小程序吗?

    2021-05-11
    赞同
    回复 8
    • 请叫我小艺艺
      请叫我小艺艺
      2021-06-01
      同问
      2021-06-01
      回复
    • 小V书写
      小V书写
      2021-06-24
      可以的
      2021-06-24
      回复
    • 小V书写
      小V书写
      2021-06-24回复请叫我小艺艺
      可以的
      2021-06-24
      回复
    • 隶书
      隶书
      2021-07-22回复小V书写
      楼主,想问一下“已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序”  这句,我理解必须是公众号里的h5才能跳小程序,外部浏览器的h5也能打开吗?
      2021-07-22
      回复
    • 小V书写
      小V书写
      2021-07-24回复隶书
      外部也可以,需要嵌入微信官方的SDk
      2021-07-24
      回复
    查看更多(3)
  • 1234
    1234
    2021-05-11

    有一部分手机不显示按钮是什么原因

    2021-05-11
    赞同
    回复 3
    • 小V书写
      小V书写
      2021-05-27
      标签权限有没有获取成功
      2021-05-27
      回复
    • 2021-06-08
      这个我遇到过 ,安卓正常,ios不正常,主要是用来计算签名的url不对
      2021-06-08
      回复
    • 小V书写
      小V书写
      2021-07-30
      解决了吗
      2021-07-30
      回复
  • 123
    123
    2021-04-28

    大佬们我这个行吗

    2021-04-28
    赞同
    回复 1
    • 小V书写
      小V书写
      2021-05-07
      不行
      2021-05-07
      回复
  • THE LIFE
    THE LIFE
    2021-04-23

    小程序那边是不是直接在onload生命周期拿到参数,就是onLoad(options)的options是参数组成的对象呢?

    2021-04-23
    赞同
    回复 1
    • 小V书写
      小V书写
      2021-05-07
      2021-05-07
      回复

正在加载...

登录 后发表内容