一共两篇：
- 关于 React 中使用 wx-open-launch-weapp 唤起微信小程序，里面有详细介绍，并给出完整的示例。)
- wx-open-launch-weapp 样式问题
此前写过一篇文章：关于 React 中使用 wx-open-launch-weapp 唤起微信小程序。但针对该标签设置样式非常地蛋疼。
这篇文章主要介绍，如何在 <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' }} 看看有什么不一样，但高度仍然如上图一样，可宽度倒是有变化。
多次调整宽高及其单位后发现：宽度可控，可高度始终如一。
无奈.jpg
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.
