三、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 ...
随机推荐
- JDK版本更换,Eclipse中所有的项目报错
我将JDK10切换成JDK8版本以后,原先在eclipse中写的项目全部都报错了.解决方案如下: 1.设置eclipse中的JDK版本和JRE环境:window-preference-java-Com ...
- IE和其他浏览器内核
1.qq急速 2.qq的IE兼容模式 3.Edge 4.IE11 5.chrome js获取浏览器内核 <script language="JavaScript" type= ...
- 学习Ant Design Pro的一点心得
1.控制反转(Inversion of Control)是一种「思想」,依赖注入(Dependency Injection)则是这一思想的一种具体「实现方式」 2.react 要注意全局 id相同 3 ...
- 虚拟化技术QEMU-KVM入门
一.QEMU.KVM.QEMU-KVM QEMU提供一系列的硬件模拟设备(CPU,网卡,磁盘等),客户机指令都需要QEMU翻译,因而性能较差.KVM是linux内核提供的虚拟化,可以用来进行vCPU的 ...
- centos7下安装docker(15.2跨主机网络-overlay)
为支持容器跨主机通信,Docker提供了overlay driver,使用户可以创建基于VxLAN的overlay网络.VxLAN可将二层数据封装到UDP进行传输,VxLAN提供与VLAN相同的以太网 ...
- [python] 解决pip install download速度过慢问题 更换豆瓣源
""" python建立pip.ini.py 2016年4月30日 03:35:11 codegay """ import os ini=& ...
- Spring Security(九):2.4.4 Checking out the Source(检查来源)
Since Spring Security is an Open Source project, we’d strongly encourage you to check out the source ...
- leetcode 155. Min Stack 、232. Implement Queue using Stacks 、225. Implement Stack using Queues
155. Min Stack class MinStack { public: /** initialize your data structure here. */ MinStack() { } v ...
- Java多线程(一)多线程基础
一.进程 进程是操作系统结构的基础:是一次程序的执行:是一个程序及其数据在处理机上顺序执行时所发生的活动.操作系统中,几乎所有运行中的任务对应一条进程(Process).一个程序进入内存运行,即变成一 ...
- 从零开始搭建django前后端分离项目 系列五(实战之excel流式导出)
项目中有一处功能需求是:需要在历史数据查询页面进行查询字段的选择,然后由后台数据库动态生成对应的excel表格并下载到本地. 如果文件较小,解决办法是先将要传送的内容全生成在内存中,然后再一次性传入R ...