Taro@3.3.3最新版本开发企业级出⾏全栈项⽬
多端统⼀开发框架——Taro
介绍
Taro是京东凹凸实验室开源的⼀套基于React开发规范的多端统⼀开发框架，⽀持⽤ React 的开发⽅式编写⼀次代码，⽣成能运⾏在/百度/字节跳动/⽀付宝⼩程序、H5、React Native 等平台的应⽤。
背景
主要是如今市⾯上端的形态多种多样，Web、React-Native、⼩程序等各种端⼤⾏其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然⾮常⾼，这时候只编写⼀套代码就能够适配到多端的能⼒就显得极为需要。因此Taro诞⽣了，通过⼀套代码使⽤Taro的编译⼯具，编译出可在/百度/⽀付宝/字节跳动⼩程序、H5、React-Native 等端运⾏的代码
特性
由于Taro是遵循React规范的，因此它具有和React⼀样的组件化思想，⽽且也⽀持JSX语法，可以说会React，就能够获得和开发React ⼀致的体验。
多端统⼀开发框架——Taro
⼩程序
原本的⼩程序中有⼀个开发体验不是很好，⽆法使⽤npm包来管理第三⽅库，⽆法使⽤最新的es规范等等，所以taro就改进了这些缺点，它具有以下优秀的特性：
⽀持使⽤ npm/yarn 安装管理第三⽅依赖
⽀持使⽤ ES7/ES8 甚⾄更新的 ES 规范，⼀切都可⾃⾏配置
⽀持使⽤ CSS 预编译器，例如 Sass 等
⽀持使⽤ Redux 进⾏状态管理
⽀持使⽤ MobX 进⾏状态管理
⼩程序 API 优化，异步 API Promise 化等等
多端⽀持
taro的出现就是为了解决多端问题，⽬前 Taro 代码可以⽀持转换到 /百度/⽀付宝/字节跳动⼩程序 、 H5 端 以及 移动端（React Native）。同时⼤家可以看⼀下的Nerv，它是⼀款基于virtual dom技术的类React UI框架，据官⽹介绍它⾮常的优秀，兼容性仍保持对
ie8的兼容，⽽且性能极⾼，值得体验学习！
Taro@3.3.3实战开发企业级出⾏全栈项⽬
技术栈
⼩程序端 taro, ts, mobx
服务器端 nodejs, ts, koa, sequelize, mysql
以上这些技术栈原则上来说我在项⽬中会直接使⽤其⽤法，有什么不明⽩的可以给我留⾔哈，我会根据留⾔情况看看是否给⼤家单个拿出来单个讲⽤法
npx @tarojs/cli init cj-miniapp
├── config #构建配置⽂件夹
│ ├── dev.js
│ ├── index.js
│ └── prod.js
├── global.d.ts #ts声明⽂件
├── node_modules # 依赖模块
├── package.json
├── fig.json
├── src #⼯作⽬录
│ ├── app.scss
│ ├── app.tsx
│ ├── index.html
│ ├── pages
│ └── store
├── tsconfig.json
└── yarn.lock
到这⾥我们已经有了⼀个基础项⽬结构，然后把整个项⽬添加到git代码库中⽅便管理后续的版本。
由于前⽂我们没有在全局安装cli⼯具这⾥运⾏整个项⽬之前我们需要在项⽬中安装@tarojs/cli 才能顺利启动整个项⽬
yarn add @tarojs/cli -D #添加cli
yarn dev:weapp #启动项⽬
第⼀个组件
新建⽂件
/src/components/chunk/index.tsx
这个组件现在的功能很简单，之所以抽出来单独写，主要是为了演⽰组件⼀般情况下是什么样⼦
import Taro, { Component } from ‘@tarojs/taro’;
import { View } from ‘@tarojs/components’;
import { CSSProperties } from ‘react’;
interface ChunkProps {
style?: CSSProperties;
}
interface ChunkState {}
class Chunk extends Component<ChunkProps, ChunkState> {
render() {
const { children, style } = this.props;
return (
<View
style={{
background: ‘#feffff’,
borderRadius: ‘32rpx’,
padding: ‘32rpx’,
…style,
}}
>
{children}
);
}
}
export default Chunk;
第⼀个页⾯
src/pages/index/index.scss
page {
background: #ecedee;
}
.home {
padding: 0rpx 30rpx;
.header {
margin-top: 60rpx;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
}
src/pages/index/index.tsx
react native import { ComponentType } from ‘react’;
import Taro, { Component, Config } from ‘@tarojs/taro’;
import { View, Image, Navigator, Text } from ‘@tarojs/components’; import Chunk from ‘~components/chunk’;
import ‘./index.scss’;
interface IndexProps {}
export default Index as ComponentType;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。