使用 Taro 快速开发快应用的入门教程

时间:2024-04-13 14:31:38

 文章来源于快应用官方论坛-本文作者“小立吗?”

 

「 Taro 」(https://taro.jd.com)一套遵循 React 语法规范的移动端跨平台统一解决方案,使用 Taro,只要维护一套代码,Taro 就能生成对应端的代码。目前支持 8 端(快应用 / 微信 / 支付宝 / 百度 / 字节跳动 / QQ小程序 / H5 / RN)转换。

使用 Taro 快速开发快应用的入门教程

 

 

安装

Taro 项目基于 node,请确保已具备较新的 node 环境(>=8.0.0),推荐使用node 版本管理工具 nvm来管理 node,这样不仅可以很方便地切换 node 版本,而且全局安装时候也不用加 sudo 了。

 

 

cli 工具安装

首先,你需要使用 npm 或者 yarn 全局安装@tarojs/cli,或者直接使用npx:

1. # 使用 npm 安装 CLI

2. $ npm install -g @tarojs/cli

3. # OR 使用 yarn 安装 CLI

4. $ yarn global add @tarojs/cli

5. # OR 安装了 cnpm,使用 cnpm 安装 CLI

6. $ cnpm install -g @tarojs/cli

安装好 Taro cli 成功之后,可以使用 taro init 创建模版项目,假设项目叫 myApp 则如下:

1. $ taro init myApp

输入以上命令后,Taro 会以问答的形式进行技术的选型,大家按照自己的技术栈和喜好进行选择,选择到最后一步会提供一些模版供你选择,如下图:

使用 Taro 快速开发快应用的入门教程

 

选择了某个模版以后,它会帮你安装依赖,如图:

使用 Taro 快速开发快应用的入门教程

 

如果安装成功则如下图:

使用 Taro 快速开发快应用的入门教程

 

如果时间比较长也没有安装成功,也可以进入 myApp 目录,使用 npm i 手动安装。

 

编译成快应用

选择快应用模式,使用下面的命令编译代码:

1. # yarn

2. $ yarn dev:quickapp

3. $ yarn build:quickapp

4. # npm script

5. $ npm run dev:quickapp

6. $ npm run build:quickapp

7. # 仅限全局安装

8. $ taro build --type quickapp --watch

9. $ taro build --type quickapp

10. # npx 用户也可以使用

11. $ npx taro build --type quickapp --watch

12. $ npx taro build --type quickapp

以上命令是对快应用进行编译预览及打包(去掉 --watch 将不会监听文件修改,并会对代码进行压缩打包),下载并打开快应用开发者工具,选择「打开文件文件夹」或者「 Open folder 」

使用 Taro 快速开发快应用的入门教程

 

接着找到 myApp 目录下的 dist 目录,点击「 打开 」

使用 Taro 快速开发快应用的入门教程

 

打开 dist 目录后,将看到导进来的 myApp 项目了,怎么预览呢?点击左边的预览图标(图上箭头的那个眼睛),然后就出现如右边红色方框里的预览效果啦。

使用 Taro 快速开发快应用的入门教程

 

选择 vs code 进行开发,打开 myApp 目录。

 

 

代码目录

在 myApp 跟目录下有如下文件夹,其中 src 是源代码,dist 是编译以后的文件(也就是 IDE 刚才选择打开的文件夹)

使用 Taro 快速开发快应用的入门教程

 

打开 dist 目录,会包含sign、src、build、dist 等几个文件夹如下:

使用 Taro 快速开发快应用的入门教程

 

其中 sign 文件夹是签名模块,当前仅有debug签名,如果内测上线,请添加release文件夹,增加线上签名;签名生成方法详见文档使用命令行,发布前打包;

src 文件夹是项目源文件夹;

dist 文件夹则是点了“眼睛”图标后IDE生成的二进制文件。

以上只是简单的介绍了一下 Taro 开发快应用的入门,更多信息可查阅我们的文档,或者加入社区来了解。

 

 

关于我们:

· Taro 官网:https://taro.jd.com/

· Taro 物料市场:https://taro-ext.jd.com/

· Taro 开发者社区:https://taro-club.jd.com/

 

 

扫码关注,敬请期待快应用更多精彩内容!

快应用生态平台

使用 Taro 快速开发快应用的入门教程