我是这样用Taro搭建小程序的架子的，你呢？

前言: 使用Taro开发过几个微信小程序， 现在分享一篇如何用Taro构建一个基础架子

如果之前没有了解过Taro的, 可以先去Taro官网看看，下面我们一起来构建一个开发架子

1. Taro安装和初始化模版项目阶段

// 安装 （有些需要添加sudo）
cnpm install -g @tarojs/cli

使用命令创建模版项目

taro init taroShelf
? 请输入项目介绍!  taroShelf一个基础taro开发小程序架构
？是否需要使用 TypeScript?  No
? 请选座CSS预处理器 (Sass/Less/Stylus)  Less
? 请选择模版  默认模版

// 创建完模版项目，进入taroShelf
cnpm i

// 安装完依赖，运行
npm run dev:weapp

进行如上操作，我们就已经成功用Taro初始化了一个项目，这时候根目录下有一个dist文件夹，我们通过微信开发工具打开它就可以看到一个hello world页面。

2. 改造阶段

1. 首先看一下初始化的目录结构

├── dist                   编译结果目录
├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── pages              页面文件目录
|   |   ├── index          index 页面目录
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json

现在我们进行目录扩展，我们需要一个components文件夹放置我们的组件，需要一个utils放置一直工具库，例如：发起请求的request

2. 在utils下添加一个wxRequest.js，解决请求问题

import Taro from '@tarojs/taro';
// UID来存储当前请求的信息, 解决相同请求触发两次的问题
const UID = {};
const wxRequest = async (params = {}, url) => {
  params = params ? params: {};
  let data = params.query || {};
  let header = {
    'Content-Type': 'application/json; charset=utf-8'
  }
  if (params.header) {
    header = Object.assign(header, params.header)
  }
  let uidKey = null;
  try {
    uidKey = `${url}: ${JSON.stringify(params)}`;
  } catch(e){}

  if (UID[uidKey]) {
    return console.log('阻止了相同的请求触发两次', uidKey);
  } else {
    UID[uidKey] = true;
  }

  let res = await Taro.request({
    url: url,
    method: params.method || 'GET',
    data: data,
    header: header
  });

  // 请求回来, 删除当前UID中存储的数据
  if (UID[uidKey]) delete UID[uidKey];

  let response = res.data ? res.data: res;

  return response;
};

module.exports = {
  wxRequest
}

这里添加一个UID的判断，避免相同的请求重复发送的问题，当然这里并不能解决按钮多次触发请求问题（当请求返回特别快的时候），后面会提供解决按钮多次触发请求问题。

3. 添加配置文件区分测试环境和生产环境的host、CDN，在config文件夹下添加myConfig.js

module.exports = {
  prod: {
    defineConstants: {
      _host: '',
      _cdn: ''
    },
  },
  dev: {
    defineConstants: {
      _host: '',
      _cdn: ''
    }
  }
}

通过这个配置文件区别开发环境和生产环境的请求地址和cdn，这里还需要修改一下dev.js和prod.js：

const naseConfig = require('./nase.config.js');
module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {
    ...myConfig.dev.defineConstants
  },
  weapp: {},
  h5: {}
}

prod.js的修改类似

5. 添加一个API文件夹在里面添加一个index.js，所有的请求放置在里面统一管理

import { wxRequest } from '@/utils/wxRequest.js';
export function getList() {
  return wxRequest({}, `${_api}/list`);
}

如上我们就可以在页面倒入getList进行列表的请求，到这里我们已经基本搭建完成一个项目的基础环境。

这里说一些如何解决快速点击按钮，触发相同请求问题

方案1. 一般的解决方法，disabled按钮的方案，这种方式太高耦合，侵入式控制。
方案2. 通过一个防抖动函数解决这个问题，好处： 不需要改变按钮的状态，把状态嵌入到业务代码中