这次令人愉快的公(移)费(动)出(办)游(公)快接近了尾声。委实说整个移动办公的过程中我们开发部门是没有什么产出的,都在体验武夷山的好风光了,晚上回来之后象征性的打个外勤卡就开始打游戏的打游戏睡觉的睡觉(……)。但是产品和策划的同事还是尽职尽责的对接下来的产品路线做出了规划,顺便来找我聊了聊天。
具体聊的内容就略过不表了,大概就是我们未来的产品要从原生的 App 走向 小程序 + App 的路线,所以就需要我们定下来关于小程序开发的一系列技术栈问题。
很久之前在小程序刚刚面世的时候接触过小程序的文档,因为当时对前端的接触还不算多,所以没有很认真的去实践过从 0 开始构建一个小程序。这次拿到小程序的开发任务之后,我去看了一下小程序原生的语法和 IDE 之类的,着实是感觉到有些蛋疼的:的确是有太多的限制和兼容性问题,部分 CSS 3 的语法不能很好的兼容,第三方库引入不算方便,蹩脚的事件处理等等。让我感觉一夜回到了 IE 6 时代的开发。
不过我依稀记起来了之前在哪里看过京东 Aotu 团队发布的 Taro 框架,可以方便的用 React 的语法去写小程序。不过当时还处于很早起的测试阶段。
仔细去了解了一下 Taro 框架目前的成果,还是很棒的。已经有很多线上的小程序使用 Taro 框架,Taro 开发团队的代码迭代和 Bug 修复还是很积极的,产品社区也不错,很多用户在为 Taro 的开发做贡献。我感觉就是你了——Taro!
Taro 对我来说最大的几个优点是:
当然,目前还是有一些限制的地方:
不过这些限制都是有相应的规避办法的,并且 Taro 未来的开发中应该也会慢慢的消除这些限制。至少目前来看,Taro 在我们的项目中是可以完美使用的。
接下来要开始实践一下 Taro 的应用。首先规划下来的技术栈是:TypeScript + Taro + Dva,引入 TypeScript 的目的是在项目开发中尽可能地规避一些错误和规范开发,而使用 Dva 进行状态管理完全是在 Web 端的项目中用习惯了 Dva,Taro 官方推荐的状态管理是 Redux 和 MobX,有兴趣的可以自行去了解一下相关文档。
在项目中引入 Dva:
dva-core
和 dva-loading
两个包即可。再安装 redux-logger
。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) {
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));
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 { Provider } from '@tarojs/redux';
import dva from './Utils/Dva'; // 刚才写的帮助类
创建一个 Dva 和 Dva Store 的实例:
const dvaApp = dva.createApp({
initialState: {},
models: models,
});
const store = dvaApp.getStore();
然后将根组件用 Provider 包裹起来并传入 Dva Store:
<Provider store={store}>
<Index />
</Provider>
实际开发过程中遇到的坑:
微信开发者工具有时候会提醒 找不到 dva-core 或者其他什么乱七八糟的包:
最后附上我做的示例项目,可以开箱即用开发 Taro 项目:
其中有详细的项目介绍和编码规范可以供参考。