评论

关于 React 中使用 wx-open-launch-weapp 唤起微信小程序

关于 React 中使用 wx-open-launch-weapp 唤起微信小程序的踩坑过程。

2021 年 5 月 28 日:

关于此内容,近期有更新。但由于微信社区帖子对 MD 支持度没有简书好,所以本文并没有更新了,请移步看以下两篇文章:

1、关于 React 中使用 wx-open-launch-weapp 唤起微信小程序
2、wx-open-launch-weapp 样式问题


最近在做一个中秋国庆活动项目,然后有一个需求是:在 H5 页面中唤起微信小程序。

在前段时间,微信 JSSDK 开放了该接口 <wx-open-launch-weapp> ,当然了仅限于微信浏览器内唤起小程序。👉 官方文档在这里。

此功能的开放对象:

重要:一定要满足,不然就渲染不出来,就是加了代码,在真机也显示不出来的。

  • 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  • 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。
我遇到的坑就在这里,我一直以为生产环境与测试环境都是用了同一个公众号。后面问了后端的同事才知道,原来测试环境是用了一个私人公众号,不满足上述条件,所以在测试环境捣弄了半天也没弄出来! 😔


版本要求

微信 JS-SDK 版本:1.6.0 及以上。

微信版本要求为:7.0.12 及以上。

系统版本要求为:iOS 10.3 及以上、Android 5.0 及以上。


wx.config

注意标签,别弄错了!

  • <wx-open-launch-app> 打开 APP 标签
  • <wx-open-launch-weapp> 打开微信小程序标签
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
  appId: '', // 必填,公众号的唯一标识
  timestamp: '', // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [], // 必填,需要使用的JS接口列表
  openTagList: [ 'wx-open-launch-weapp' ] // 可选,需要使用的开放标签列表
})


*这里我看过某个帖子说,即使不用 jsApiList: [] 也要配置一项,wx.config() 才能生效。因为我项目本身就有使用它,所以我没有去验证。可通过 debug: true 来验证 wx.config() 是否成功。

前提是这个配置成功了,后续的功能才能实现。


<wx-open-launch-weapp>

属性注意一下:

  • username(必填):所需跳转的小程序原始 id,即小程序对应的以 gh_ 开头的 id。(非小程序 APPID)
  • path(非必填):所需跳转的小程序内页面路径及参数。( 对于path属性,所声明的页面路径必须添加.html后缀,如pages/index/index.html

以下是使用 React 的写法,其他的框架或库我没特意去写过,可以参考 👉 官方文档。但看官方文档要带一双慧眼,开放初期官方示例似乎语法有错误,现在似乎修复了,反正认真检查一下就好了。

React 中不支持直接写 <template /> 标签,需要使用 <script type="text/wxtag-template /> 替换。或者考虑使用 dangerouslySetInnerHTML

<img style={{ width: '100%', height: '100%' }} src="xxx" />


关于样式上问题,需要在标签上写样式才有效,按照官方的示例似乎有问题。


相关问题或帖子

最后一次编辑于  2021-05-28  
点赞 2
收藏
评论

3 个评论

  • 王妙端
    王妙端
    2021-09-08

    服务号绑定“JS接口安全域名”

    这个是指我截图这边吗?

    

    2021-09-08
    赞同
    回复 1
    • 王妙端
      王妙端
      2021-09-08
      已经找到了
      2021-09-08
      回复
  • 蓉村木夏
    蓉村木夏
    2021-08-10

    react中launch事件该怎么调起

    2021-08-10
    赞同
    回复 1
    • 慢慢。
      慢慢。
      2021-08-15
      launch 事件应该是微信对 wx-open-launch-weapp 自定义的事件(文档中相关事件的说明)。其实一般情况无需关心这个事件,如果非要,在 React 中可通过 Ref 或原生方法 document.getElementById 等方法获取真实的 DOM 元素,然后通过 addEventLister 去监听该事件。(官方文档有示例)


      如果只是点击唤起弹窗,类似下面这样就行,仅供参考:
      2021-08-15
      回复
  • Joker
    Joker
    2021-01-08

    部分安卓手机(eg: 小米)不显示是为什么?

    2021-01-08
    赞同
    回复 1
    • 慢慢。
      慢慢。
      2021-08-15
      这个我倒是没遇到过,会不会是微信版本不支持,要求客户端 7.0.12 及以上。
      2021-08-15
      回复
登录 后发表内容