<wx-open-launch-weapp id="launch-btn" username="xxxxx">
<script type="text/wxtag-template">
<style>.btn { padding: 12px; color: #FFF; }</style>
<button class="btn">miniprogram</button>
</script>
</wx-open-launch-weapp>
IOS 设备上正常,安卓设备不能显示按钮 !!
在 <script type="text/wxtag-template"> 内使用 style 或者 内联样式,都不能控制图片响应,即 max-width: 100%; 或者 width:100%;
我的解决了 !!
jsApiList: ['chooseImage', 'previewImage'], // 必填必填必填 留空 安卓就不灵 openTagList: ['wx-open-launch-weapp']
若使用图片元素,通常需要自己根据设备尺寸,计算出图片位置宽度,这里需要动态创建按钮节点,不然不好动态渲染 !!
<div class="itm" v-html="mpBtnNode"></div> wx.ready(() => { // the.wxReady = true // 组装按钮节点 const rote = 381 / 750 // UI 比例 const clientWidth = document.body.clientWidth // 客户端宽度 const btnWidth = rote * clientWidth const btnHeight = btnWidth * 163 / 602 const nodeContent = '<wx-open-launch-weapp id="launch-btn" username="xxxxx">' + '<template>' + `<img src="yellow.png" width="${btnWidth}" height="${btnHeight}">` + '</template>' + '</wx-open-launch-weapp>' the.mpBtnNode = nodeContent })
至于有些同学 IOS 下不灵,安卓正常,建议加上 wx.ready 尝试,据说写不写这个也有讲究 !