三、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 ...
随机推荐
- 爬楼梯的golang实现
假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 输入: 输出: 解释: 有两种方法可以爬到楼顶. ...
- Spring Cloud构建微服务架构:服务网关(路由配置)【Dalston版】
转载:http://blog.didispace.com/spring-cloud-starter-dalston-6-2/ 原创 2017-08-26 翟永超 Spring Cloud 被围观 ...
- SDOI2017 R1做题笔记
SDOI2017 R1做题笔记 梦想还是要有的,万一哪天就做完了呢? 也就是说现在还没做完. 哈哈哈我竟然做完了-2019.3.29 20:30
- P2678 跳石头(二分+模拟)
思路: 我觉得我现在有一个非常不好的习惯,那就是不爱画图.当我把这个题的检验函数用图来表示出来.感觉就非常好理解了. 直接说检验函数吧.就是非常简单的模拟,我现在换成角度来说:假设你最小能跳x(不能跳 ...
- Linux:Day11(上) ifcfg命令
将Linux主机接入到网络中: 配置方式: 静态指定: ifcfg:ifconfig,route,netstat ip:object{link,addr,route},ss,tc 配置文件:syste ...
- 带返回结果的批量任务执行 CompletionService
转自 :http://blog.csdn.net/lmj623565791/article/details/27250059 一般情况下,我们使用Runnable作为基本的任务表示形式,但是Runna ...
- 洛谷 P1596 [USACO10OCT]湖计数Lake Counting
题目链接 https://www.luogu.org/problemnew/show/P1596 题目描述 Due to recent rains, water has pooled in vario ...
- macOS10.4后的刻盘新姿势
先sudo -s 输入密码 然后终端拖入createinstallmedia (在macOS Mojave.app显示包内容里面的resources里面的文件复制下来即可) 输入 --volume ...
- 多线程-Callable、Future、FutureTask
我们普遍知道的创建线程的方式有两种,一种是继承Thread,一种是实现Runnable接口.这两种方式都无法获取任务执行完后的结果,并发包提供了Callable 类能够得到任务执行完的结果. 为何需要 ...
- 在windows下安装Redis
一.下载windows版本的Redis 由于官网上没有windows版的下载地址,所以需要下载windows版本的Redis有以下两个地址: 博主的csdn资源地址:http://download.c ...