装置Taro命令行工具

npm i -g @tarojs/cli# 或cnpm install -g @tarojs/cli

装置实现后在终端输出taro命令，查看是否装置胜利

创立我的项目

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 \# 页面组件，如果是 Vue 我的项目，此文件为 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 'react'import './app.css'class App extends Component {    render () {        // this.props.children 是将要会渲染的页面        return this.props.children    }}// 每一个入口组件都必须导出一个 React 组件export default App

app.config.js配置

// app.config.jsexport default {    // 页面门路列表    pages: [        'pages/index/index'    ],    // 全局的默认窗口体现    window: {        backgroundTextStyle: 'light',        navigationBarBackgroundColor: '#fff',        navigationBarTitleText: 'WeChat',        navigationBarTextStyle: 'black'    },    // 底部 tab 栏的体现    tabBar: {}    // 网络超时工夫    networkTimeout:{        request: 6000,        connectSocket: 6000,        uploadFile: 6000,        downloadFile: 6000    }}

Taro文档地址