taro + taro-ui

Cli Tool Installation

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

View taro version information

npm info @tarojs/cli
Copy the code

Project initialization

$ taro init myApp
Copy the code

NPM 5.2+ can also create template projects using NPX without a global installation:

$ npx @tarojs/cli init myApp
Copy the code

Run the project

$NPM script $NPM run dev: eap $NPM run $taro build --type eappellate $eappellate $eappellate $eappellate $eappellate $eappellate $eappellate $eappellate $set NODE_ENV=production && taro build --type repeals p --watch $NPX taro build --type repeals p # watch # Windows $ NODE_ENV=production taro build --type weapp --watch # MacCopy the code

dva

Dva is a data flow solution based on Redux and Redux-Saga. In order to simplify the development experience, DVA also has additional built-in React-Router and FETCH, so it can also be understood as a lightweight application framework.

Install redux and React-redux dependency packages

npm install --save react-redux npm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger # CNPM or other installation methods are recommendedCopy the code

Install the dva

NPM install --save dvA-core dva-loading dVA-core: dVa-loading dVa-core: dVa-loading CNPM or other installation methods are recommendedCopy the code

Configure DVA in the project

1. Rename the SRC /app.ts file to SRC /app. TSX and modify it as follows:

import React, { Component } from 'react' import { Provider } from 'react-redux' import dva from './utils/dva'; import models from './models'; import './app.scss' 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

2. Create the utils folder in the SRC folder and create dva.ts and request.ts in utils

The contents of the dva.ts file are as follows:

import { create } from "dva-core"; import { createLogger } from "redux-logger"; import createLoading from "dva-loading"; let app: any; let store: any; let dispatch: any; let registered: any; Function createApp(opt) {// redux log opt.onAction = [] if (opt.enablelog) {opt.onAction.push(createLogger())} app = Create (opt) app.use(createLoading()) // Inject model if (! registered) { opt.models.forEach(model => app.model(model)); } registered = true; App.start () // Set store store = app._store; app.getStore = () => store; app.use({ onError(err: any) { console.log(err); }}) // Set dispatch = store.dispatch; app.dispatch = dispatch; return app; } export default { createApp, getDispatch() { return app.dispatch } };Copy the code

The contents of the request.ts file are as follows:

import Taro from '@tarojs/taro'; import { baseUrl, noConsole } from '.. /config'; const request_data = { platform: 'wap', rent_mode: 2, }; export default (options = { method: 'GET', data: {} }) => { if (! NoConsole) {console.log(' ${new Date().tolocaleString ()} [M=${options.url}] P=${json.stringify (options.data)} '); } return Taro.request({ url: baseUrl + options.url, data: { ... request_data, ... options.data, }, header: { 'Content-Type': 'application/json', }, method: options.method.toUpperCase(), }).then(res => { const { statusCode, data } = res; if (statusCode >= 200 && statusCode < 300) { if (! NoConsole) {console.log(' ${new Date().tolocaleString ()} [M=${options.url}] [interface response:], res.data]; } if (data.status ! == 'ok') { Taro.showToast({ title: `${res.data.error.message}~` || res.data.error.code, icon: 'none', mask: true, }); } return data; } else {throw new Error(' network request Error, statusCode ${statusCode} '); }}); };Copy the code

3. Create the config folder in the project SRC directory and create the index.ts file

Export const baseUrl = 'https://ms-api.caibowen.net'; Export const noConsole = false;Copy the code

4. Create the models folder under SRC and create index.ts under models

The index.ts file is used to register the mode of all page components in the current project as follows:

import index from '.. /pages/index/model' export default [index]Copy the code

5, create model. Ts file in SRC /page/index

The later development project is that each page component needs to contain a mode.ts file for asynchronous data request and data flow management of the current page.

import * as homeApi from './service'; export default { namespace: 'home', state: { banner: [], brands: [], products_list: [], page: 1, }, effects: { *load(_, { call, put }) { const { status, data } = yield call(homeApi.homepage, {}); if (status === 'ok') { yield put({ type: 'save', payload: { banner: data.banner, brands: data.brands, }, }); } } }, reducers: { save(state, { payload }) { return { ... state, ... payload }; ,}}};Copy the code

6. Create the service.ts file in the SRC /page/index directory

The content of the document is as follows:

import Request from '.. /.. /utils/request'; export const homepage = data => Request({ url: '/homepage-v3', method: 'GET', data, });Copy the code

7. In the SRC /page/index directory, modify the index. TSX content as follows

import { Component } from 'react' import { View, Text } from '@tarojs/components' import { AtButton } from 'taro-ui' import "taro-ui/dist/style/components/button.scss" // import './index.scss' import {connect} from 'react-redux' @connect(({home}) => ({... home })) export default class Index extends Component { componentWillMount() { } componentDidMount() { debugger this.props.dispatch({ type: 'home/load', }); } componentWillUnmount() { } componentDidShow() { } componentDidHide() { } render() { return ( <View className='index'> <Text>Hello world! </Text> <AtButton type='primary'>I need Taro UI</AtButton> <Text>Taro UI support Vue </Text> <AtButton type='primary' circle> </Text> <AtButton type='secondary' circle> to </AtButton> </View>)}}Copy the code

The end of the

Learn react record

Complete project structure

├─ ├─ dev.js # ├─ ├.js # ├.js # ├─ dev.js # Default configuration │ └ ─ ─ the prod. Js # production pattern configuration ├ ─ ─ package. The json # Node. Js manifest ├ ─ ─ dist # package directory ├ ─ ─ project. Config. A small program that json # project configuration ├ ─ ─ SRC # source directory │ ├─ ├─ Config /index.ts # (new) Interface Parameters │ ├─ Models /index.ts # (new) Global Models │ ├─ Utils # (new) │ ├─ Dva.ts # (new) dva configuration │ │ └ ─ ─ request. Ts # (new) interface configuration │ ├ ─ ─ app. Config. Js # global configuration │ ├ ─ ─ app. # SCSS global CSS │ ├ ─ ─ app. The TSX # entrance components │ ├ ─ ─ Index.html # H5 entrance HTML │ └ ─ ─ pages # page components │ └ ─ ─ index │ ├ ─ ─ index. The config, js # page configuration │ ├ ─ ─ service. The ts # (new) page interface │ ├ ─ ─ │ ├─ ├─ ├─ ├─ ├.tsx #Copy the code

Making address:

Github.com/yunluojun/T…

Article address:

Juejin. Cn/post / 698139…