一不小心把Taro给学了

小马过河R

于 2024-10-08 10:06:45 发布

阅读量514

点赞数 20

分类专栏：前端文章标签： taro 前端框架前端

本文链接：https://blog.csdn.net/qq_41035650/article/details/142752669

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景是这样的，最近小马请朋友帮忙进行了一次微信小程序的版本更新，重点不在功能主要是为了流量主而开发的，你懂的。交付过来的源码是Taro开发的，由于小马之前都是使用的原生小程序开发，此时如需要自己小改动点功能代码，这就头大了。好在小马庆幸有前端基础，于是等修改完功能，迷迷糊糊也就把Taro给学了！特此整理。

在这里插入图片描述

一、什么是Taro

taro的官方教程讲得很详细了。如果你想快速了解，可以参考这段文字。

Taro是一个遵循React语法规范的开放式跨端跨框架解决方案‌，支持使用React/Vue/Nerv等框架开发微信小程序、京东、百度、支付宝、字节跳动、QQ、飞书、H5、ReactNative等多种应用。Taro允许开发者只编写一套代码，就能适配到多个平台，极大地提高了开发效率‌。

环境准备： ‌
安装Node.js‌：Taro开发环境需要Node.js >= 8.0.0版本。可以通过官方网站下载安装包进行安装‌。
安装Taro CLI‌：在命令行中输入命令 npm i -g @tarojs/cli
安装Taro命令行工具。安装成功后，可以在任何目录下使用Taro命令进行项目创建和管理‌。

创建项目：
‌创建项目文件夹‌：选择一个目录作为项目存放位置，打开命令行工具并进入该目录‌。 ‌
初始化项目‌：输入命令 taro init taroApp，根据提示输入项目名称和选择模板。Taro会创建一个新的项目文件夹，并安装所需依赖‌。
项目结构：
Taro项目的基本结构包括：
‌src‌：源码目录，包含应用的主要逻辑和页面文件。
‌pages‌：页面文件目录，每个页面是一个文件夹，包含页面的JavaScript、样式文件和配置文件。
‌app.js‌：项目入口文件，负责应用的初始化。 ‌app.css‌：项目通用样式文件‌。
编译和运行：
‌启动开发服务器‌：
在项目根目录下，输入命令 npm run dev:weapp 启动开发服务器（weapp为微信小程序），Taro会监听文件变化并重新编译，生成可供预览的小程序‌。 ‌
编译项目‌：
使用命令 npm run build:weapp进行项目编译，生成可用于发布的小程序包。编译配置存放在项目根目录下的 config 文件夹中‌。
npm run dev:weapp和npm run build:weapp都是Taro的编译命令，两种不同编译模式，主要区别是是否进行监听文件修改和对代码进行压缩打包。
通过以上步骤，您可以快速上手使用Taro进行跨平台应用开发。Taro的开放性和灵活性使得开发者能够高效地构建多端应用，降低开发和维护成本。

二、安装Taro

按照官方安装教程，我们直接在node官网下载最新的node包来安装即可。node安装教程唯一有点东西的就是环境变量的配置，可以参考这个node安装教程。
如上教程，当我们安装好Node.js‌和Taro CLI‌后，我们就可以开始项目开发了。
在这里插入图片描述

三、项目开发

如果是一个全新的项目可以按照官方教程或参考这篇教程，先进行项目初始化taro init taroApp，Taro会创建一个新的项目文件夹，并自动安装所需依赖‌。如果是一个移交过来的项目，则可能因为环境原因拿过来run不起来，可以考虑重新yarn install安装下依赖。

在这里插入图片描述
在根目录下直接右键打开git客户端的终端窗口，我们借助git终端窗口可以直接方便地执行相关初始化编译等命令。

打开项目根目录下的package.json文件，我们看到当前项目的依赖。

npm run dev:weapp命令编译run起来之后整个天下就是你的了，小程序可以看到预览和体验版；等一波代码敲完之后，最后npm run build:weapp进行项目编译生成可用于发布的小程序包。（其实仔细看下图命令执行信息的话，可以发现npm run dev:weapp命令其实先执行了npm run build:weapp然后npm run build:weapp命令然后最终还是执行的taro build这个命令？！）
在这里插入图片描述

从上面的内容我们可以看到，这个命令其实就是在执行build。
这时，项目中生成dist文件夹，展开并查看，正好是微信小程序项目结构。
在这里插入图片描述

在这里插入图片描述
这里很是奇怪，小马在重新安装依赖yarn install和run命令npm run dev:weapp跑完之后，在小程序开发工具上确实可以直接通过小程序开发工具的编译而在开发工具预览码上直接看到代码修改效果了，甚至小马把最新看到的效果直接上传为体验版，然后查看体验版也是可以直接生效的。这点很是疑惑，按理说不应该是新的修改都要build后才能最终生效吗？但小马修改代码后并没有再次执行npm run dev:weapp命令来build重新打包的，而是直接用小程序开发者工具直接编译的。这点很匪夷所思，难道是小程序开发者工具的编译自动执行的taro编译脚本？？？蒙圈中。