MattTheTekie

微信网页跳转小程序

前言

这几天在写微信 H5 的项目,有一个功能是网页跳转小程序,遇到了非常坑的问题,因此记录一下

坑点

开始使用

要跳转小程序,就要用到微信 SDK 的开放标签 wx-open-launch-weapp

我们需要在 jssdk 中注册

wx.config({
  // ... 其他配置按照需求配置
  openTagList: ["wx-open-launch-weapp"] // 填入这个玩意儿
})

正常使用下,我们就是这么用

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <!-- script 标签不能省略 -->
  <script type="text/wxtag-template">
    <button>打开小程序</button>
  </script>
</wx-open-launch-weapp>

顺便吐槽,username 这个字段是小程序的原始ID,太蠢了…

好,按照以上操作,最简单版本的跳转可以了,但是问题来了,如果你需要非常复杂的样式呢?

踩坑

根据官方文档说明

如果所使用的标签允许提供插槽,由于插槽中模版的样式是和页面隔离的,因此需要注意在插槽中定义模版的样式。

意思是,写在这个标签里的模板样式,是引用不到外界的,你要么写内联样式,要么在 script 里写 style 标签。

所以当你需要在现成的一个按钮外加这么一个标签,那么你的样式可能就会混乱,甚至标签不见。

比如

<style>
  .btn {
    color: red;
  }
</style>

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <!-- script 标签不能省略 -->
  <script type="text/wxtag-template">
    <style>
      .btn-inner {
        color: red;
      }
    </style>
    <button class="btn btn-inner">打开小程序</button>
    <!-- 无法引用到外界的 btn 样式,但可以引用内部的 btn-inner -->
  </script>
</wx-open-launch-weapp>

React

如果你是在使用 React,那么可能会报错 not in JSX.IntrinsicElements,可以在 type.d.ts 中定义一个

declare global {
  namespace JSX {
    interface IntrinisicElements {
      'wx-open-launch-weapp': any
    }
  }
}

解决方法

因为我使用的是 React 所以就按照 React 写法来写实例

主要思路是将这个开放标签当成一层 cover 覆盖在我们需要的样式上面

const WxOpenLaunchButton: FC = ({ children }) => {
  return (
    <div
      style={{
        position: "relative",
        width: 100, // 宽高也可通过 props 传进来,这里只做演示
        height: 100, // 外层宽高必须定义,不然内部的开放标签拿不到宽高
      }}
    >
      {children}
      <wx-open-launch-weapp
        id="launch-btn"
        username="gh_xxxxxxxx"
        path="pages/home/index?user=123&action=abc"
        style={{
          width: "100%",
          height: "100%",
          position: "absolute",
          top: 0,
          left: 0,
        }}
      >
        <!-- script 标签不能省略 -->
        <script type="text/wxtag-template">
          <div 
            style={{
              width: "100%",
              height: "100%",
              position: "absolute",
              top: 0,
              left: 0,
              opacity: 0, // 透明度 0 让其不可见但能点击
            }}
          />
        </script>
      </wx-open-launch-weapp>
    </div>
  )
}

封装好之后,下次使用只需要引用这个组件就可以啦

const Page = () => {
  return (
    <WxOpenLaunchButton>
      <div className="btn">Open WeApp</div>
    </WxOpenLaunchButton>
  )
}

总结

微信这文档是真的坑,而且整这么一个玩意儿还不说清楚,还需要自己瞎摸索,不过好在摸索出来了。