uniapp小程序

uni-app之响应式单位upx和rpx

upx rpx简介

重点：官方推荐使用rpx替代upx，参考：推荐使用rpx替代upx的公告。

在普通css写法里，upx会被编译器编译；但动态绑定时，upx不能像rpx那样直接支持动态绑定，还得再使用uni.upx2px方法用来动态计算。
其他几家小程序平台陆续都兼容了rpx机制，rpx不再是微信的专用单位，而成为了这个行业的通用单位。
从HBuilderX 2.0.5起，已经支持rpx的正常着色和px2rpx的ide代码提示转换功能；官方也修改了uni-app文档中关于尺寸单位的介绍，不再推荐upx的使用，而推荐rpx。在App端和H5端支持rpx的动态绑定，实现rpx全端通用。(这个策略调整，不影响开发者的已有代码正常运行，开发者仍然可以使用upx和uni.upx2px，也可以改用rpx，没有必要批量调整老代码)

注意：响应式单位upx和rpx是动态宽度单位
很多开发者对响应式单位依赖太严重了，比如组件高度或字体大小也使用upx/rpx。
只有当你需要某元素的单位要根据屏幕宽度大小变化时，才需要rpx这类动态宽度单位。
一般情况下高度和字体大小是不应该根据屏幕宽度变化的，除非你的字体大小想根据屏幕宽度变化。

拓展：在设置文件mainfest.json里开启px转rpx（默认关闭 “transformPx” : false,），所有的px可一键转换为 rpx：

(作者：瑟闻风倾 链接：https://www.jianshu.com/p/97dc7c4a5ebf)

upx

• 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 *
  100 / 640，结果为：117upx。
• 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 *
  200 / 375，结果为：400upx。

1.动态绑定的 style 不支持直接使用 upx。

<!-- - 静态upx赋值生效 -->
<view class="test" style="width:200upx"></view>
<!-- - 动态绑定不生效 -->
<view class="test" :style="{width:winWidth + 'upx;'}"></view>

官方收到很多开发小程序的用户投诉upx不能像rpx那样直接支持动态绑定，还得再使用uni.upx2px方法。

官方反思了策略，既然微信不可能支持upx的动态绑定，不如我们在App端和H5端来支持rpx的动态绑定。这样rpx就可以全端通用，且支持动态绑定，不再需要uni.upx2px方法。

注意：

• rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。
• 如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用
  px 。
• rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向

2、使用 uni.upx2px(Number) 转换为 px 后再赋值。

<template>
    <view>
        <view class="half-width" :style="{width: halfWidth}">
            半屏宽度
        </view>
    </view>
</template>

<script>
    export default {
        computed: {
            halfWidth() {
                return uni.upx2px(750 / 2) + 'px';
            }
        }
    }
</script>
<style>
    .half-width {
        background-color: #FF3333;
    }
</style>

rpx（responsive pixel）

• WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
• rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，
  则750rpx = 375px = 750物理像素，
  1rpx = 0.5px = 1物理像素。

即：? rpx / 750rpx = 设计px / 手机屏幕px

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1rpx = 2rpx
iPhone6 Plus	1rpx = 0.552px	1rpx = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

uniapp小程序

1. div 改成 view
2. span、font 改成 text
3. a 改成 navigator
4. img 改成 image
5. input 还在，但type属性改成了confirmtype。form、button、checkbox、radio、label、textarea、canvas、video 这些还在。
6. select 改成 picker
7. iframe 改成 web-view
8. ul、li没有了，都用view替代
9. audio 不再推荐使用，改成api方式，背景音频api文档
10. 其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签。但不推荐这种用法，调试H5端时容易混乱，基于元素的选择器也会出问题。

除了改动外，新增了一批手机端常用的新组件

• scroll-view 可区域滚动视图容器
• swiper 可滑动区域视图容器
• icon 图标
• rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
• progress 进度条
• slider 滑块指示器
• switch 开关选择器
• camera 相机
• live-player 直播
• map 地图
• cover-view 可覆盖原生组件的视图容器
• cover-view需要多强调几句，uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，比如在map上加个遮罩，则需要使用cover-view组件

js的变化

• 标准的css基本都是支持的。
• 选择器有2个变化：*选择器不支持；元素选择器里没有body，改为了page。微信小程序即是如此。
• 单位方面，px无法动态适应不同宽度的屏幕，rem只能用于h5、rpx只能用于微信小程序。为此uni-app新增了 upx
  ，通吃所有端、所有屏幕宽度的动态单位 upx文档
• uni-app推荐使用flex布局，并默认就是flex布局。这是通吃所有端的新一代布局方案，相关教程可自行百度。
• 注意背景图和字体文件尽量不要大于40k。会影响性能。如果非要大于40k，需放到服务器侧远程引用或base64后引入，不能放到本地作为独立文件引用。在小程序里，其实小于40k的文件在css里也无法引用，uni-app编译器在编译时自动做了处理，把小于40k的文件编译为base64方式。

工程结构和页面管理

• 每个可显示的页面，都必须在 pages.json
  中注册。如果你开发过小程序，那么pages.json类似app.json。如果你熟悉vue，这里没有vue的路由，都是在pages.json里管理。
• 原来工程的首页一般是index.html或default.html，是在web
  server里配的。而uni-app的首页，是在pages.json里配的，page节点下第一个页面就是首页。往往在/pages/xx的目录下。
• app和小程序中，为了提升体验，页面提供了原生的导航栏和底部tabbar，注意这些配置是在pages.json中做，而不是在vue页面里创建，但点击事件的监听在显示的vue页面中做。
• 在vue中，以前的事件监听概念改为了生命周期概念。详见uni-app生命周期
• 如果你熟悉小程序开发的话，对比变化如下：
  原来app.json被一拆为二。页面管理，被挪入了uni-app的pages.json；非页面管理，挪入了manifest.json
  原来的app.js和app.wxss被合并到了app.vue中

一些开发思路，以及标签的替换，方法的转换：

Storage

uni.setStorageSync("token", this.loginObject.token); // 设置Storage数据
uni.getStorageSync("token") // 获取Storage数据
uni.removeStorageSync('storage_key'); // 移除Storage数据
uni.clearStorage(); // 清理本地数据缓存

toast

// 可以封装为公共的组件。使用之前的方法调用
uni.showToast({
  title: "网络错误", // 提示的内容，长度与 icon 取值有关。
  icon: "none",     // 图标，有效值详见下方说明。
  image:"",         // 自定义图标的本地路径
  mask:false,      // 遮罩层
  duration:"1500", // 延迟时间
});

标签化路由

// 放弃使用，路由统一封装了。
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
    <button type="default">跳转到新页面</button>
</navigator>
<navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover">
    <button type="default">在当前页打开</button>
</navigator>

路由

uni.navigateTo({ url: "login" }); //url:里的路径如果是在一个文件夹里则可以直接这样写：
uni.navigateTo({ url: "/pages/my/login" }); //如果不是在同一个文件夹则必须从跟目录书写，如下
uni.switchTab();       //是跳转到tabBar配置的路径的，uni.navigateTo()则不可以；
uni.navigateBack();    //返回上一级
为了书写的规范，统一用uni.navigateTo({ url: "/pages/my/login" });这种方式。

路由数据接收

// 在这个周期函数里接受
onLoad: function(option) {
 
 }

下拉刷新

{
  "path": "pages/home/home",
  "style": {
    "navigationBarTitleText": "首页",
    "enablePullDownRefresh": true
  }
},

注意onPullDownRefresh下拉刷新需要的page.json里配置。
"enablePullDownRefresh": true,

onReachBottom上拉加载。距离底部的50px才会触发。
和scroll-view没有关系。
scroll-view是单独的再页面里一个盒子里内容的滚动标签。

input placeholder样式

// input 统一封装为组件，这样placeholder-style的样式就不需要在每个页面的计算属性里处理upx;
placeholder-style="color: #ccc;font-size: 14px;"

(作者：爱不会绝记 链接：https://www.jianshu.com/p/9dfa473f7fee。)