都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;
}
複製代碼