都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;
}
复制代码