从0开始配置Taro2.x

为什么我们要使用Taro，我觉得Taro可以支持RN并且使用React语法规范。

所以我选择了Taro，其实官方文档已经很好的介绍了Taro的基本配置，今天就来结合微信走一遍。

附上当前各种框架的对比

Taro官方文档

image.png

Taro的官方文档 传送门

微信公众号官网传送门

当注册小程序完成后我们就可以开始了 image.png

首先安装taro

yarn global add @tarojs/cli

接下来创建模板

taro init myApp

image.png

微信小程序指令

# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp

打开开发者工具导入，输入appID时可以在这里查询

image.png

成功

image.png

接下来我们来看目录结构具体分析

因为这里选择了redux模板 所以没有看过我redux教程的可以走这里

传送门

当然CSS预处理器选择了Sass

传送门

app.js中具体分析引用

import '@tarojs/async-await' // 引入异步编程可以使用async function
import Taro, { Component } from '@tarojs/taro' //引入组件
import { Provider } from '@tarojs/redux' // 引入Provier从redux

import Index from './pages/index' // 引入首页

import configStore from './store' // 将写好的store引入

const store = configStore()

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  // Provider使用context将store传给子组件
  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }
}

接下来分析store的几行代码

import { createStore, applyMiddleware, compose } from 'redux' // 从redux包中导入各种方法
import thunkMiddleware from 'redux-thunk' // redux-thunk就是redux的中间件，中间件就是你可以在收到请求和返回请求之间做一些操作。
import rootReducer from '../reducers' // 引入reducer


//判断是否引入一些extension
const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose


const middlewares = [
  thunkMiddleware
]

if (process.env.NODE_ENV === 'development') {
  middlewares.push(require('redux-logger').createLogger())
}

//其作用是把一系列的函数，组装生成一个新的函数，并且从后到前，后面参数的执行结果作为其前一个的参数。
const enhancer = composeEnhancers(
//applyMiddleware 最常见的使用场景是无需引用大量代码或依赖类似 Rx 的第三方库实现异步 actions。这种方式可以让你像 dispatch 一般的 actions 那样 dispatch 异步 actions。
  applyMiddleware(...middlewares),
  // other store enhancers if any
)

export default function configStore () {
  const store = createStore(rootReducer, enhancer) // 创建store
  return store
}