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

小立吗？

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

安装 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 会以问答的形式帮你进行技术的选型，大家按照自己的技术栈和喜好进行选择，选择到最后一步会提供一些模版供你选择，如下图：

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

如果安装成功则如下图：

如果时间比较长也没有安装成功，你也可以进入 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 」

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

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

我们选择 vs code 进行开发，打开我们的 myApp 目录。

代码目录

在 myApp 跟目录下有如下文件夹，其中 src 是我们的源代码，dist 是我们编译以后的文件（也就是刚才我们 IDE 刚才选择打开的文件夹啦）

我们打开 dist 目录，则看到包含sign、src、build、dist 等几个文件夹如下：

其中 sign 文件夹是签名模块，当前仅有debug签名，如果内测上线，请添加release文件夹，增加线上签名；签名生成方法详见文档使用命令行，发布前打包； src 文件夹是项目源文件夹； dist 文件夹则是我们点了“眼睛”图标后IDE生成的二进制文件。 以上只是简单的介绍了一下 Taro 开发快应用的入门，更多的信息可以查阅我们的文档了解，或者加入我们的社区来了解。 关于我们：

• Taro 官网：https://taro.jd.com/
• Taro 物料市场：https://taro-ext.jd.com/
• Taro 开发者社区：https://taro-club.jd.com/

Ender

什么时候会更新关于【快应用】的官方文档？

小立吗？

Ender 发表于 2019-7-22 12:25 什么时候会更新关于【快应用】的官方文档？

我们已经着手在更新啦，还没有更新完所以没有发布，本周可以更新完成咯

Ender

小立吗？ 发表于 2019-7-22 16:32 我们已经着手在更新啦，还没有更新完所以没有发布，本周可以更新完成咯 ...

冒昧问一句，有没有能现在能看的资料提供一下？明天就要开始一个打算覆盖三端（百度/qq/快应用）的项目，选了taro做框架

小立吗？

Ender 发表于 2019-7-22 17:38 冒昧问一句，有没有能现在能看的资料提供一下？明天就要开始一个打算覆盖三端（百度/qq/快应用 ...

官方文档已经更新了哦

Ender

小立吗？ 发表于 2019-7-23 09:58 官方文档已经更新了哦

我简单浏览了一下，针对快应用（包括qq小程序）的差异化说明似乎并不那么全面。 比如快应用基于flexbox布局的style兼容方面的注意事项（参考rn？） 比如全局及页面的配置的支持情况（比如tab）也没有具体的体现 再比如一些特殊的组件等等。。。