一、路由配置

路由配置跟小程序一样,在入口文件的 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. 【项目 · Wonderland】立项报告

    [软件工程实践 · 团队项目] 第二次作业 团 队 作 业 原 文:http://www.cnblogs.com/andwho/p/7598662.html Part 0 · 简 要 目 录 Part ...

  2. 解决IE8不支持html5标签最好解决办法?

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法:HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显 ...

  3. php面试题整理(五)

    表单也得改

  4. SQLite的sqlite3_prepare_v2

    original SQL text---<sqlite3_prepare_v2>--->sqlite3_stmt--<sqlite3_reset>-->clear  ...

  5. centos7下安装docker(13.4容器volume总结)

    最近我们学习了docker 存储,首先docker存储有两种:storage driver和data volume. storage driver是由镜像层和容器层组成的,可以通过docker ins ...

  6. shut immediate 数据库遭遇 ORA-24324 ORA-24323

    SQL> shut immediateORA-24324: service handle not initializedORA-24323: value not allowedORA-27140 ...

  7. fastjson 返回json字符串,JSON.parse 报错

    这是由于转义字符引起的如 : \ , fastjson 处理后是双反斜杠:\\ ,而 JSON.parse 解析时需要4个反斜杠 ,即 js解析json 反斜杠时,需要 4个 解成 1 个 解决方法: ...

  8. Python排序算法——插入排序

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10787464.html 一.插入排序(Inse ...

  9. AI LeNet

    LeNet 参考链接: http://yann.lecun.com/exdb/publis/pdf/lecun-01a.pdf https://www.charleychai.com/blogs/20 ...

  10. 完成了Coursera的一个机器学习课程

    终于完成了这个课程,从开始学习,到现在差不多过了一年的时间,中间由于一些原因耽搁了,最终还是完成了,记录一下!