Create an Taro template project

Install @tarojs/ CLI globally using NPM or YARN

$yarn global add @tarojs/ CLI # OR install CNPM, $CNPM install -g@tarojs/CLICopy the code

View information about all versions of Taro

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 initialization project

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

Compile operation

Run the NPM run dev: Retry p command to compile the app. After compiling the app, download and run the wechat developer tools, and then select the project root directory to preview the app.

The above process can be seen on the Taro official website.

Configuration dva

Install React-redux. There are many blogs about installing tarojs/redux, but the package is no longer available in taro3.x, so install react-redux instead.

cnpm i --save react-redux
Copy the code

Install DVA-core and DVA-loading

cnpm i --save dva-core dva-loading
Copy the code

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

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

Users is the model created in the project

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

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

// 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;
  }
}
Copy the code

Create an App store using the method returned by dva.js in the entry file app.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 render () {return <Provider store={store}>{this.props.children}</Provider> } } export default AppCopy the code

At this point, dVA configuration is complete

Verify that the configured DVA is available by using connect to the model and component in Pages /index/index.jsx and printing 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> ) } }Copy the code

This. Props has a state in the model.

Introduction of taro – the UI

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

There are three ways to introduce component styles:

  • Importing styles globally (in JS), importing all styles in the entry file:
import 'taro-ui/dist/style/index.scss'
Copy the code
  • Global Import styles (in CSS)
@import "~taro-ui/dist/style/index.scss";
Copy the code
  • Import required component styles as needed in page styles or global styles
@import "~taro-ui/dist/style/components/button.scss";
Copy the code
// 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 render () {return <Provider store={store}>{this.props.children}</Provider> } } export default AppCopy the code
// 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: 'user'} ]} /> </View> ) } } export default Index;Copy the code

The effect is as follows: