三、taro路由及设计稿及尺寸单位
一、路由配置
路由配置跟小程序一样,在入口文件的 config 配置中指定好 pages
通过taro API 跳转,详见导航
// 跳转到目的页面,打开新页面
Taro.navigateTo({
url: '/pages/page/path/name'
}) // 跳转到目的页面,在当前页面打开
Taro.redirectTo({
url: '/pages/page/path/name'
})
// 传入参数 id=2&type=test
Taro.navigateTo({
url: '/pages/page/path/name?id=2&type=test'
})
class C extends Taro.Component {
componentWillMount () {
console.log(this.$router.params) // 输出 { id: 2, type: 'test' }
}
}
二、单位
1.Taro 中尺寸单位建议使用 px、 百分比 %,
2.Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写,即从设计稿上量的长度 100px,那么尺寸书写就是 100px
3.当转成微信小程序的时候,尺寸将默认转换为 100rpx,当转成 H5 时将默认转换为以 rem 为单位的值。
4.如果不希望被转化, px 单位中增加一个大写字母,例如 Px或者 PX 这样,则会被转换插件忽略。
5.Taro 默认以 750px 作为换算尺寸标准,如果设计稿不是以 750px 为标准,则需要在项目配置 config/index.js
三、taro路由及设计稿及尺寸单位的更多相关文章
- 为什么以iPhone6为标准的设计稿的尺寸是以750px宽度来设计的呢?
iPhone6的满屏宽度是375px,而iPhone6采用的视网膜屏的物理像素是满屏宽度的2倍,也就是dpr(设备像素比)为2, 并且设计师所用的PS设计软件分辨率和像素关系是1:1.所以为了做出的清 ...
- iOS设计 - 一款APP从设计稿到切图过程概述
这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...
- 从网易与淘宝的font-size思考前端设计稿与工作流
本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...
- 从网易与淘宝的font-size思考前端设计稿与工作流 (转)
从网易与淘宝的font-size思考前端设计稿与工作流 阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7 ...
- 一款APP从设计稿到切图过程全方位揭秘 Mark
纯干货!一款APP从设计稿到切图过程全方位揭秘 @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不 ...
- 纯干货!一款APP从设计稿到切图过程全方位揭秘(转)
@BAT_LCK :我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声 ...
- 从设计稿到demo
前言 先省略产品设计师的wireframe和mockup,为什么线框图和视觉设计稿不在叙述范围内,由于这里要做的是网页重构,从接收设计师的PSD那一刻開始: 一.接到设计稿 1.接收到PSD后.不要着 ...
- iPhone 6/6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸?
iPhone 6/6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸? 2014-12-05 09:33 编辑: suiling 分类:iOS开发 来源:知乎(pigtwo) 2 22 ...
- iPhone 6出现后,如何将一份设计稿支持多个尺寸?
http://mp.weixin.qq.com/s?__biz=MzA4NTQzNTMwOA==&mid=201174413&idx=3&sn=c3fe5b3459bac288 ...
随机推荐
- 百度云资源下载加速软件推荐:proxyee-down
百度云是个好东西(现在叫百度网盘不过我还是习惯叫百度云),2个T的免费容量可以存视频.软件包等各式文件,就是下载速度有点让人看不下去,不开会员的话就算你是百兆光纤还是量子通信都是被限速的,做为一个商业 ...
- python 约束与异常处理
一.类的约束 1.约束就是对类的约束.其实就是父类对子类进行约束,子类必须要写xxx方法. 2.抽象:就是当我们没法对一个功能或者一个属性进行精确的表述,一般都采用抽象的方式给出. (1)抽象类的书写 ...
- Set replication in Hadoop
I was trying loading file using hadoop API as an experiment. I want to set replication to minimum as ...
- vue 数据绑定实现的核心 Object.defineProperty()
vue深入响应式原理 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简 ...
- UVA524-Prime Ring Problem(搜索剪枝)
Problem UVA524-Prime Ring Problem Accept:6782 Submit:43814 Time Limit: 3000 mSec Problem Descripti ...
- linux命令中的“<”和“|”是什么意思?
”<” 表示的是输入重定向的意思,就是把<后面跟的文件取代键盘作为新的输入设备.”| ”则表示一个管道的意思,可以理解为东西从管道的一边流向另外一边. cat file.json | ...
- 强化学习(一)—— 基本概念及马尔科夫决策过程(MDP)
1.策略与环境模型 强化学习是继监督学习和无监督学习之后的第三种机器学习方法.强化学习的整个过程如下图所示: 具体的过程可以分解为三个步骤: 1)根据当前的状态 $s_t$ 选择要执行的动作 $ a_ ...
- LINUX 查看当前系统的内存使用情况 free
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code # free 显示结果如下: Mem:表示物理内存统计 total 内存总数 8057 ...
- Python socket之tftp协议
1. TFTP协议介绍 TFTP(Trivial File Transfer Protocol,简单文件传输协议) 是TCP/IP协议族中的一个用来在客户端与服务器之间进行简单文件传输的协议 特点: ...
- QT socket网络通信
https://blog.csdn.net/u013007900/article/details/50411796 里主要讲解如何实现TCP和UDP的简单通信. socket简介在LINUX下进行网络 ...