背景 在h5开发中可用的css适配单位有 em/百分比/rem/vw/vh/vmin/vmax，小程序提供了 rpx: 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。 日常小程序开发中，一般设计图尺寸为 750 * 1334 px，则在小程序中一般 1px 直接写为 1rpx ，当小程序为竖屏（[代码]"pageOrientation": "portrait"[代码] 默认为竖屏）时，根据 rpx 可以直接还原UI图，但是当小程序为横屏（[代码]"pageOrientation": "landscape"[代码]）时，根据 rpx 适配就明显比较大，不符合UI图，因为 rpx 是根据屏幕宽度适配的。 这个时候就需要一种既能适配不同屏幕大小，又能以设计图为准，快速布局的方式。通过了解 em/百分比/rem/vw/vh/vmin/vmax 这几种方式，明显 vmin 更符合，vmin 是vw和vh中比较 小 的值。 vw： Viewport宽度， 1vw 等于viewport宽度的 1%。 vh： Viewport高度， 1vh 等于viewport高的的 1%。 所以 100 vmin = 750px。 [代码].wxss[代码] 文件处理 当设置某个元素的宽度为 100px 时，根据 [代码]100px / 750px = x / 100vmin[代码] ，则对应的 vmin 值为 100vmin / 7.5 ，当单位为 rpx 时， vmin 值为 100vmin / 7.5 ，即 [代码]100px = 100vmin / 7.5[代码] 或者 [代码]100rpx = 100vmin / 7.5[代码] ，但是每次都写 [代码]vmin / 7.5[代码] 又有点麻烦，所以就写了个小工具 rpx2vmin ，支持将 rpx/px 转译为 vmin，这样布局的时候依然写 rpx/px ，最后再转译一下就可以了。 将需要转译的 [代码].wxss[代码] 文件复制粘贴到 [代码]input[代码] 文件下，在项目目录下执行如下命令行 ，会在 [代码]ouput[代码] 目录下生成对应的文件名称，需要提前安装 nodejs。 [代码]# 安装依赖 npm install # 将 rpx 转译为 vmin npm run rpx2vmin # 将 px 转译为 vmin npm run px2vmin [代码] 主要处理的如下： [代码]font-size: 12rpx; height: 60rpx; padding: 12rpx 16rpx; border-left: 2rpx dashed #5DA5FF; width: calc(100vw - 50rpx - 80rpx); [代码] 转移为 [代码]font-size: calc(12vmin / 7.5); height: calc(60vmin / 7.5); padding: calc(12vmin / 7.5) calc(16vmin / 7.5); border-left: calc(2vmin / 7.5) dashed #5DA5FF; width: calc(100vw - 50vmin / 7.5 - 80vmin / 7.5); [代码] 或者是： [代码]font-size: 12px; height: 60px; padding: 12px 16px; border-left: 2px dashed #5DA5FF; width: calc(100vw - 50px - 80px); [代码] 转移为 [代码]font-size: calc(12vmin / 7.5); height: calc(60vmin / 7.5); padding: calc(12vmin / 7.5) calc(16vmin / 7.5); border-left: calc(2vmin / 7.5) dashed #5DA5FF; width: calc(100vw - 50vmin / 7.5 - 80vmin / 7.5); [代码] js 中的处理 某些时候我们可能需要通过 js 计算设置，这个时候可以通过 wx.getSystemInfo() 得到 [代码]windowWidth[代码]（可使用窗口宽度，单位px） 和 [代码]windowHeight[代码]（可使用窗口高度，单位px） ， [代码]100vmin = Math.min(windowWidth, windowHeight)[代码]， [代码]1px = Math.min(windowWidth, windowHeight) / 750[代码] ，其中750为布局的时候可视窗口的最小宽度，其他尺寸乘以比例即可得到对应的 px 值或者 rpx 值。

具体描述: scroll-view组件，下拉加载数据时，动态设置scroll-into-view导致页面空白 代码片段： https://developers.weixin.qq.com/s/x8Jw0Mmk7aHN 页面空白表现： [视频] 设备信息： System: iPhone, iOS 16.0.3, WeChat 8.0.34 Network: wifi UA: Mozilla/5.0 (iPhone: CPU iPhone OS 16 0 3 like Mac OS X)AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.34(0x18002234) NetTypeWIFI Language/zhCN WeChatLib: 2.31.0 (2023.4.23 11:19:33)

video组件，部分 iphone 手机会有左右抖动，可以帮忙看看吗？ https://weddingbo-1256393015.cos.ap-chengdu.myqcloud.com/4424/case/Image/2022-11-1/81e12196-4ea4-8c80-d626-3032e78d3558.mp4 [图片]

先说结论： 仅适用生成简单布局的页面，复杂页面会有大量性能开销。 复杂页面可以其他使用webview嵌入的方式用原生H5代替。 安装使用见官方文档，本文主要提及重要使用规则。 需要为wxml-to-canvas指定width和height属性，默认为400*300，当该尺寸与wxss最大容器尺寸不一致时会有异常只能使用view、text、image标签view只用于布局、text只用于文字、image只用于图片（可绝对定位作为背景）text、image必须指定width、heightview可以不指定height、只指定width，由子元素动态撑高。渲染高度限制：IOS实际像素 < 4096，实际高度需 < 4096/3 = 1356动态数据可通过函数结合模板字符串实现画布高度最好是确定的数字（<1356）lineHeight可使text文本居中，lineHeight值等于height即可多个absolute元素时，因为没有z-index，template元素自上而下渲染，对应z-index依次增高元素默认为flex布局，子元素会继承父元素的flex布局属性（row或column）背景颜色仅可使用backgroundColor，而非background。性能优化指南 在canvas绘制完成后，可以使用this.widget.canvasToTempFilePath来保存并获取本地临时路径，但是图片可能会比较大，通常会1-2M，实际我们应该尽可能在保证清晰的情况下减小文件大小，我们可以通过canvasToTempFilePath的参数配置来进行调整，如下通常可以保持较小的体积及基本合适的清晰度。更多的配置可详细参考canvasToTempFilePath文档{ destWidth: canvas组件的宽度, destHeight: canvas组件的高度, fileType: 'jpg', quality: 0.9 } 以下是动态数据与动态高度及基本使用的示例： //动态wxml : poster-data.js const getWxml = (info)=>{ return `${info.a?`${info.b}`:''}` } //动态css const getStyle = (info)=>{ return { textTest: { width: 100, height: 20, fontSize: info.fontSize } } } //页面使用 : index.js const { wxml, style } = require('./poster-data.js'); //... data:{ canvasHeight: 0, info:{ a:1, b:2, fontSize: 16 } } onLoad(){ const tempHeight = this.computeContentHeight() this.setData({ canvasHeight:tempHeight },()=>{ this.widget = this.selectComponent('.widget');//数据就绪后canvas高度已确定，再获取canvas组件实例 }) } computeContentHeight(){ //do something 根据数据动态现实隐藏而修改canvas高度 return 500; } saveImage(){ wx.showLoading({ title: '生成中请稍后.', mask: false, }); const template = getWxml(this.data.info);//获取template const css = getStyle(this.data.info)//获取canvas const p1=this.widget.renderToCanvas({wxml:template,style:css}); p1.then((res)=>{ const p2 =this.widget.canvasToTempFilePath();//canvas图片保存到本地临时路径 p2.then(res=>{ wx.hideLoading(); this.data.poster = res.tempFilePath // 使用微信分享 wx.showShareImageMenu({ path: res.tempFilePath }); // 或保存到本地 // wx.saveImageToPhotosAlbum({ // filePath: res.tempFilePath, // success(res){ // console.log(res); // }, // fail(res){ // console.log(res); // } // }); }); }); } //隐藏canvas .widget { position: absolute; left: -999px; } 参考 小程序中实现页面截图 | 微信开放社区wxml-to-canvas 组件中高度不能超过 4096？，否则无法生成图片，报错 | 微信开放社区微信扩展组件wxml-to-canvas支持动态传入数据吗？急 | 微信开放社区小程序使用wxml-to-canvas截屏_培根芝士的博客-CSDN博客_小程序 截屏

代码如下 var mapCtx = wx.createMapContext("map"); //wxml中map标签的id值 mapCtx.moveToLocation(); XML内的map地图已经加上了 show-location="true" 尝试用按钮触发 moveToLocation  编辑器上的模拟器 可以正常移动到 个人中线点位置 产品上线后 以及 预览中 是无法移动的 通过查看文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.moveToLocation.html 也没有说明 需要申请权限之类的 请问是怎么回事？