整理在uni-app一套代码适配app&小程序遇到的兼容问题。
uni-app单位问题: 动态绑定的 style 不支持直接使用 upx
- upx - 小程序与app都支持
- rpx - 小程序支持
psupx换算使用:
- 若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度 应该设为:750 * 100 / 640,结果为:117upx。
- 若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400upx。
uni-app小程序使用网页嵌套:在界面中嵌套别的网址界面显示
app端支持<web-view>
也支持<iframe>
小程序仅支持<web-view>
注意⚠:下面这个必须为https域名,http域名部分iphone无法响应
<web-view src="https://www.baidu.com/?tn=62095104_10_dg"></web-view>
uni-app小程序图片不显示(真机调试时)
解决1 - 给图片专门设width && height
解决2 - 使用相对路径
解决3 - 如果是给<view>
设了background。改成<image url="">
uni-app小程序点击事件无效(@click真机调试时)
原因1 层级不够高
解决:设置z-index
原因2 (如下例)真机调试input聚焦时,按钮无法点击。
解决:不要让按钮覆盖在输入框上,让他保持在输入框右边