1. image 宽高自适应方法

受到了小程序的暴击 《小程序如何去掉page样式user agent stylesheet？》

因第一次做小程序的时候使用了image图片组件，src引用一张图片后，给图片的样式设置了width:100%，发现图片变形了~~~，我想要的效果是，图片在父级中的宽是占据父级元素的100%，高度自动适应，按照html中的图片在浏览器中默认显示逻辑应该是，图片宽度为图片的100%宽度像素，高度自适应，所以这种显示逻辑并不会造成图片变形，思虑片刻，猜疑是哪给图片默认设置了图片高度，后来使用调试器选中图片元素查看了下原因，果不其然，小程序给image组件默认设置了以下样式：

image {
    width: 320px;
    height: 240px;
    display: inline-block;
    overflow: hidden;
}

因此导致我只给图片设置了width，但是高度还是使用了默认的240px的值，但是我又不想给图片固定高度，因为固定后，后期如果设计突然要修改图片尺寸的话，还得修改小程序代码样式，然后再发包，这种Low的事情绝不是一个优秀与帅气并存的前端高级开发人员做的事~（啪！谁打的），然后我就去查了下官方API，在image组件上有一个mode属性，这个属性的功能是设置图片裁剪、缩放的模式，默认值为scaleToFill（缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素），mode有很多可选参数，如下：

• scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
• aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
• aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
• widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
• heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
• top 裁剪模式，不缩放图片，只显示图片的顶部区域
• bottom 裁剪模式，不缩放图片，只显示图片的底部区域
• center 裁剪模式，不缩放图片，只显示图片的中间区域
• left 裁剪模式，不缩放图片，只显示图片的左边区域
• right 裁剪模式，不缩放图片，只显示图片的右边区域
• top left 裁剪模式，不缩放图片，只显示图片的左上边区域
• top right 裁剪模式，不缩放图片，只显示图片的右上边区域
• bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域
• bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域

最终解决：

<div class="main-bg">
    <img mode="widthFix" class="the-img" :src="activityInfo?.indexImage" alt="" srcset="" />
</div>

2. 图片长按识别二维码

image标签添加 show-menu-by-longpress 属性

<image src="https://img.qr.com/qr.jpg" style="width: 100%;" mode="widthFix" show-menu-by-longpress="{{true}}"></image>

3. 小程序 webview 相关

3.1. 路由回退

// 引入 wx 对应的 api
<script src="//static.nowcoder.com/nc/sdk/weixin/jweixin-1.6.0.js"></script>

// 路由回退
wx.miniProgram.navigateBack();

3. 样式相关

input 标签高度设置不生效: 需要增加 min-height 属性

input {
    height: 40px;
    min-height: 40px;
}

input 修改 placeholder 样式： placeholder-class="wx-input-placeholder"

<input placeholder-class="wx-input-placeholder" type="text" placeholder="请输入" />

X. 相关链接

• 微信小程序 page-container 拦截返回并弹窗