taro 知识点

Easter79
• 阅读 543
  • taro 的包:

包名

说明

@tarojs/redux

Redux for Taro

@tarojs/redux-h5

Forked react-redux for taro

@tarojs/plugin-csso

Taro压缩CSS文件

内置环境变量

process.env.TARO_ENV用于判断当前编译类型,目前有 weapp / swan / alipay / h5 / rn 五个取值

环境判断

  • Taro.ENV_TYPE

环境字符串

环境

ENV_TYPE.WEAPP

微信小程序环境

ENV_TYPE.SWAN

百度小程序环境

ENV_TYPE.ALIPAY

支付宝小程序环境

ENV_TYPE.WEB

WEB(H5)环境

ENV_TYPE.RN

ReactNative 环境

  • Taro.getEnv() 获取当前环境值,具体值如上 Taro.ENV_TYPE

调试:微信小程序

  1. 运行命令:npm run dev:weapp,会在dist文件夹下产生小程序需要的文件;
  2. 微信开发者工具里,点击“小程序项目”,弹出的窗口中“项目目录”选择dist文件夹,即可。

路由功能

我们只需要在入口文件的 config 配置中指定好 pages,然后就可以在代码中通过 Taro 提供的 API 来跳转到目的页面,例如:

// 跳转到目的页面,打开新页面
Taro.navigateTo({
  url: '/pages/page/path/name'
})

// 跳转到目的页面,在当前页面打开
Taro.redirectTo({
  url: '/pages/page/path/name'
})

设计稿及尺寸单位

在 Taro 中尺寸单位建议使用 px、 百分比 %,Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写,即从设计稿上量的长度 100px,那么尺寸书写就是 100px,当转成微信小程序的时候,尺寸将默认转换为 100rpx,当转成 H5 时将默认转换为以 rem 为单位的值。 如果你希望部分 px 单位不被转换成 rpx 或者 rem ,最简单的做法就是在 px 单位中增加一个大写字母,例如 Px 或者 PX 这样,则会被转换插件忽略。 结合过往的开发经验,Taro 默认以 750px 作为换算尺寸标准,如果设计稿不是以 750px 为标准,则需要在项目配置 config/index.js 中进行设置,例如设计稿尺寸是 640px,则需要修改项目配置 config/index.js 中的 designWidth 配置为 640。 目前 Taro 支持 750、 640 、 828 三种尺寸设计稿,他们的换算规则如下: 建议使用 Taro 时,设计稿以 iPhone6 750px 作为设计尺寸标准。

  • 和 React/Nerv 不一样的地方在于,Taro 不支持使用 点表示法 和运行时指定类型来引用组件,例如 <MyComponents.DatePicker /> 这样的写法在 Taro 中是无法正确编译的。 官方链接

  • 和 React/Nerv 的不同: React 可以使用 ... 拓展操作符来传递属性,但在 Taro 中你不能这么做。 官方链接

  • 布尔值、Null 和 Undefined 被忽略 false、null、undefined 和 true 都是有效的 children,但它们不会直接被渲染。下面的表达式是等价的:

    {false} {null} {undefined} {true}

这在根据条件来确定是否渲染 元素时非常有用。以下的 JSX 只会在 showHeader 为 true 时渲染组件。

<View>
  {showHeader && <Header />}
  <Content />
</View>

官方链接

  • 与 React/Nerv 最大的不同 属性不能传入 JSX 元素 考虑如下代码:

    const element = <Content footer={} />

这样的代码在 Nerv/React 中使用是没有问题的,但是在 Taro 中不能这么做。 官方链接

  • 使用 PropTypes 检查类型 随着应用日渐庞大,你可以通过类型检查捕获大量错误。要检查组件的属性,你需要配置特殊的 propTypes 属性:

    import PropTypes from 'prop-types';

    class Greeting extends Component { render() { return (

    Hello, {this.props.name}

    ); } }

    Greeting.propTypes = { name: PropTypes.string };

如上例,Taro 与 React 一样,也支持PropTypes 检查类型,目前在小程序端还有些问题,但在 H5 端可以使用,用法和在 React 里一样。 官方链接

  • 虽然 this.props 由 Taro 本身设置以及 this.state 具有特殊的含义,但如果需要存储不用于视觉输出的东西,则可以手动向类中添加其他字段。 如果你不在 render() 中使用某些东西,它就不应该在状态中。 官方链接

  • 组件库说明 Taro 以 微信小程序组件库 为标准,结合 jsx 语法规范,定制了一套自己的组件库规范。 基于以上原则,在小程序端,我们可以使用所有的小程序原生组件,而在其他端,我们提供了对应的组件库实现:

  1. H5 端,@tarojs/components,同时也是需要引入的默认标准组件库
  2. RN 端为,@tarojs/components-rn
  • Taro 代码与微信小程序代码混写 Taro 项目 支持 Taro 的代码与小程序原生的页面、组件代码混合存在,只需要将原生的页面、组件代码放入 src 目录下,随后在 入口文件 app.js 中定义好 pages 配置指向对应的原生的页面即可,在原生页面的配置中,你可以通过 usingComponents 来定义需要引入的组件,这里可以指定 Taro 组件同时也可以指定小程序原生的组件。 官方链接
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
2年前
HIVE 时间操作函数
日期函数UNIX时间戳转日期函数: from\_unixtime语法:   from\_unixtime(bigint unixtime\, string format\)返回值: string说明: 转化UNIX时间戳(从19700101 00:00:00 UTC到指定时间的秒数)到当前时区的时间格式举例:hive   selec
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k