uniapp小程序
uniapp小程序
- uni-app之响应式单位upx和rpx
-
-
- upx rpx简介
- upx
-
- 1.动态绑定的 style 不支持直接使用 upx。
- 2、使用 uni.upx2px(Number) 转换为 px 后再赋值。
- rpx（responsive pixel）
-
- uniapp小程序
- 除了改动外，新增了一批手机端常用的新组件
- js的变化
- 工程结构和页面管理
- 一些开发思路，以及标签的替换，方法的转换：
-
-
-
- Storage
- toast
- 标签化路由
- 路由
- 路由数据接收
- 下拉刷新
- input placeholder样式
-
-
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小程序
- div 改成 view
- span、font 改成 text
- a 改成 navigator
- img 改成 image
- input 还在，但type属性改成了confirmtype。form、button、checkbox、radio、label、textarea、canvas、video 这些还在。
- select 改成 picker
- iframe 改成 web-view
- ul、li没有了，都用view替代
- audio 不再推荐使用，改成api方式，背景音频api文档
- 其实老的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。)