01-Taro打造hello-world應用

01-Taro打造hello-world應用

一、簡介

101

Taro是由京東凹凸實驗室出品,書寫一套代碼通過 Taro 的編譯工具,將源代碼分別編譯出可以在不同端(微信 / 京東 / 百度 / 支付寶 / 位元組跳動 小程序、快應用、H5、React-Native 等)運行的代碼。廢話不多說,先從hello-world開始吧。

二、搭建環境

// node>=8.0.0
npm install -g @tarojs/cli
taro -v
taro init taroDemo

102

不好意思我果斷control+z

cd taroDemo
yarn

安裝依賴成功後咱先體驗一把weapp、alipay、h5的效果

三、小試牛刀

// dev 開發 build 生產
yarn dev:weapp // 微信小程序
yarn dev:alipay // 支付寶小程序
yarn dev:h5

以微信小程序為例

cd taroDemo
yarn dev:weapp
// 打開微信開發工具  導入dist目錄

103

如果想生成支付寶小程序則control+z 再 yarn dev:alipay, 生成的dist目錄就是支付寶小程序了

104

四、項目結構

105

五、多端同步調試

config/index.js配置

outputRoot: `dist/${process.env.TARO_ENV}`

在終端打開多個Tab,分別運行

yarn dev:weapp
yarn dev:alipay

編譯出來的目錄如圖,dist 目錄下有 weappalipay 兩個目錄

106

關注公眾號: 頁面仔小楊 【實戰乾貨、原創分享】