一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。
前言
经过我的考虑之后，从今天开始我就开始更新使用taro开发一个跨端小程序/H5的项目了。因为平常生活中用的都是大数据相关的技术栈，防止把之前用react写小程序的知识点忘记，也是为了巩固一下自己的react实践知识，于是我们开始从头搭建项目。
跨端的实际业务需求
现在有很多的项目都是一开始运行在app上的，但是随着小程序越来越普及，很多业务在双端或者多端都要同步开发，同时开发双端带来的工期往往就是双倍的。例如我上一家公司是做电商的，我们一开始的商城入口是公众号，后来我们将项目迁移到小程序上了。考虑到后期我们可能会移植到app，所以我们前端一开始的定位就是：一次编写，多端运行。
为什么是taro
相信很多人在跨端的时候也面临着技术栈选型的困惑，不过到最后总是绕不开三个技术栈uni-app、taro、flutter，下面我来解释一下为什么我选择taro
- 为什么不选择flutter：很简单，知道的人少，我们当时开始开发多端项目的时候，flutter才火起来没多久，因为缺少落地实践且我们团队没一个会的，直接pass掉了
- 为什么不选择uni-app：不可否认的是uni-app是一个非常全面的选择，但是taro有京东背书（虽然不知道taro项目组现在毕业了多少人），我们当时做商城就是想做成和京东类似的效果，有70%的相似就很满意了，所以我们选择了taro进行开发
- taro：引用官网的介绍：Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/ 京东/ 百度/ 支付宝/ 字节跳动/ QQ/ 飞书 小程序 / H5 / RN 等应用。 下面我们介绍一下如何初始化taro
初始化taro项目
- 必选项：npm、node,我的node版本号为16.14.2，npm版本为8.6.0，大家如果要跟着我的步骤来话建议按照nvm用来管理node多版本
- 为了能让taro能够全局运行，需要将node的node_global放到环境变量的path中
step1 全局安装taro的cli
npm install -g @tarojs/cli
打开cmd跳转到项目的父级运行命令
taro init taro_demo
具体的操作步骤如上所示，简单介绍一下各个问号的作用
- 这里输入项目的简介
- 选择使用react开发
- 使用ts
- 选择sass预处理css
- 从gitee拉取模板
- 选择模板为默认模板
体验hello world
编译项目
我们编译运行环境为webapp的环境在微信开发者工具上预览默认的hello world效果 跳转到项目目录下执行以下命令
- init
npm i - build
npm run dev:weapp打包完成之后在我们的项目下会生成dist目录
运行项目
我们下载微信开发者工具，扫描登录之后，新建项目的配置如下
这里我们使用测试号，如果想要正视开发的话点击注册自己去微信平台注册一个就可以了
项目打开之后的效果如下：
体验项目的源码分析
简单分析一下代码
第一行引入的react的组件
第二行引入了View、Text组件用来
17-23行，使用render进行组件渲染
结语
本篇文章我们介绍了taro的基本框架搭建，下一篇文章我们准备集成taro自己的taro ui，然后做一些基本功能的需求分析和探索
下期预告：集成taro ui,子组件传值得探索，欢迎各位多多点赞！
