小程序踩坑总结1

1.    小程序的css单位使用rpx,才能做到很好的适配;


2.   小程序样式使用弹性布局居多,使用弹性布局能够很好的从整体上实现页面效果

      对<view>标签设置以下样式,能够实现view标签包裹的所有内容实现垂直分布;

     .container{

           display:flex;

           flex-direction:column;

          align-items:center;

    }


3.  页面最外层是<view>,但是如果对整体页面设置样式,比如最外层设置背景颜色,直接view{ background-color:#b3d4db;} 并没有效果,因为在小程序页面中默认最外层有一个page,设置page{background-color:#b3d4db;},才能达到效果


4.移动设配的分辨率

  模拟器375是逻辑分辨率pt,设计图750是物理分辨率px,物理分辨率和逻辑分辨路之间是2倍关系

  pt是逻辑分辨率,大小和屏幕尺寸有关系,简单可以理解为长度和视觉单位。

  px是物理分辨率,和屏幕尺寸没有关系。1px就是一个物理像素点,这种点不能描述大小,所以px不是一个长度单位。

 1pt可以有1个px构成,也可以是2个,还可以是3个甚至更多个。

 IPhone6下2个px构成一个pt。

rpx的作用:IPhone6下 1px = 1rpx = 0.5pt  (这个标准是微信小程序设计的时候规定的,没有为什么)

                  使用rpx小程序会自动在不同的分辨率下进行转换,而是用px单位不会

                 但是如果在IPhone6 plus下 1px = 0.6rpx  所以不推荐使用除去IPhone6的其他设备来画设计稿;

                并不是所有的单位都适合用rpx,一般字体大小就是用px,但是实际还是需要根据项目需求来确定。


5.项目报错  page

   在welcome.js中调用一下Page()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容