wx-open-launch-weapp 样式问题

此前写过一篇文章： 关于 React 中使用 wx-open-launch-weapp 唤起微信小程序 。但针对该标签设置样式非常地蛋疼。

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

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

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

为什么要这样设计？后面的方案会给出答案。

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

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

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

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

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

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

无奈.jpg

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

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

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

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

效果如下：

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

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

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

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

回到文章开头的设计：

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

完整示例：

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

The end.

定义: 微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验

有哪些开放标签?

<wx-open-launch-weapp> 打开小程序

<wx-open-launch-app> 打开app

接入要求

主体要求: 仅开放给已认证的服务号

系统要求：

微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上

接入方法

打开小程序使用步骤与微信JS-SDK类似，需要绑定安全域名、引入JS文件等步骤

打开app需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App

示例:

配置最新JSSDK

wx.config({

// 其它配置不变， openTagList配置可使用的开放标签,

openTagList: ['wx-open-launch-app, wx-open-launch-weapp']

})

页面使用开放标签

打开小程序

id="launch-btn"

// 小程序id

username="gh_xxxxxxxx"

// 小程序路径

path="/a/b/c?d=1&e=2#fg"

>

.btn { padding: 12px }

打开小程序

打开app

id="launch-btn"

// 移动应用appid

appid="your-appid"

// 额外信息, 客户端自行解析

extinfo="your-extinfo"

>

.btn { padding: 12px }

App内查看

回调

var btn = document.getElementById('launch-btn')

// 调起成功回调

btn.addEventListener('launch',function(e) {

console.log('success')

})

// 调起失败回调

btn.addEventListener('error',function(e) {

console.log('fail', e.detail)

})

---