和taro一起做SPA 5.taro環(huán)境搭建

這章我們正式開始搭建taro的開發(fā)框架

1.搭建taro腳手架項(xiàng)目

首先,讓我們搭建taro的腳手架,這個(gè)例子里我們假設(shè)項(xiàng)目名稱為wos,則在命令行下運(yùn)行
taro init wos
回答系列問題后,命令行會(huì)自動(dòng)創(chuàng)建以wos為文件夾的腳手架項(xiàng)目.
這個(gè)教程里,是否使用TypeScript選擇了否,css預(yù)處理器選擇了less,模板選擇了redux
如下所示:

 Taro v1.2.4

Taro即將創(chuàng)建一個(gè)新項(xiàng)目!
Need help? Go and open issue: https://github.com/NervJS/taro/issues/new

? 請輸入項(xiàng)目介紹！ wos
? 是否需要使用 TypeScript ？ No
? 請選擇 CSS 預(yù)處理器（Sass/Less/Stylus） Less
? 請選擇模板 Redux 模板

執(zhí)行成功后,可以開始編譯微信小程序:

cd wos
npm run dev:weapp

命令會(huì)執(zhí)行一會(huì)兒,當(dāng)出現(xiàn)

監(jiān)聽文件修改中...

說明編譯完成,可以打開微信小程序開發(fā)工具,新建項(xiàng)目,選擇wos文件夾后,可以看到小程序已經(jīng)可以正常運(yùn)行.

2整合tara-ui

在命令行下輸入
yarn add taro-ui
現(xiàn)在,taro-ui已經(jīng)整合成功,我們可以簡單修改pages/indexs頁面測試一下

+ import {aButton} from 'taro-ui'
  render () {
    return (
      <View className='index'>
      +<AtButton type='primary'>tryme</AtButton>
        <Button className='add_btn' onClick={this.props.add}>+</Button>
        <Button className='dec_btn' onClick={this.props.dec}>-</Button>
        <Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
        <View><Text>{this.props.counter.num}</Text></View>
        <View><Text>Hello, World</Text></View>
      </View>
    )
  }

再次運(yùn)行
npm run dev:weapp
打開微信小程序開發(fā)工具,這時(shí)候你可以看到,首頁里,已經(jīng)多了一個(gè)藍(lán)色的按鈕.
至此,我們已經(jīng)搭建了taro的開發(fā)環(huán)境.

3整合dva框架

下面的步驟,我們將整合dva框架.首先,我們先安裝相關(guān)的依賴庫
yarn add dva-core dva-loading
我們把所有的配置都集中在一起,在src目錄下新建一個(gè)config文件夾,生成index.js,代碼如下:

// 請求連接前綴
export const baseUrl = 'http://localhost:3721';
// 輸出日志信息
export const noConsole = false;

dva會(huì)按照路由多model進(jìn)行分層管理,在taro框架里,我們沒有使用umi,所以需要統(tǒng)一管理model,讓我們在/src目錄下新建models文件夾,生成index.js文件,我們現(xiàn)在還沒有model需要dva管理,因此,先空著.

export default [
]

我們讓dva來管理我們的store,在src目錄下新建util文件夾,生成dva.js文件,代碼如下.

import Taro from '@tarojs/taro'
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 (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {
    global = {};
  }
  if (!global.registered) 
    opt.models.forEach(
      model =>{
        app.model(model);
        console.log(model)
      });

  global.registered = true;
  app.start();
  store = app._store;
  app.getStore = () => store;

  dispatch = store.dispatch;
  app.dispatch = dispatch;
  return app;
}

export default {
  createApp:createApp,
  getDispatch() {
    return app.dispatch
  }
}

讓我們封裝一下http請求你的工具類,同樣,在src/util/目錄下新建request.js文件,代碼如下:

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) => {
    console.log("res:",res);
    const { statusCode, data } = res;
    if (statusCode >= 200 && statusCode < 300) {
      if (!noConsole) {
        console.log(`${new Date().toLocaleString()}【 M=${options.url} 】【接口響應(yīng)：】`,res.data);
      }
      if (data.status !== 'ok') {
        Taro.showToast({
          title: `${res.data.error.message}~` || res.data.error.code,
          icon: 'none',
          mask: true,
        });
        console.error(`${res.data.error.message}~` || res.data.error.code);
      }
      return data;
    } else {
      throw new Error(`網(wǎng)絡(luò)請求錯(cuò)誤，狀態(tài)碼${statusCode}`);
    }
  })
}

典型的dva的開發(fā)目錄如下:

每個(gè)文件件都需要4個(gè)文件,太復(fù)雜,所以我們在根目錄下增加一個(gè)腳本template.js,自動(dòng)生成文件:

/**
 * pages模版快速生成腳本,執(zhí)行命令 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 (
      <View className="${dirName}-page">
        ${dirName}
      </View>
    )
  }
}
`;

// 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 => 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}已創(chuàng)建,請手動(dòng)增加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);

然后,在package.json文件中的scripts下增加一行
"g":"node template"
然后運(yùn)行:
npm run g home
可以看到,在pages目錄下新增加了 home文件夾以及下面的4個(gè)文件.
至此,我們完成了dva項(xiàng)目的整合,后面,我們將開始完善代碼.

4整合mock

首先，讓我們加載mock依賴庫
yarn add mocker-api mockjs --dev
在項(xiàng)目根目錄下新建 mock文件夾,新建index.js文件。輸入以下代碼：

const delay = require('mocker-api/utils/delay');
const mockjs=require('mockjs');
const data= {
    'GET /api/user': {
        id: 1,
        username: 'kenny',
        sex: 6
    },  
    'GET /api/hi':(req,res)=>{
        res.json(
            {
                id:1,
                //query 方法獲取Get參數(shù),如 /api/hi?name=tony
                username:req.query["name"],
            }
        )
    },
    //可以直接使用mockjs生成mock數(shù)據(jù)
    'GET /api/mock':mockjs.mock({
        'list|10-100':1,
    })
}
//使用delay方法可以延遲返回?cái)?shù)據(jù)
module.exports=delay(data,1000);

修改package.json文件，在scripts下新增一行：

"mock": "mocker ./mock"

運(yùn)行
npm mock
返回

> wos@1.0.0 mock D:\study\taro\wos
> mocker ./mock

> Server Listening at Local: http://localhost:3721/
>           On Your Network: http://192.168.60.1:3721/

我們可以開始在瀏覽器中測試，輸入 http://localhost:3721/api/user，1秒后返回mock數(shù)據(jù):

{"id":1,"username":"kenny","sex":6}

輸入 http://localhost:3721/api/hi/name='tony',1秒后返回mock數(shù)據(jù):

{"id":1,"username":"tony"}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • dva.js 簡介 dva 是阿里前端架構(gòu)師 sorrycc 帶 team 研發(fā)的一套輕量級前端框架，其目的是盡量...
    那顆星_fcaf閱讀 3,848評論 0贊 24
  • 最近寫一個(gè)微信小程序的項(xiàng)目，由于是協(xié)同開發(fā)，前期的搭建工作由另一個(gè)妹子完成，現(xiàn)在項(xiàng)目階段一完成了，為了備忘回顧，做...
    陳小生_1017閱讀 24,845評論 17贊 42
  • 一、開發(fā)環(huán)境 首先，請安裝 NodeJS。NodeJS 是一個(gè) JS 執(zhí)行環(huán)境，umi 基于 JS 編寫，并且需要...
    Lia代碼豬崽閱讀 48,685評論 7贊 44
  • 初始化 安裝 dva-cli 用于初始化項(xiàng)目： 創(chuàng)建項(xiàng)目目錄，并進(jìn)入該目錄： 初始化項(xiàng)目： 然后運(yùn)行 npm st...
    Paranoid_K閱讀 121,330評論 11贊 104
  • 掐指一算，今年只剩下100天了。 像往年一樣，今年決定繼續(xù)開啟每日一（ji）燃（tang），大道至簡嘛，道理都懂，...
    從容小記閱讀 296評論 0贊 0

友情鏈接更多精彩內(nèi)容