关于uni 开发跨平台App的坑

夜雨入心

1.uni.share()问题,分享图文时,图片不显示?

解决方法:将图片大小进行处理,大约为20k,使用腾讯云oss 图片地址添加 '?imageView2/2/w/100/h/100/q/60',进行质量压缩,基本可以使用

2.uni关于组件样式兼容微信小程序的坑

//自定义组件 在微信小程序无法生效的问题
//需要在组件内增加属性

解决方法:

export default {
    options: { styleIsolation: 'shared' }, //将属性生效至页面
}

3.关于uni-app input组件无法监听 keyup.enter事件问题

解决方法:

<input class="search_input" type="text"
    placeholder-class="search_placeholder" 
    placeholder="搜索资讯标题,关键词"
    v-model="queryParams.keyword"
    confirm-type="search" @confirm="handleSearch" />    
//最后一句confirm-type="search"最为重要

4.关于uni 自适应 rpx 在ipad pro不生效问题

解决方法:

需要在pages.json中
globalStyle字段下进行特殊配置

"globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#007AFF",
    "backgroundColor": "#FFFFFF",
    "rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960
    "rpxCalcBaseDeviceWidth":1024, // rpx 计算使用的基准设备宽度,设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px,默认值为 375
    "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx,默认值为 750
}

5.关于uni canvas各类问题

canvas操作时 尤其是canvasGetImageData、canvasPutImageData
其width、height 特别注意 整数 以及 边界值 ,极有可能造成fail,
在进行图片变色 canvasPutImageData时,
微信小程序 兼容上会有透明部分 直接将底色覆盖现象,h5以及app正常,
需要将图片信息获取之后 拼接到另一个canvas完成背景色显现,
uni.createCanvasContext(canvasId,this);
uni.canvasGetImageData(Object,this);
uni.canvasPutImageData(Object,this);
三个 this 很重要,忘记添加 及其容易产生bug

6.关于 scroll-view 使用 flex布局 自动填充宽高 flex:1时,极有可能达不到想要的效果:

解决方法:

在 scroll-view 外层设置一个view ,给view使用flex布局,并且添加flex:1属性,scroll-view 样式 设置为 width:100%;height:100%;即可;
阅读 201
26 声望
0 粉丝
0 条评论
26 声望
0 粉丝
文章目录
宣传栏