一、路由配置

路由配置跟小程序一样,在入口文件的 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路由及设计稿及尺寸单位的更多相关文章

  1. 为什么以iPhone6为标准的设计稿的尺寸是以750px宽度来设计的呢?

    iPhone6的满屏宽度是375px,而iPhone6采用的视网膜屏的物理像素是满屏宽度的2倍,也就是dpr(设备像素比)为2, 并且设计师所用的PS设计软件分辨率和像素关系是1:1.所以为了做出的清 ...

  2. iOS设计 - 一款APP从设计稿到切图过程概述

    这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...

  3. 从网易与淘宝的font-size思考前端设计稿与工作流

    本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...

  4. 从网易与淘宝的font-size思考前端设计稿与工作流 (转)

    从网易与淘宝的font-size思考前端设计稿与工作流   阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7 ...

  5. 一款APP从设计稿到切图过程全方位揭秘 Mark

    纯干货!一款APP从设计稿到切图过程全方位揭秘   @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不 ...

  6. 纯干货!一款APP从设计稿到切图过程全方位揭秘(转)

    @BAT_LCK :我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声 ...

  7. 从设计稿到demo

    前言 先省略产品设计师的wireframe和mockup,为什么线框图和视觉设计稿不在叙述范围内,由于这里要做的是网页重构,从接收设计师的PSD那一刻開始: 一.接到设计稿 1.接收到PSD后.不要着 ...

  8. iPhone 6/6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸?

    iPhone 6/6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸? 2014-12-05 09:33 编辑: suiling 分类:iOS开发 来源:知乎(pigtwo)  2 22 ...

  9. iPhone 6出现后,如何将一份设计稿支持多个尺寸?

    http://mp.weixin.qq.com/s?__biz=MzA4NTQzNTMwOA==&mid=201174413&idx=3&sn=c3fe5b3459bac288 ...

随机推荐

  1. Java虚拟机(Java Virtual Machine)

    JVM(Java Virtual Machine),Java虚机机,是JDK最底层的东西.只要能将源代码编译成字节码(.class)文件,就可以由JVM在不同平台上解释成机器指令来执行.所以,Java ...

  2. Nginx使用教程(七):使用Nginx缓存之proxy cache

    定义缓存目录 <br\>使用您喜欢的文本编辑器打开/etc/nginx/nginx.conf,并在http {区域加入: proxy_cache_path  /var/www/cache ...

  3. 给 datepicker 设定日期格式

    datepicker 是 JQueryUI 提供的日期控件,仅提供日期选择,不提供时间,但基本够用了. 其日期格式默认是:mm/dd/yy 格式字符代表的含义如下: d - 每月的第几天 (没有前导零 ...

  4. 【CQOI2006】凸多边形

    1713 -- [CQOI2006]凸多边形 Description 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. Input ...

  5. 第2章 Java并发机制的底层实现原理

    2.2 synchronized的实现原理与应用 当一个线程A执行字节码时遇到monitorenter指令时,会首先检查该指令关联的Object的对象头中的Mark Word状态. 2.2.1 如果是 ...

  6. 2018年尚硅谷《全套Java、Android、HTML5前端视频》

    全套整合一个盘里:链接:https://pan.baidu.com/s/1nwnrWOp 密码:h4bw 如果分类里没有请下载下边那些小项教程链接 感谢尚硅谷提供的视频教程:http://www.at ...

  7. Java中class的getName()和getCanonicalName()两个方法的区别

    getName()返回的是虚拟机里面的class的表示 getCanonicalName()返回的是更容易理解的表示 对于普通类来说,二者没什么区别,只是对于特殊的类型上有点表示差异 比如byte[] ...

  8. 浅谈SQL注入

    先看一个sql语句: select * from admin where username='(此处为用户输入的数据)'; 在没有任何过滤的情况下,如果用户输入:' or 1=1 -- 这条语句就为: ...

  9. odoo常用widget

      widget=”statusbar” 头部状态条标签widget=”email” 电子邮件地址标签widget=”selection” 下拉选择标签widget=”mail_followers” ...

  10. 深入浅出Redis05-Redis集群环境的配置

    一.安装redis 1,下载redis最新版 从以下redis地址下载最新版本的redis,使用使用redis-3.2.9.tar版本. http://download.redis.io/releas ...