关于前端:快速搭建Taro项目

装置 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.js
export 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 文档地址