Create the Taro template project

You need to install @tarojs/cli globally with NPM or yarn

$NPM install -g @tarojs/ CLI # OR yarn $yarn global add @tarojs/ CLI # OR NPM install -g @tarojs/ CLI # CLI $CNPM install -g@tarojs/CLI

View the full Taro version information

You can use NPM info@tarojs /cli to view Taro version information, where you can see the latest version

Project initialization

Use Taro init myApp to create an initial project

NPM 5.2+ can also create template projects without global installation using npx@tarojs /cli init myApp

Compile operation

Compile with NPM run dev: ammunition command, download and open the WeChat developer tool, and select the project root directory for preview.

The above process can be seen on the TARO website.

Configuration dva

Install React – Redux. There are many blogs that say install Tarojs/Redux, but the package is no longer available in Taro3. x.

cnpm i --save react-redux

Install DVA-core and DVA-loading

cnpm i --save dva-core dva-loading

DVA needs to mount all the models, so create the models directory in the SRC directory and return all the models created in the project in the index.js directory under the models directory

// src/models/index.js import users from '.. /pages/index/model' export default [ users, ];

The model created by users for the project

// src/pages/index/model export default { namespace: 'users', state: { title: 'Hello World' }, effects: {}, reducers: { save(state, { payload }) { return { ... state, ... payload }; ,}}};

Create the utils directory in SRC and create the dva.js file in the utils directory

// src/dva.js
import { create } from 'dva-core';
import createLoading from 'dva-loading';

let app;
let store;
let dispatch;

function createApp(opt){
  app = create(opt);
  app.use(createLoading({}));
  if(!global.registered){
    opt.models.forEach(model => app.model(model));
  }
  global.registered = true;
  app.start();
  store = app._store;
  app.getStore = () => store;
  dispatch = store.dispatch;
  app.dispatch = dispatch;
  return app;
}
export default {
  createApp,
  getDispatch: () => {
    return app.dispatch;
  }
}

Js, and mount the store into the Provider container

// src/app.js import { Component } from 'react' import dva from './utils/dva' import { Provider } from 'react-redux' import models from './models' import './app.less' const dvaApp = dva.createApp({ initialState: {}, models }) const store = dvaApp.getStore(); class App extends Component { componentDidMount () {} componentDidShow () {} componentDidHide () {} ComponentDidCatchError () {} // this.props. Children is the page render () {return <Provider store={store}>{this.props.children}</Provider> } } export default App

At this point, the configuration of the DVA is complete

Verify that the configured DVA is available, use connect to the model and component in pages/index/index.jsx, and print this.props

// pages/index/index.jsx import { Component } from 'react' import { View, Text } from '@tarojs/components' import { connect } from 'react-redux' import './index.less' @connect(({users})=>({ users })) export default class Index extends Component { componentWillMount () { } componentDidMount () { } componentWillUnmount () { } componentDidShow () { } componentDidHide () { } render () { console.log(this.props); return ( <View className='index'> <Text>Hello world! </Text> </View> ) } }



This. Props contains state in model. Connection successful!

Introduction of taro – the UI

Install taro-ui using CNPM I –save [email protected]

There are three ways to introduce component styles:

  • Introducing styles globally (in JS). Introducing all styles in the entry file:

    import 'taro-ui/dist/style/index.scss'

  • Introducing styles globally (in CSS)

    @import "~taro-ui/dist/style/index.scss";

  • Import on demand, importing the required component styles in the page style or global style

    @import "~taro-ui/dist/style/components/button.scss";
// src/app.js import { Component } from 'react' import { Provider } from 'react-redux' import 'taro-ui/dist/style/index.scss' import dva from './utils/dva' import models from './models' import './app.less' const dvaApp = dva.createApp({ initialState: {}, models }) const store = dvaApp.getStore(); class App extends Component { componentDidMount () {} componentDidShow () {} componentDidHide () {} ComponentDidCatchError () {} // this.props. Children is the page render () {return <Provider store={store}>{this.props.children}</Provider> } } export default App
// src/pages/index/index.jsx import { Component } from 'react' import { View, Text } from '@tarojs/components' import { AtTabBar } from 'taro-ui' import { connect } from 'react-redux' import './index.less' @connect(({users})=>({ users })) class Index extends Component { componentWillMount () { } componentDidMount () { } componentWillUnmount () { } componentDidShow () { } componentDidHide () { } render () { console.log(this.props); return ( <View className='index'> <Text>Hello world! </Text> <AtTabBar fixed tabList={[{title: 'home', iconType: 'home'}, {title: 'my ', iconType: 'home'}, {title:' my ', iconType: 'home'}, 'user'} ]} /> </View> ) } } export default Index;

The effect is as follows: