作为前端，还是需要去了解taro开发各种小程序

原创

前端老鸟

修改于 2019-07-30 19:31:09

1.3K0

修改于 2019-07-30 19:31:09

文章被收录于专栏：front-end technology

都2019年下半年了，今年新热技术都在这里！抓紧时间搞起来！

互联网发展迅速，不进步就等于在落后，2019年前半年都要过去了，热门新技术你掌握了吗？

还不知道该学什么怎么学？

前端方向

热门技术：TypeScript、Vue、Taro(微信小程序、百度小程序、支付宝小程序、字节跳动小程序、h5)

快速入门Taro小程序

**安装**

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

**cli 工具安装**

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

  # 使用 npm 安装 CLI

  $ npm install -g @tarojs/cli

  # OR 使用 yarn 安装 CLI

  $ yarn global add @tarojs/cli

  # OR 安装了 cnpm，使用 cnpm 安装 CLI

  $ cnpm install -g @tarojs/cli

**注意事项**

值得一提的是，如果安装过程出现sass相关的安装错误，请在安装mirror-config-china后重试。

$ npm install -g mirror-config-china

**使用**

使用命令创建模板项目

$ taro init myApp

微信小程序

# yarn

$ yarn dev:weapp

$ yarn build:weapp

# npm script

$ npm run dev:weapp

$ npm run build:weapp

# 仅限全局安装

$ taro build --type weapp --watch

$ taro build --type weapp

# npx 用户也可以使用

$ npx taro build --type weapp --watch

$ npx taro build --type weapp

百度小程序

# yarn

$ yarn dev:swan

$ yarn build:swan

# npm script

$ npm run dev:swan

$ npm run build:swan

# 仅限全局安装

$ taro build --type swan --watch

$ taro build --type swan

# npx 用户也可以使用

$ npx taro build --type swan --watch

$ npx taro build --type swan

支付宝小程序

# yarn

$ yarn dev:alipay

$ yarn build:alipay

# npm script

$ npm run dev:alipay

$ npm run build:alipay

# 仅限全局安装

$ taro build --type alipay --watch

$ taro build --type alipay

# npx 用户也可以使用

$ npx taro build --type alipay --watch

$ npx taro build --type alipay

字节跳动小程序

# yarn

$ yarn dev:tt

$ yarn build:tt

# npm script

$ npm run dev:tt

$ npm run build:tt

# 仅限全局安装

$ taro build --type tt --watch

$ taro build --type tt

# npx 用户也可以使用

$ npx taro build --type tt --watch

$ npx taro build --type tt

H5

# yarn

$ yarn dev:h5

# npm script

$ npm run dev:h5

# 仅限全局安装

$ taro build --type h5 --watch

# npx 用户也可以使用

$ npx taro build --type h5 --watch



# yarn

$ yarn build:h5

# npm script

$ npm run build:h5

# 仅限全局安装

$ taro build --type h5

# npx 用户也可以使用

$ npx taro build --type h5

环境及依赖检测

Taro 提供了命令来一键检测 Taro 环境及依赖的版本等信息，方便大家查看项目的环境及依赖，排查环境问题。在提 issue 的时候，请附上 taro info 打印的信息，帮助开发人员快速定位问题。

$ taro info

👽 Taro v1.2.0-beta.15





  Taro CLI 1.2.0-beta.15 environment info:

    System:

      OS: macOS High Sierra 10.13.5

      Shell: 5.3 - /bin/zsh

    Binaries:

      Node: 8.11.2 - /usr/local/bin/node

      Yarn: 1.8.0 - /usr/local/bin/yarn

      npm: 5.6.0 - /usr/local/bin/npm

    npmPackages:

      @tarojs/components: ^1.2.0-beta.3 => 1.2.0-beta.3

      @tarojs/plugin-babel: ^1.2.0-beta.3 => 1.2.0-beta.3

      @tarojs/plugin-csso: ^1.2.0-beta.3 => 1.2.0-beta.3

      @tarojs/plugin-sass: ^1.2.0-beta.4 => 1.2.0-beta.4

      @tarojs/plugin-uglifyjs: ^1.2.0-beta.3 => 1.2.0-beta.3

      @tarojs/rn-runner: ^1.2.0-beta.4 => 1.2.0-beta.4

      @tarojs/router: ^1.2.0-beta.3 => 1.2.0-beta.3

      @tarojs/taro: ^1.2.0-beta.3 => 1.2.0-beta.3

      @tarojs/taro-alipay: ^1.2.0-beta.3 => 1.2.0-beta.3

      @tarojs/taro-h5: ^1.2.0-beta.3 => 1.2.0-beta.3

      @tarojs/taro-swan: ^1.2.0-beta.3 => 1.2.0-beta.3

      @tarojs/taro-weapp: ^1.2.0-beta.3 => 1.2.0-beta.3

      @tarojs/webpack-runner: ^1.2.0-beta.3 => 1.2.0-beta.3

      eslint-config-taro: ^1.2.0-beta.3 => 1.2.0-beta.3

      eslint-plugin-taro: ^1.2.0-beta.3 => 1.2.0-beta.3

开发前注意

小程序

若使用微信小程序预览模式，则需下载并使用微信开发者工具添加项目进行预览，此时需要注意微信开发者工具的项目设置

需要设置关闭 ES6 转 ES5 功能，开启可能报错

需要设置关闭上传代码时样式自动补全，开启可能报错

需要设置关闭代码压缩上传，开启可能报错

特殊问题的处理

在 H5 模式下，tabBar 可能会挡住页面 fixed 元素问题：这是因为与小程序的 tabBar 不同，在 H5 下 tabBar 是一个普通的组件，当页面中存在 fixed(bottom) 定位的元素时，其表现会与小程序中不一致。Taro 提供了一个适配的方法：

.fixed {

  bottom: 0;

  /\* 在 H5 模式下将会编译成 margin-bottom: 50px，在小程序模式下则会忽略 \*/

  margin-bottom: taro-tabbar-height;

}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度