三、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 ...
随机推荐
- 常见C语言内存错误
前言 C语言强大的原因之一在于几乎能掌控所有的细节,包括对内存的处理,什么时候使用内存,使用了多少内存,什么时候该释放内存,这都在程序员的掌控之中.而不像Java中,程序员是不需要花太多精力去处理垃圾 ...
- formbuild拖拽表单设计器
formbuild拖拽表单设计器 表单设计器适用于OA系统.问卷调查系统.考试系统等系统,具体使用请前至官网API请点击 formbuild拖拽表单设计器 formbuild迭代几个功 ...
- Java 7 for Absolute Beginners/Java 7基础教程--读后感
1. 很适合部分初学者,因为书中对于JAVA许多特性都有涉猎,而且也是浅尝即止.如果读者没有受过专业的编程训练,那么在阅读此书时不会畏惧.因为书中没有充斥着大量的计算机理论知识,虽然作者依然覆盖了JA ...
- SecureCRT8.1+SecureCRT_keygen完成注册
原文:https://www.cnblogs.com/qiyawei/p/7822957.html 1.下载完secureCRT8.1之后,进行安装. 点击secureCRT.exe的时候会出现如下图 ...
- Java中String对象两种赋值方式的区别
本文修改于:https://www.zhihu.com/question/29884421/answer/113785601 前言:在java中,String有两种赋值方式,第一种是通过“字面量”赋值 ...
- 【CQOI2014】危桥
[CQOI2014]危桥 Description Alice和Bob居住在一个由N个岛屿组成的国家,岛屿被编号为\(0\)到\(N-1\).某些岛屿之间有桥相连,桥上的道路都是双向的,但是一次只能供一 ...
- JavaScript 浮点数运算的精度问题
问题描述 在 JavaScript 中整数和浮点数都属于 Number 数据类型,所有数字都是以 64 位浮点数形式储存,即便整数也是如此. 所以我们在打印 1.00 这样的浮点数的结果是 1 而非 ...
- ansible批量免秘登录
ansible批量免秘登录 主控机 10.22.0.185 centos7 被控机 10.22.0.186 centos7 一.主控机安装ansible yum install epel-rele ...
- 前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化
本项目利用 VueI18n 组件进行国际化,使用之前,需要进行安装 $ npm install vue-i18n 一.框架引入步骤: 1. 先在 main.js 中引入 vue-i18n. // 国 ...
- echart自定义浮窗 增加点击事件
一:情景 做一个柱状图,需要在柱状图显示lable,并且浮窗上每个条目可以被点击或者跳转. 我使用的做图插件是echarts,但是echart的浮窗是图片,而且不可以被点击,不能识别html,而且这个 ...