taro开发工具安装_快速搭建Taro项目

安装Taro命令行工具

npm i -g &＃64;tarojs/cli

# 或

cnpm install -g &＃64;tarojs/cli

安装完成后在终端输入taro命令&＃xff0c;查看是否安装成功

创建项目

taro init hello

项目目录如下

├── babel.config.js \# Babel 配置

├── .eslintrc.js \# ESLint 配置

├── config \# 编译配置目录

│ ├── dev.js \# 开发模式配置

│ ├── index.js \# 默认配置

│ └── prod.js \# 生产模式配置

├── package.json \# Node.js manifest

├── dist \# 打包目录

├── project.config.json \# 小程序项目配置

├── src \# 源码目录

│ ├── app.config.js \# 全局配置

│ ├── app.css \# 全局 CSS

│ ├── app.js \# 入口组件

│ ├── index.html \# H5 入口 HTML

│ └── pages \# 页面组件

│ └── index

│ ├── index.config.js \# 页面配置

│ ├── index.css \# 页面 CSS

│ └── index.jsx \# 页面组件&＃xff0c;如果是 Vue 项目&＃xff0c;此文件为 index.vue

运行

# h5 模式

npm run dev:h5

# 微信小程序模式

npm run dev:weapp

# 百度小程序

npm run dev:swan

#支付宝小程序

npm run dev:alipay

# 字节跳动小程序

npm run dev:tt

# qq小程序

npm run dev:qq

入口组件

import React, { Component } from &＃39;react&＃39;

import &＃39;./app.css&＃39;

class App extends Component {

render () {

// this.props.children 是将要会渲染的页面

return this.props.children

}

}

// 每一个入口组件都必须导出一个 React 组件

export default App

app.config.js配置

// app.config.js

export default {

// 页面路径列表

pages: [

&＃39;pages/index/index&＃39;

],

// 全局的默认窗口表现

window: {

backgroundTextStyle: &＃39;light&＃39;,

navigationBarBackgroundColor: &＃39;#fff&＃39;,

navigationBarTitleText: &＃39;WeChat&＃39;,

navigationBarTextStyle: &＃39;black&＃39;

},

// 底部 tab 栏的表现

tabBar: {}

// 网络超时时间

networkTimeout:{

request: 6000,

connectSocket: 6000,

uploadFile: 6000,

downloadFile: 6000

}

}