前言: 使用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. 改造阶段
- 首先看一下初始化的目录结构
├── 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
- 在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的判断，避免相同的请求重复发送的问题，当然这里并不能解决按钮多次触发请求问题（当请求返回特别快的时候），后面会提供解决按钮多次触发请求问题。
- 添加配置文件区分测试环境和生产环境的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的修改类似
- 添加一个API文件夹在里面添加一个index.js，所有的请求放置在里面统一管理
import { wxRequest } from '@/utils/wxRequest.js';
export function getList() {
return wxRequest({}, `${_api}/list`);
}
如上我们就可以在页面倒入getList进行列表的请求，到这里我们已经基本搭建完成一个项目的基础环境。
这里说一些如何解决快速点击按钮，触发相同请求问题
方案1. 一般的解决方法，disabled按钮的方案，这种方式太高耦合，侵入式控制。
方案2. 通过一个防抖动函数解决这个问题，好处： 不需要改变按钮的状态，把状态嵌入到业务代码中
网友评论