新建页面的技巧与规则小程序包含一个描述整体程序的app和多个描述各自页面的page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：app.json必须有一个pages数组：一个小程序页面由四个文件组成，分别是：注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名新建pages文件夹，再新建index文件夹，点击新建page可以同时自动创建四个基本文件创建后编译器会自动在app,json目录的pages下配置好刚刚创建的界面（在json文件格式没有错误的清情况下才会自动配置）：这时候我们编译运行项目，就能看见效果：image标签显示一张图片微信小程序使用i

一.WXSS模板样式1.什么是wxssWXSS(WeiXinStyleSheets）是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。2.WXSS和CSS的关系WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。与CSS相比，WxsS扩展的特性有：rpx尺寸单位@import样式导入二.rpx1．什么是rpx尺寸单位rpx(responsivepixel）是微信小程序独有的，用来解决屏适配的尺寸单位。2.rpx的实现原理rpx的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上

大家写东西自然还是会比较喜欢用rpx但是事实证明在js中还是px好用因为很多单位交互的函数还是只返回px单位的理论上将750rpx是整个屏幕的宽度那么我们可以这样写一个函数pxToRpx(px){//获取整个屏幕的宽度单位pxletscreenWidth=wx.getSystemInfoSync().screenWidth//用整个屏幕的px单位除以750letratio=750/screenWidth//用px单位除以屏幕比return(px*ratio)}这里我们看看效果wxmlview>viewid="dom">view>view>wxss#dom{width:750rpx;height

单位rpx是响应式pxrpx是一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx正好是屏幕的宽度。屏幕变宽，rpx实际显示效果会等比放大，但在App端和h5端，屏幕宽度达到960px时，默认将按照375px的屏幕宽度进行计算。在开发移动端项目时选择rpx作为尺寸单位。uni-app在App端，H5端和小程序都支持rpx，并且可以配置不同屏幕宽度的计算方式。页面元素在uni-app的宽度计算公式如下：750*元素在设计稿中的宽度/设计稿基准宽度举例说明：若设计稿宽度为750px，元素A在设计稿上的宽度为100rpx，那么元素A在uni-app中的宽度应该设计为750*100/

单位rpx是响应式pxrpx是一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx正好是屏幕的宽度。屏幕变宽，rpx实际显示效果会等比放大，但在App端和h5端，屏幕宽度达到960px时，默认将按照375px的屏幕宽度进行计算。在开发移动端项目时选择rpx作为尺寸单位。uni-app在App端，H5端和小程序都支持rpx，并且可以配置不同屏幕宽度的计算方式。页面元素在uni-app的宽度计算公式如下：750*元素在设计稿中的宽度/设计稿基准宽度举例说明：若设计稿宽度为750px，元素A在设计稿上的宽度为100rpx，那么元素A在uni-app中的宽度应该设计为750*100/

webstorm在写微信小程序代码的时候，rpx单位会警告，并且格式化rpx单位与数值之间会有一个空格。解决方法：在plugins中搜索wechatminiprogramsupport，安装并下载这个插件，下载完成apply，然后ok；搜索WechatMiniProgram，将小程序支持启用一下，就可以啦~注意：如果1、2两步都完成之后，但是不生效，记得重启一下webstorm。

第一种转换方法：由rpx的微信官方介绍可知rpx（responsivepixel）:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。由此得知是以750物理像素为基准：px/rpx=screenWidth/750由此得知：rpx=(750px)/screenWidthpx=(screenWidthrpx)/750//rpx转pxrpxToPx(rpx){ constscreenWidth=uni.getSystemInfoSync().screen

一.响应式单位rpxrpx说明rpx:规定不管屏幕为多少px,100%的屏幕宽度就是750rpx100%屏幕的宽度=750rpxrpx响应单位rpx是微信小程序独有的，解决屏幕自适应的尺寸单位可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx通过rpx设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配rpx和px之间的换算在普通网页开发中，最常见的像素单位是px在小程序开发中推荐使用rpx这种响应式的像素单位进行开发以iphone6为列iphone6的屏幕宽度为375rpx共有750个物理像素则750rpx=375px=750物理像素二.image组件概念说明和m

一，前言1.在使用uni-app开发小程序时支持的尺寸单位如下（1）基础单位：px，rpx（2）h5单位：rem，vm，vh2.rpx是微信小程序提出的一种响应式px二，rpx介绍1.现实情况下，ui设计师只提供一个分辨率的图，严格按设计图标注的px做开发，在不同宽度的手机上界面很容易变形，而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求，从而有了rpx单位2.rpx是相对于基准宽度的单位，可以根据屏幕宽度进行自适应，以750宽的屏幕为基准，750rpx恰好为屏幕宽度，换句话说，在rpx世界中，屏幕的宽度就是750rpx三，转化关系1.为了还原ui设计

在css中单位长度用的最多的是px、em、rem，这三个的区别是：一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。rem是CSS3新增的一个相对单位（rootem，根em）三、em是相对于其父元素的字体大小来设置的，一般都是以的“font-size”为基准。这样就会存在一个问题，如果我想对某个特定的元素的进行字体大小设置，那么他所有的子元素都会以他为基础，就会导致整个页面内元素所占比例与UI定稿不一样。而rem是相对于html根元素的“font-size”为基准，这样就意味着，