Taro从0到1完成一个小程序使用Taro开始自己的第一个小程序在本文中，我们将会以一个具体的小程序为例，带领大家从零

使用Taro开始自己的第一个小程序

在本文中，我们将会以一个具体的小程序为例，带领大家从零到一完成一个小程序的开发流程，并将这个小程序上传到微信公众平台进行小程序提审与上架操作。

1.在微信开发平台申请小程序账号（微信公众平台）

第一步：到微信公众平台注册小程序

第二步：注册好之后登录到小程序管理中心（完善小程序信息，完善小程序类目）

第三步：找到小程序appid（点击小程序信息，基本设置的最下面有账号信息AppID(小程序ID) ）

2.使用Taro初始化项目

Taro官方文档地址：taro-docs.jd.com/taro/docs/

第一步：全局安装npm install -g @tarojs/cli 并且安装微信开发者工具

第二步：初始化你的项目taro init myapp

├── dist                        编译结果目录
|
├── config                      项目编译配置目录
|   ├── index.js                默认配置
|   ├── dev.js                  开发环境配置
|   ├── test.js                	测试环境配置
|   └── prod.js                 生产环境配置
|
├── src                         源码目录
|   ├── pages                   页面文件目录
|   |   └── index               index 页面目录
|   |       ├── index.js        index 页面逻辑
|   |       ├── index.module.scss index 页面样式(css module)
|   |       └── index.config.js index 页面配置
|   |
|   ├── app.js                  项目入口文件
|   ├── app.css                 项目总通用样式
|   └── app.config.js           项目入口配置
|
├── project.config.json         微信小程序项目配置 project.config.json
|
├── babel.config.js             Babel 配置
├── .eslintrc                   ESLint 配置
├── .gitignore                  git提交忽略文件 配置
|
└── package.json

第三步：安装依赖npm install

第四步：css编译处理、添加appid、outputRoot（输出目录文件夹）

在config文件夹中的index.js更改或者添加这些配置

import path from 'path';
const config = {
  outputRoot: `dist/${process.env.NODE_ENV}/${process.env.TARO_ENV}`,
  alias: {
    '@/components': path.resolve(__dirname, '..', 'src/components'),
    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
    '@/apis': path.resolve(__dirname, '..', 'src/apis'),
  },
  mini: {
    enableExtract:true,
    miniCssExtractPluginOption: {
      //忽略css文件引入顺序
      ignoreOrder: true
    },
    postcss: {
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },

将outputRoot更改为动态配置的目录，这样能更加方便的区分不同环境的打包文件。
设置alias，方便引入文件。
忽略css文件引入顺序。
使用css modules功能，避免css文件打包之后互相影响。
在小程序后台管理系统中找到appid添加进project.config.js。

第五步：编译运行

使用 Taro 的 build 命令可以把 Taro 代码编译成不同端的代码，然后在对应的开发工具中查看效果。

Taro 编译分为 dev 和 build 模式：

dev 模式（增加 --watch 参数） 将会监听文件修改。
build 模式（去掉 --watch 参数） 将不会监听文件修改，并会对代码进行压缩打包。
dev 模式生成的文件较大，设置环境变量 NODE_ENV 为 production 可以开启压缩，方便预览，但编译速度会下降。
如果你需要更改dev环境的NODE_ENV的默认值或者添加另外一个环境，那么你需要安装 corss-env。

"dev:weapp": "cross-env NODE_ENV=dev taro build --type weapp --watch",
"test:weapp": "cross-env NODE_ENV=dev taro build --type weapp --watch",
"build:weapp": "cross-env NODE_ENV=prod taro build --type weapp",