和taro一起做SPA 5.taro环境搭建

这章我们正式开始搭建taro的开发框架

1.搭建taro脚手架项目

首先,让我们搭建taro的脚手架,这个例子里我们假设项目名称为wos,则在命令行下运行
taro init wos
回答系列问题后,命令行会自动创建以wos为文件夹的脚手架项目.
这个教程里,是否使用TypeScript选择了否,css预处理器选择了less,模板选择了redux
如下所示:

 Taro v1.2.4

Taro即将创建一个新项目!
Need help? Go and open issue: https://github.com/NervJS/taro/issues/new

? 请输入项目介绍！ wos
? 是否需要使用 TypeScript ？ No
? 请选择 CSS 预处理器（Sass/Less/Stylus） Less
? 请选择模板 Redux 模板

执行成功后,可以开始编译微信小程序:

cd wos
npm run dev:weapp

命令会执行一会儿,当出现

监听文件修改中...

说明编译完成,可以打开微信小程序开发工具,新建项目,选择wos文件夹后,可以看到小程序已经可以正常运行.

2整合tara-ui

在命令行下输入
yarn add taro-ui
现在,taro-ui已经整合成功,我们可以简单修改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>
    )
  }

再次运行
npm run dev:weapp
打开微信小程序开发工具,这时候你可以看到,首页里,已经多了一个蓝色的按钮.
至此,我们已经搭建了taro的开发环境.

3整合dva框架

下面的步骤,我们将整合dva框架.首先,我们先安装相关的依赖库
yarn add dva-core dva-loading
我们把所有的配置都集中在一起,在src目录下新建一个config文件夹,生成index.js,代码如下:

// 请求连接前缀
export const baseUrl = 'http://localhost:3721';
// 输出日志信息
export const noConsole = false;

dva会按照路由多model进行分层管理,在taro框架里,我们没有使用umi,所以需要统一管理model,让我们在/src目录下新建models文件夹,生成index.js文件,我们现在还没有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} 】【接口响应：】`,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(`网络请求错误，状态码${statusCode}`);
    }
  })
}

典型的dva的开发目录如下:

每个文件件都需要4个文件,太复杂,所以我们在根目录下增加一个脚本template.js,自动生成文件:

/**
 * 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 (
      <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}已创建,请手动增加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"
然后运行:
npm run g home
可以看到,在pages目录下新增加了 home文件夹以及下面的4个文件.
至此,我们完成了dva项目的整合,后面,我们将开始完善代码.

4整合mock

首先，让我们加载mock依赖库
yarn add mocker-api mockjs --dev
在项目根目录下新建 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参数,如 /api/hi?name=tony
                username:req.query["name"],
            }
        )
    },
    //可以直接使用mockjs生成mock数据
    'GET /api/mock':mockjs.mock({
        'list|10-100':1,
    })
}
//使用delay方法可以延迟返回数据
module.exports=delay(data,1000);

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

"mock": "mocker ./mock"

运行
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数据:

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

输入 http://localhost:3721/api/hi/name='tony',1秒后返回mock数据:

{"id":1,"username":"tony"}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,783评论 5赞 472
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,396评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,834评论 0赞 333
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,036评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,035评论 5赞 362
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,242评论 1赞 278
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,727评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,376评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,508评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,415评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,463评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,140评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,734评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,809评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,028评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,521评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,119评论 2赞 341

推荐阅读更多精彩内容

  • dva.js 上手
    dva.js 简介 dva 是阿里前端架构师 sorrycc 带 team 研发的一套轻量级前端框架，其目的是尽量...
    那颗星_fcaf阅读 3,651评论 0赞 24
  • Taro + dva 使用小结（搭建配置过程）
    最近写一个微信小程序的项目，由于是协同开发，前期的搭建工作由另一个妹子完成，现在项目阶段一完成了，为了备忘回顾，做...
    陈小生_1017阅读 24,303评论 17赞 42
  • 使用umi脚手架来初始化React项目
    一、开发环境 首先，请安装 NodeJS。NodeJS 是一个 JS 执行环境，umi 基于 JS 编写，并且需要...
    Lia代码猪崽阅读 48,367评论 7赞 44
  • dva.js 上手
    初始化 安装 dva-cli 用于初始化项目： 创建项目目录，并进入该目录： 初始化项目： 然后运行 npm st...
    Paranoid_K阅读 120,767评论 11赞 104
  • 本年度最后100天Flag🚩
    掐指一算，今年只剩下100天了。 像往年一样，今年决定继续开启每日一（ji）燃（tang），大道至简嘛，道理都懂，...
    从容小記阅读 240评论 0赞 0