- 微信开放标签 wx-open-launch-app 样式设置技巧
微信7.0.12开始,增加了 [代码]wx-open-launch-app[代码]标签,用于打开App,感觉又高大上了。 前期相关配置需严格对照文档,戳 微信内网页跳转App功能 和 开发标签说明 按照官方demo加各种配置踩坑,终于弹出了唤起App的弹窗以及打开了App,不容易啊~,现在要开始真正的写需求了 对照设计稿,有一个button,带背景色和圆角,点击要唤起App,按照文档的方式,样式写在了 template中的style里,样式还算简单,终于撸出来了,但标签内样式无法使用vw(这次妥协下,就不适配了) 后面又来了个需求,是个复杂的列表,需求点击每个item都是唤起App操作,一看这个,想着等于要在这个标签内完成原生的样式,而且还有数据的渲染,想想都可怕(React/Vue都出来多少年了~)。想了下,干脆用absolute定位,将内部空元素覆盖在外面不就可以了,直接开干,但最后悲剧了,没有任何效果,在社区一搜发现样式不能设置position [图片] 休息下,重点马上到来~~ 试来试去发现 [代码]wx-open-launch-app[代码]这个标签本身是可以加样式的,那还等什么,直接设置个[代码]postition: absolute[代码],然后外面样式该怎么写就怎么写,外层设置个[代码]position: relative[代码]就好,template内部样式就放一个空div,设置[代码]width:100%, height: 100%[代码],见证奇迹的时刻到了 你以为这样就结束了,但打开发现内部根本没有高度,因此必须设置真实高度,代码大致如下(React) [代码]export const getWxOpenAppHtml = (extinfo: string, height: number) => { const id = 'launch-btn' + getRandomId(); return { id, html: ` <wx-open-launch-app id=${id} style="position:absolute;top:0;left:0;right:0;bottom:0;" extinfo=${extinfo} appid="appid" > <template> <style> .wx-btn{ width:100%; height:${getRealSize(height, isPad)}px; } </style> <div class="wx-btn"></div> </template> </wx-open-launch-app> `, }; }; <div className="open-app-btn"> <Button className="btn">打开APP</Button> <div onClick={() => { openAppError(); // 用于处理标签未生效的情况 }} dangerouslySetInnerHTML={{ __html: openBtnAppHtml }} ></div> </div> [代码] 上面的[代码]getRealSize[代码]我这边主要是为了处理传入的高度,并将其按vw的形式进行适配,返回适配后的px 总结 配置需严格按照文档,wx.config调用时,jsApiList必须传入至少一项Api,不能只传openTagList 外部样式无法影响标签内样式,因为template下生成了document-fragment单独的doc,样式已于外界隔离 template样式无法使用position 标签本身可以设置样式,因此对其设置absolute,外部按正常方式写,只是样式多一个relative即可 内部高度无法使用百分比,需要传入真实高度,因此不适用不知道外部高度的场景 弹窗唤起后,不报错的情况下,点击允许和取消都会进入launch事件,无法区分,见 https://developers.weixin.qq.com/community/develop/doc/000a0e72ba07207ffd9a115025b400
2020-07-29 - H5打开微信小程序样式如何调试?
# <template> [图片] # <script type="text/wxtag-template"> [图片] # 真机 [图片] 最后想表达的是H5开发使用Vue,所以插槽只能用<script type="text/wxtag-template">方式,但是在开发者工具又不能识别出来展示。 <template>缺可以正常显示。 真机调试的时候样式又变味了...
2020-07-23