wx-open-launch-weapp 样式问题

Question

这篇文章主要介绍，如何在 <wx-open-launch-weapp> 写样式的踩坑过程（以 React 为例）。

由于在 <wx-open-launch-weapp> 添加样式会非常多的问题，可能各种不生效。

因此，我会这样去设计：container 为点击唤起小程序的区域（相对定位），而 content 则是该区域的展示内容，wx-open-launch-weapp 则是占满唤起区域（绝对定位）。

<div class="container">
  <div class="content">页面内容</div>
  <wx-open-launch-weapp>省略了一部分代码</wx-open-launch-weapp>
</div>

.container {
  position: relative;
  margin: 30px;
  height: 182px;
}

.content {
  width: 100%;
  height: 100%;
}

为什么要这样设计？后面的方案会给出答案。以上为简化版，完整示例请看文章末尾。

1. 方案一

当前这个需求，由于我的 content 只是一张图片，所以我的第一个想法是这样的。

为了方便对比效果，分别设置了背景色。其中紫色部分为 <wx-open-launch-weapp> 区域，粉红部分为 <script type="text/wxtag-template"> 区域。

<div class="container">
  <wx-open-launch-weapp
    username="gh_xxxxxxxx"
    path="pages/index/index.html"
    style={{ width: '100%', height: '100%', opacity: 0.3, background: 'blue' }}
  >
    <script type="text/wxtag-template">
      <div style={{ opacity: 0.3, background: 'red' }} />
    </script>
  </wx-open-launch-weapp>
</div>

.container {
  margin: 30px;
  height: 182px;
  background-image: url(../../../images/banner-movecar.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

将 <wx-open-launch-weapp> 宽高设为 100%，我们先看下效果：

这时候只出现了紫色部分，且紫色部分点击也没有任何效果，不能唤起小程序。然后，我想是不是 <script type="text/wxtag-template"> 未设置宽高的问题，将其设置为 100% 之后，效果一样均无效。

2. 方案二

由于上一个方案流产之后，马上想到会不会是 100% 不生效，于是想着将宽高设置为具体值。如下：

<div class="container">
  <wx-open-launch-weapp
    username="gh_xxxxxxxx"
    path="pages/index/index.html"
    style={{ width: '6.9rem', height: '1.82rem', opacity: 0.3, background: 'blue' }}
  >
    <script type="text/wxtag-template">
      <div style={{ width: '100%', height: '100%', opacity: 0.3, background: 'red' }} />
    </script>
  </wx-open-launch-weapp>
</div>

效果如上，尽管 <wx-open-launch-weapp> 占满 container 的宽度。可高度。。。接着我尝试设为 {{ width: '6.9rem', height: '100%' }}，效果完全一致，高度仍无法占满 container 的高度。

PS：由于我拿到的是最为常见的 750px 的视觉设计稿，因此 100px 对应的是 1rem。在打包过程，会采用相应的 loader 去进行单位的转换。由于 loader 只能处理 css、less、scss 等文件，而无法处理内联的样式，所以我这里会写成 rem 为单位。

我又想是不是 rem 单位问题，然后我又改为 {{ width: '690px', height: '182px' }} 看看有什么不一样，但高度仍然如上图一样，可宽度倒是有变化。

多次调整宽高及其单位后发现：宽度可控，可高度始终如一。

3. 方案三

到这里想吐了，我想着先解决 <wx-open-launch-weapp> 占满 container 的问题，暂时忽略 <script type="text/wxtag-template"> 的问题。

既然方案二尝试了各种可能性，无论怎么设置宽高仍不尽人意。于是采用绝对布局看看：

由于此前设置了 background 来区分，于是将 <script type="text/wxtag-template"> 区域宽度暂时设为 90%，方便对比结果。

<div class="container">
  <wx-open-launch-weapp
    username="gh_xxxxxxxx"
    path="pages/index/index.html"
    style={{ position: 'absolute', width: '100%', height: '100%', opacity: 0.3, background: 'blue' }}
  >
    <script type="text/wxtag-template">
      <div style={{ width: '90%', height: '100%', opacity: 0.3, background: 'red' }} />
    </script>
  </wx-open-launch-weapp>
</div>

.container {
  position: relative
  /* 其他无变化 */
}

好像看到希望了，<wx-open-launch-weapp> 已经占满 container 了。

但是这时候 <script type="text/wxtag-template"> 的区域仍然没有展示出来，那我是不也要设为绝对布局呢，试试看：

<div class="container">
  <wx-open-launch-weapp
    username="gh_xxxxxxxx"
    path="pages/index/index.html"
    style={{ position: 'absolute', width: '100%', height: '100%', opacity: 0.3, background: 'blue' }}
  >
    <script type="text/wxtag-template">
      <div style={{ position: 'absolute', width: '90%', height: '100%', opacity: 0.3, background: 'red' }} />
    </script>
  </wx-open-launch-weapp>
</div>

效果如下：

PS：注意这里宽度其实是没问题的，写成 100% 就能横向占满。

好像快成功了，高度还是不对。其中紫色部分属于 <wx-open-launch-weapp>，而粉红部分属于 <script type="text/wxtag-template">。所以点击粉红区域可以正常唤起小程序了。

细心的同学可能发现了，缺的那部分高度跟未设置布局时的高度是一样的，为什么会这样，我也没找到原因。有知道的同学可以告诉我哦，谢谢。

若将 <script type="text/wxtag-template"> 设为 relative 布局，我试了，发现是不行的。

然后，又想到将 top 设为 0，发现可以了。

为了兼容性，于是我谨慎地将 top、left 均设为 0。

到这里，感觉可以收尾了。

4. 最终解决方案

回到文章开头的设计：container 为点击唤起小程序的区域（相对定位），而 content 则是该区域的展示内容，wx-open-launch-weapp 则是占满唤起区域（绝对定位）。

考虑到上面就一个宽高的问题，就那么难搞了。所以我想把页面元素与唤起小程序的区域分开来，是不是省心很多。

完整示例：

import React, { useState } from 'react'
import style from './index.scss'

export default function Demo() {
  return (
    <div className={style.container}>
      <div className={style.content}>
        {/* 这里写页面内容 */}
      </div>
      <wx-open-launch-weapp
        username="gh_xxxxxxxx"
        path="pages/index/index.html"
        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
      >
        <script type="text/wxtag-template">
          {/* 这里唤起小程序的点按区域 */}
          <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0 }} />
        </script>
      </wx-open-launch-weapp>
    </div>
  )
}

// index.scss
.container {
  position: relative;
  margin: 30px;
  height: 182px;
}

.content {
  width: 100%;
  height: 100%;
  background-image: url(../../../images/banner-movecar.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

这个过程差点吐血，可喜的是可以愉快地唤起小程序了。