请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 使用 Taro 快速开发快应用的入门教程

5
回复
826
查看
[复制链接]

3

主题

6

帖子

45

积分

 楼主| 2019-7-18 23:38:59 显示全部楼层 |阅读模式
本帖最后由 管理员 于 2019-7-19 17:55 编辑

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

WX20190718-212932@2x.png

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

1563457029958.jpg

如果安装成功则如下图:


WX20190718-214212@2x.png

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

WX20190718-221045@2x.png

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

WX20190718-222054@2x.png

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

WX20190718-221358@2x.png

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

代码目录

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

WX20190718-224633@2x.png

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


WX20190718-225449@2x.png

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

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


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


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

关于我们:





回复

使用道具 举报

6

主题

27

帖子

165

积分

2019-7-22 12:25:03 显示全部楼层
什么时候会更新关于【快应用】的官方文档?
回复

使用道具 举报

3

主题

6

帖子

45

积分

 楼主| 2019-7-22 16:32:06 显示全部楼层
Ender 发表于 2019-7-22 12:25
什么时候会更新关于【快应用】的官方文档?

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

使用道具 举报

6

主题

27

帖子

165

积分

2019-7-22 17:38:14 显示全部楼层
小立吗? 发表于 2019-7-22 16:32
我们已经着手在更新啦,还没有更新完所以没有发布,本周可以更新完成咯 ...

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

使用道具 举报

3

主题

6

帖子

45

积分

 楼主| 2019-7-23 09:58:59 显示全部楼层
Ender 发表于 2019-7-22 17:38
冒昧问一句,有没有能现在能看的资料提供一下?明天就要开始一个打算覆盖三端(百度/qq/快应用 ...

官方文档已经更新了哦
回复

使用道具 举报

6

主题

27

帖子

165

积分

2019-7-23 17:36:04 显示全部楼层
小立吗? 发表于 2019-7-23 09:58
官方文档已经更新了哦

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

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册