taro+taro-ui+dvd a

タタリの取り付けと使用
Taro開発ツールのインストール@tarojs/cli
npmまたはyarnでグローバルにインストールするか、npxを直接使用します.

$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli

コマンドを使用してテンプレート項目を作成します.

$ taro init myApp

プロジェクトディレクトリの開発を開始すると、ミニプレビューモードまたはh 5プレビューモードが選択できます.マイクロクレジットのプレビューモードを使用すると、自分でマイクロクレジットの開発者ツールをダウンロードして開けて、プレビュー項目のルートディレクトリを選択します.
WeChatアプレットコンパイルプレビューモード

# npm script
$ npm run dev:weapp
#       
$ taro build --type weapp --watch
# npx        
$ npx taro build --type weapp --watch

H 5編集プレビューモード

# npm script
$ npm run dev:h5
#       
$ taro build --type h5 --watch
# npx        
$ npx taro build --type h5 --watch

RN編集プレビューモード

# npm script
$ npm run dev:rn
#       
$ taro build --type rn --watch
# npx        
$ npx taro build --type rn --watch

もちろんこの段階では大まかな骨組みがありますが、生産開発としては不十分です.

$ npm i dva-core dva-loading --save

新規dvd a.js

import { create } from 'dva-core';
import { createLogger } from 'redux-logger';
import createLoading from 'dva-loading';

let app;
let store;
let dispatch;

function createApp(opt) {
  // redux  
  // opt.onAction = [createLogger()];
  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;
  }
}

インポートします.

import dva from './utils/dva'
const dvaApp = dva.createApp({
  initialState: {},
  models: models,
});
const store = dvaApp.getStore();

dvdは統合されました.これからはrequestネットワークの要求をパッケージ化しましょう.

import Taro from '@tarojs/taro';
import { baseUrl, noConsole } from '../config';

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: options.data,
    headers: {
      '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} 】【    ：】`,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(`      ，   ${statusCode}`);
    }
  })
}

はい、Pagesページの開発を準備するべきです.私はumiのディレクトリ構造が好きです.

  pages                  //       
    └── home
        ├── index.js           //     
        ├── index.scss         //     
        ├── model.js           //   models └── service.css //   api 

一つのpageは4つのファイルを生成しますか?スクリプトで自動的に生成してもらえますか?じゃ、一つ書きましょう

 /**
 * pages        ,     npm run tep `   `
 */

const fs = require('fs');

const dirName = process.argv[2];

if (!dirName) {
  console.log('         ！');
  console.log('  ：npm run tep test');
  process.exit(0);
}

//     
const indexTep = `import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './index.scss';

@connect(({${dirName}}) => ({
  ...${dirName},
}))
export default class ${titleCase(dirName)} extends Component {
  config = {
    navigationBarTitleText: '${dirName}',
  };

  componentDidMount = () => {

  };

  render() {
    return (
      
        ${dirName}
      
    )
  }
}
`;

// scss    
const scssTep = `@import "../../styles/mixin";

.${dirName}-page {
  @include wh(100%, 100%);
}
`;

// model    
const modelTep = `import * as ${dirName}Api from './service';

export default {
  namespace: '${dirName}',
  state: {

  },

  effects: {
    * effectsDemo(_, { call, put }) {
      const { status, data } = yield call(${dirName}Api.demo, {});
      if (status === 'ok') {
        yield put({ type: 'save',
          payload: {
            topData: data,
          } });
      }
    },
  },

  reducers: {
    save(state, { payload }) {
      return { ...state, ...payload };
    },
  },

};
`;


// service    
const serviceTep = `import Request from '../../utils/request';

export const demo = (data) => {
  return Request({
    url: '  ',
    method: 'POST',
    data,
  });
};
`;



fs.mkdirSync(`./src/pages/${dirName}`); // mkdir $1
process.chdir(`./src/pages/${dirName}`); // cd $1

fs.writeFileSync('index.js', indexTep);
fs.writeFileSync('index.scss', scssTep);
fs.writeFileSync('model.js', modelTep);
fs.writeFileSync('service.js', serviceTep);

console.log(`  ${dirName}   ,     models`);

function titleCase(str) {
  const array = str.toLowerCase().split(' ');
  for (let i = 0; i < array.length; i++) {
    array[i] = array[i][0].toUpperCase() + array[i].substring(1, array[i].length);
  }
  const string = array.join(' ');
  return string;
}

process.exit(0);

今は楽しい開発が行われます.
ディレクトリ構造

├── .temp                  // H5      
├── .rn_temp               // RN      
├── dist                   //          
├── config                 // Taro     │ ├── dev.js //       │ ├── index.js //      │ └── prod.js //       ├── screenshots //     ，        ├── src //      │ ├── components //    │ ├── config //        │ ├── images //      │ ├── models // redux models │ ├── pages //        │ │ └── home │ │ ├── index.js //      │ │ ├── index.scss //      │ │ ├── model.js //   models │ │ └── service.js //   api │ ├── styles //      │ ├── utils //       │ ├── app.js //      │ └── index.html ├── package.json └── template.js // pages        ,     npm run tep `   `

...