wx-open-launch-weapp标签样式不起作用，点击跳转问题

wx-open-launch-weapp开放标签点击无反应问题

前言：这开放标签的使用，所需要的的准备工作可自行去官网查看

本文主要记录我这次H5拉起微信小程序的坑，另外这个开放标签可以当做一个div来使用

一：样式不起作用问题

在开发过程中，发现放在wx-open-launch-weapp标签里面的样式根本不起作用，里面引入的图片也不生效；这里的解决思路是，用一个透明的div，在div填充些文本，悬浮在需要点击触发跳转的模块上，然后用开放标签包裹。这样就避免了样式问题。

这只是一个代码片段，供参考用

<div v-if="item.order_from == 1">
	 <div class="gl_item item_info" style="color: #666666; padding: 1% 2%;overflow: hidden; width: 100%; height: 11.66rem; padding: 1rem; width: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(239, 243, 246, 1);">
		<div>
			<img :src="item.picture_url" onerror="javascript:this.src='../img/onerror60x60.png';" class="left_img" style="width: 9rem; height: 7rem; border-radius: 5px;" >
		</div>
		<div class="c_right" style="padding: 0 0 0 0.5rem; width: calc(100% - 7rem); height: 80%; display: flex; flex-direction: column; justify-content: space-between;padding: 15px 1px 1px 1px; margin-left: 10px; margin-top: -20px; margin-right: 5px;">
			<p>{{item.name | ellipsis}}</p>
			<p>{{item.order_date | formatTimer}}</p>
			<p>来源：
				<span>
					<img src="../img/page1/ddmt.png" style="vertical-align: middle;width:17pt;height:17pt;">
				</span>
				<span class="stus" style="float: right;color: #FFFFFF;background: #FFA800;" v-show="item.orderStatus == 'WAIT_USE'">待使用</span>
				<span class="stus" style="float: right;color: #FFFFFF;background: #ff5b5b;" v-show="item.orderStatus == 'REFUNDED'">已取消</span>
				<span class="stus" style="float: right;color: #FFFFFF;background: #2D8CF0;" v-show="item.orderStatus == 'COMPLETED'">已使用</span>
				<span class="stus" style="float: right;color: #FFFFFF;background: #ff5b5b;" v-show="item.orderStatus == 'UPDATED'">已修改</span>
			</p>
			<p></p>
		</div>
		<div></div>
		<wx-open-launch-weapp  id="launch-btn" username="gh_*****" :path="item.order_from_path_1" style=" width: 96%; height: 90%;position: absolute;word-break: break-all;word-wrap: break-word;opacity: 0;">
			<script type="text/wxtag-template">
				mtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtm
				mtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtm
				mtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtm
				mtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtm
				mtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtmtm
			</script>
		</wx-open-launch-weapp>
	 </div>
	</div>

wx-open-launch-weapp不显示问题

wx-open-launch-weapp开放标签使用，必须在微信浏览器打开，或者使用微信开发者工具环境下查看，此外还要确保前期准备工作是否做好，详情请看官网

wx-open-launch-weapp标签使用的时候记得设置宽高