当前位置:网站首页>同事笔记-小程序入坑点

同事笔记-小程序入坑点

2020-11-09 15:25:17 落叶清风

    1.小程序中上传图片或者视频的时候需要进行压缩一下,程序有限制不说,数据一多会显示的很慢很卡
    三种方法:
        一种是使用官方提供的接口 wx.compressImage(Object object);
        一种是通过压缩图片的大小,利用canvas重绘来得到压缩图片;
        最后一种安装第三方图片压缩包。
    2.textarea组件键盘遮挡问题,,因为是原生组件的问题,机型对于这个textarea组件的影响是很大的,当聚焦输入时键盘挡住输入,并没有跟预期页面一样向上滚动输入,兼容解决办法也还时很麻烦的,(触发焦点时让它为textarea,是去焦点时让它为view)封装一个textarea(原理通过view标签来代替不点击输入时的状态)
    3.单位换算问题:
        BaseInfo.winWidth = res.windowWidth / (res.windowWidth / 750);
        BaseInfo.winHeight = res.windowHeight / (res.windowWidth / 750);
        1rpx = (设备宽度 / 750) px
        1px=2rpx
        1rem=35rpx
    (样式兼容还是很麻烦的,前期排版还是需要谨慎的)
    小程序的屏幕宽固定为750rpx(即750个物理像素),在所有设备上都是如此,1rpx=(screenWidth / 750)px,其中screenWidth为手机屏幕的实际的宽度(单位px),例如iphone6的screenWidth=375px,则在iphone6中1rpx=0.5px
    4.各种机型的兼容性问题,版面上对于安卓和ios的兼容性还是很麻烦的,前面排版的话还是很重要的,最好是考虑后面的兼容在做排版,ipad和手机的样式也是不同的,所以px还是需要精确一下的
    5.video组件问题,小程序的video组件监听不了上拉下滑的事件
        video组件api文档是这样的:
            tip: video 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级
            tip: 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 video 组件
            tip: css 动画对 video 组件无效
        小程序中video无法控制层级问题
    6.wxss里面不能使用es6语言
    7.background-image属性只支持用网络地址连接,本地地址没有效果
    8.data赋值,在js里面是直接能用this.data,但是在小程序里面需要用到setData去赋值
    9.开发完成后意识到 真的不能在wxml里面过多的写style样式,因为有些版本低的手即使不兼容的
    10.尽量不要用margin-bottom ,当元素是在整个页面的最底部的时候,在ios下可能margin-bottom会失效,所以建议,都使用padding-bottom
    11.wx.navigateTo 新窗口打开页面 新页面有返回按钮,wx.redirectTo 关闭当前页面,跳转到应用内的某个页面 新页面没有返回按钮
    12.view强制换行white-space:pre-wrap;
    13.视频放大播放时微信小程序没有可用方法,需要自己写一个蒙版,覆盖到视屏上面,点击蒙版做一个弹窗放大播放
    14.图片不需要做蒙版和弹窗,微信有自带可用方法
    15.小程序录音暂停和自然播放结束api里不能关闭定时器
        点击暂停:在暂停方法里 清除定时器  自然播放结束:在播放定时器里判断播放时间等于录音时长关闭定时器
    

版权声明
本文为[落叶清风]所创,转载请带上原文链接,感谢
https://my.oschina.net/xpx/blog/4710054