当前位置:网站首页>Taro进阶
Taro进阶
2022-07-05 10:21:00 【码小龙.】
Taro进阶
1、介绍
Taro 是一套遵循 React 语法规范的 多端开发 的解决方案
2、功能
使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native等)运行的代码
3、安装脚手架
$ npm i -g [email protected]
$ yarn add [email protected]
4、创建项目
$ taro init myApp
5、开发期启动项目命令
$ npm run dev:h5 // web
$ npm run dev:webapp // 微信小程序
$ npm run dev:alipay // 支付宝小程序
$ npm run dev:swan // 百度小程序
$ npm run dev:rn // ReactNative
6、项目目录介绍
|— dist // 编译结果目录
|— config // 配置目录
|-- dev.js // 开发时配置
|-- index.js // 默认配置
|-- prod.js // 打包时配置
|— src // 源码目录
|-- pages // 页面文件目录
|-- index // index页面目录
|-- index.js // index页面逻辑
|-- index.css // index页面样式
|-- app.css // 项目总通用样式
|-- app.js // 项目入口文件
|— package.json // 依赖包管理文件
|— project.config.json // 专门配置小程序的配置文件
7、生命周期
state = {
name: ‘Jerry’,
age: 24
}
// -> 1.
componentWillMount () {
console.log(‘第一次渲染之前执行,只执行1次’)
}
// -> 2.render
// -> 3.
componentDidMount () {
console.log(‘第一次渲染之后执行,只执行1次’)
this.setState({
name: ‘Tom’
}, () => {
// -> 通过回调拿到的值才是最新的值
console.log(this.state.name + ‘,’ + this.state.age) // Tom,24
});
}
// -> 4.
componentWillUnmount () {
console.log(‘卸载时执行,只执行1次’)
}
componentWillUpdate () {
console.log(‘state数据将要更新’)
}
componentDidUpdate () {
console.log(‘state数据更新过后’)
}
// -> 下面两个生命周期是小程序需要的,但是兼容了h5和小程序
componentDidShow () {
console.log(‘页面显示时触发’)
}
componentDidHide () {
console.log(‘页面隐藏时触发’)
}
componentWillReceiveProps () {
console.log(‘会在父组件传递给子组件的参数发生改变时触发’)
}
// -> 每调用一次setState就会调用一次这个生命周期
// -> 那这个生命周期什么场景下应用呢? - 例如:通过判断体如果name是Jerry的时候才能让更新state,否则不会更新
shouldComponentUpdate (nextProps, nextState) {
console.log(‘检查此次setState是否要进行render调用’)
// -> 这个生命周期会返回一个boolean值,如果返回false,则就不会执行render;返回true,则就会执行render
// -> 默认是返回true
if (nextState.name === ‘Tom’) { // -> 一般用来多次的setState调用时,用来提升render的性能
return true
} else {
return false
}
}
render () {
console.log(‘渲染render’)
return (
)
}
8、状态更新
Taro状态更新一定是异步的
React中的状态更新不一定是异步的,更新必须调用setState方法
9、Props
// -> index
test() {
console.log(‘父组件 -> 子组件 , 方法的传递’)
}
// 在这一定要注意为了兼容小程序和h5,在Taro中使用props传递事件必须以on或者dispatch开头,且是驼峰形式的
// -> Child
class Child extends Component {
componentWillReceiveProps (nextProps) {
// 在props进行数据更新的时候进行
// props过多的话就会被频繁更新,所以在这个函数里通常会进行一些判断
console.log(‘props属性变化了’)
console.log(nextProps)
}
cl() {
this.props.onTest()
}
render() {
let { name, obj } = this.props
return (
)
}
}
// -> 默认值
Child.defaultProps = {
obj: {key: [{name:“aaaa”}]}
}
10、路由功能
10.1 路由功能
在Taro中,路由功能是默认自带的,不需要开发者进行额外的路由配置
这里相当于通过小程序的配置适配了小程序和h5的路由问题
Taro默认根据配置路径生成了Route
我们只需要在入口文件的config配置中指定好pages,然后就可以在代码中通过Taro提供的API来跳转到目的页面
handleClick = () => {
Taro.navigateTo({
url:‘/pages/index/index’
})
}
render () {
return (
跳转
)
}
10.2 路由传参
我们可以通过在所有跳转的url后面添加查询字符串参数进行跳转传参,例如:id=2&type=test
这样的话,在跳转成功的目标页的生命周期(componentWillMount)方法里就能通过this.$router.params获取到传入的参数
11、静态资源引用
在Taro中可以像使用webpack那样自由的引用静态资源,而且不需要安装任何的loader
可以直接使用ES6的import语法来引用样式文件/Js文件/本地图片
12、条件渲染
短路表达式
值得注意的是小程序在短路表达式渲染时,会出现true或者false的短暂出现,所以如果是要适配小程序,最好使用三元表达式来进行判断
三元表达式
比较通用的一种方式,Jsx语法是不支持if操作符的,所以只能用三元表达式或者短路表达式
{/* 短路表达式 /}
{
!true ||
}
{/ 三元表达式 /}
{
true ?
}
13、列表渲染
{/ 列表渲染 /}
{
this.state.list.map((item) => {
return (
// 提醒你当循环一个数组时应该提供 keys。
// Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 Nerv/小程序 识别哪些元素发生了变化。
// 因此你应当给数组中的每一个元素赋予一个确定的标识
)
})
}
14、Children
export default class TestDialog extends Component {
render () {
return (
<Dialog header={
header
}
>I am dialog1
I am dialog2
)
}
}
export default class Dialog extends Component {
render () {
return (
{/ 不要对this.props.children进行任何操作*/}
{this.props.children}
{/* 需要多个展示的时候,可以自定义名称,就相当于小程序的slot */}
{this.props.header}
)
}
}
15、事件处理
采用驼峰命名
在Taro中阻止事件冒泡,必须明确的使用stopPropagation
向事件处理程序传递参数
任何组件的事件传递都要以on开头 【只要当JSX组件传入的参数是函数,参数名就必须以on开头】
以上都是为了适配小程序,如果只做h5端,则不需要关注
export default class Event extends Component {
state = {
username: ‘Jerry’
}
// -> 这里需要注意的是为了兼容小程序,不能使用箭头函数在事件中进行书写,最好是采用bind来改变this指向
// test = () => {
// console.log(‘test log’)
// console.log(this.state.username)
// }
test(e) {
console.log(e);
console.log(‘test log’);
// -> this指向
// console.log(this.state.username);
// -> 需要注意的是阻止事件冒泡只能用stopPropagation
// e.stopPropagation();
// -> 明文参数都在event对象的前面 Arguments(2) [“Jerry”, MouseEvent, callee: (…), Symbol(Symbol.iterator): ƒ]
console.log(arguments);
}
render () {
return (
<Button onClick={this.test.bind(this, this.state.username)}>testEvent
)
}
}
16、样式表
不能使用 #id选择器 | div span标签选择器 | span[class=‘name’] 属性选择器 | .a > .b
一般会使用 .类选择器,必须定义className,只对当前组件有效
建议使用flex布局
Taro实战
安装稳定版taro && 初始化项目
$ cnpm i @tarojs/[email protected] -g
$ taro init cnode
使用taro-ui组件库
$ cnpm i taro-ui --save
边栏推荐
- [paper reading] kgat: knowledge graph attention network for recommendation
- How did automated specification inspection software develop?
- Glide advanced level
- 2022年化工自动化控制仪表考试试题及在线模拟考试
- How to plan the career of a programmer?
- GO项目实战 — Gorm格式化时间字段
- 【tcp】服务器上tcp连接状态json形式输出
- Glide Mastery
- DDOS攻击原理,被ddos攻击的现象
- 学习笔记5--高精地图解决方案
猜你喜欢
5G NR系统架构
What is the origin of the domain knowledge network that drives the new idea of manufacturing industry upgrading?
风控模型启用前的最后一道工序,80%的童鞋在这都踩坑
2022年危险化学品生产单位安全生产管理人员特种作业证考试题库模拟考试平台操作
Learning Note 6 - satellite positioning technology (Part 1)
Blockbuster: the domestic IDE is released, developed by Alibaba, and is completely open source!
Redis如何实现多可用区?
WorkManager學習一
[paper reading] kgat: knowledge graph attention network for recommendation
IDEA新建sprintboot项目
随机推荐
伪类元素--before和after
The most complete is an I2C summary
> Could not create task ‘:app:MyTest. main()‘. > SourceSet with name ‘main‘ not found. Problem repair
[可能没有默认的字体]Warning: imagettfbbox() [function.imagettfbbox]: Invalid font filename……
What is the most suitable book for programmers to engage in open source?
Shortcut keys for vscode
学习笔记4--高精度地图关键技术(下)
Idea create a new sprintboot project
Constrained layout flow
uniapp + uniCloud+unipay 实现微信小程序支付功能
[dark horse morning post] Luo Yonghao responded to ridicule Oriental selection; Dong Qing's husband Mi Chunlei was executed for more than 700million; Geely officially acquired Meizu; Huawei releases M
2022年流动式起重机司机考试题库及模拟考试
> Could not create task ‘:app:MyTest.main()‘. > SourceSet with name ‘main‘ not found.问题修复
Error: module not found: error: can't resolve 'xxx' in 'XXXX‘
Detailed explanation of the use of staticlayout
SAP ui5 objectpagelayout control usage sharing
How did automated specification inspection software develop?
Should the dependency given by the official website be Flink SQL connector MySQL CDC, with dependency added
【tcp】服务器上tcp连接状态json形式输出
Activity enter exit animation