wx-open-launch-weapp 样式问题

Posted 2023-05-07

参考技术A

此前写过一篇文章： 关于 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.

uniapp vue3 微信公众号打开小程序

<template>
	<view class="certification" style="height: 100vh;">
		<wx-open-launch-weapp
			style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
			:username="userName"
			:path="path"
			@launch="handleLaunchFn"
			@error="handleErrorFn"
			id="launch-btn"
		>
			<div v-is="'script'" type="text/wxtag-template">
				<!--这里的height只有px起效 vw不起效，visibility: hidden是为了让组件样式不影响到实际效果 -->
				<div
					class="btn"
					style="height: 100%;display: flex;flex-direction: column;align-items: center;padding-top: 50px;width: 100%;background: #666666;"
				>
					打开小程序
				</div>
			</div>
			<!-- vue3中这样写会报错，改成上面方式v-is="'script'" -->
			<!-- <script type="text/wxtag-template">  
			        <style>.btn  padding: 12px; border: 1px solid red; </style>
			        <button class="btn">打开小程序</button>
			       </script> -->
		</wx-open-launch-weapp>
	</view>
</template>

<script setup>
import  ref, reactive, getCurrentInstance, toRefs, nextTick  from 'vue';
import  wxConfig  from '@/common/api.js';
import  onLoad, onShow  from '@dcloudio/uni-app';
import wx from 'weixin-js-sdk';

let dataRef = reactive(
	path: '/pages/secondary/product-details',
	userName: 'gh_fa95b8d03e47'
);
const  proxy  = getCurrentInstance();
onLoad(option => 
	nextTick(function() 
		let paramData =  url: window.location.href.split('#')[0];
		wxConfig(paramData).then(res => 
			if(res.code == 0)
				const data = res.result
				wx.config(
					debug: false,
					appId: data.appId, //小程序的appId
					timestamp: data.timestamp, //生成签名的时间戳
					nonceStr: data.nonceStr, //生成签名的随机串
					signature: data.signature, //签名
					jsApiList: ['wx-open-launch-weapp'],
					openTagList: ['wx-open-launch-weapp']
				);
				wx.ready(e => 
					 var btn = document.getElementById('launch-btn');
					  btn.addEventListener('launch', function (e) 
					    console.log('success');
					  );
					  btn.addEventListener('error', function (e) 
					    console.log('fail', e.detail);
					  );
					console.log(e, '成功验证');
				);
				wx.error(e => 
					console.log(e, '失败信息');
				);
			
			
		)
		
	);
);
onShow(() => );
const  path, userName  = toRefs(dataRef);

const handleLaunchFn = e => 
	console.log('success');
;

const handleErrorFn = e => 
	console.log('Error');
;

</script>

<style lang="scss" scoped>
.certification 
	width: 100%;
	background: #f0f0f0;
	overflow: hidden;


.opentag 
	display: block;
	width: 400rpx;
	height: 400rpx;
	background-color: aliceblue;

</style>