前言
配图源自 Freepik
这篇文章主要介绍，如何在 <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%; }
这个过程差点吐血，可喜的是可以愉快地唤起小程序了。
The end.
