公司开发过几个微信小程序，百度小程序也做过但是没深入做。虽然不是专职前端，但是前端技术还是有必要了解下。
正好taro更新了新版本，就拿qq小程序练下手。

环境准备

node:http://nodejs.cn/download/

开发工具webstorm：https://www.jetbrains.com/webstorm/
qq小程序平台：https://q.qq.com， 注册个人账户
下载qq小程序工具：https://q.qq.com/wiki/tools/devtool/#%E8%AF%B4%E6%98%8E
taro:https://taro-docs.jd.com/taro/docs/GETTING-STARTED.html

环境和工具准备好了，开始撸：

运行环境

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @tarojs/cli
taro init cat

这里css选scss，因为我后面要用taro-ui, typescript选不要，选no

cd cat
cnpm install taro-ui
npm install --save @tarojs/async-await
#修改 src/app.js
import '@tarojs/async-await'

npm run dev:qq

打开qq小程序工具，选择目录为cat/dist, 填入前面申请的小程序appid,ok,一个hello worlds出现了。

taro

taro是个不错的工具，当然涉及的东西有点多。因为之前用过，所以花了点时间熟悉了下就能上手。没看过的，强烈建议把文档看完再动手，要不然坑多的你想放弃。

想要用taro愉快的撸代码，那就要先准备学习以下几点：

• 目录结构
• 生命周期
• 如何创建新模板
• 如何增加路由
• 如何创建组件
• api接口如何对接
• state, 这个对新手前端比较难，但是比较重要
• taro ui的使用

如果能愉快的解决上面几个问题，那就可以无压力的用taro开始撸小程序h5或者app了。

值得一读的文章和文档：

• 使用 React Hooks 重构你的小程序：https://taro-club.jd.com/topic/213/%E4%BD%BF%E7%94%A8-react-hooks-%E9%87%8D%E6%9E%84%E4%BD%A0%E7%9A%84%E5%B0%8F%E7%A8%8B%E5%BA%8F 这个有点难度，需要仔细体会，会解锁小程序，react开发的新姿势~哈哈哈哈
• 使用hook后，是否还有必要使用redux或者mobx: https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/100790044

先做个简单项目体验下其中的坑。。后续更新。。。

创建个新页面
Taro create --name [页面名称] 能够在当前项目的pages目录下快速生成新的页面文件，并填充基础代码，是一个提高开发效率的利器。

taro create --name user

修改src/app.scss,增加taro-ui全局样式

@import "~taro-ui/dist/style/index.scss";

总结

再一次看完taro文档和react的部分文档后，可能由于接收的知识量过大了，没有消化产生了很多疑惑和以前知识的冲突。花了一些时间进行消化和思考

1. 前端，业务，数据如何分离？
   不管是网上的教程或者demo也好都是按照不一样的形式在组织，就像写php代码，很多时候，在经验不足的时候，会把代码写乱，比如一些业务在控制器有，模型有，甚至连模板上都有，导致了系统后期维护升级困难，对另外的开发者也感觉像一团乱麻。

写前端现在同样遇到这个问题，代码应该如何组织，各个功能应该以什么样的形式组合在一起工作。
归纳了下，我觉得前端工作目前分为3块：ui, 业务逻辑，数据：

• ui分为page页面，组件，已经page组件父子，组件间的状态通行，应该都是归纳于ui范畴，就是用户能操作和看到的部分
• 业务逻辑，这个部分包含系统运行的相关业务逻辑，例如用户身份相关，权限相关，事件消息,逻辑计算，以及用户相关操作和业务本身包含的逻辑(例如商品发布，删除等等)，ui控制和流程控制， 相当于php的 controller+logic 层。
• 数据： 数据层类似php里面的dao层，负责和后端api通信，定义接口，定义接口路由，组织过滤数据

理想化的这3层应该互不影响，可以独立存在，足够高的可用和复用。如何把这3层组织到一个系统，就考研开发者的能力了。

1. hook，redux, mobx
   状态管理对于没有接触过比较老的前端开发技术的新手来说，很难体会他的妙处。 但是也使人困惑，到底用哪个？他们之间关系怎么样。 我理解的是他们都是为了解决状态管理的。 什么是状态？就是当前某个页面上某个组件或者page当前变量的值， 因为作用域等问题，前端的this 和函数里面的值的变更一直让前端痛不欲生，不了解原型链的，有些时候会对某个组件里面的值到底怎么变化的产生迷之疑惑。。

简单来说，一个页面拆分成多个组件，这些组件可以共用， 页面用组件的时候就会传组件需要用的参数，而组件多处调用的时候，组件调用组件，组件需要另外一个组件操作的结果值的时候，这个时候就变得复杂了，得不停的把值到处传，而这个传值的时候，this作用域就让你根本不知道这个this到底是哪个组件状态，经常导致本来设置一个组件的值，结果要么不更新，要不产生其他意想不到的结果。 这个时候各个组件的状态就需要被管理起来，redux就是用于解决这些问题的，mobx也是用另外一种方式解决。 后来react hook提供了一种更简单的函数式的解决方式。 本来我也有疑惑，到底怎么选，后来看来上面的一篇文章，明白了，没有哪个更好，你自己觉得哪种更适合你项目就用哪个。

整理好这些知识后，还需要看看案例，多看看人家怎么写的，整理出自己的一套适合开发方案。
Taro 优秀学习资源汇总:
https://taro-club.jd.com/topic/17/taro-%E4%BC%98%E7%A7%80%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%BA%90%E6%B1%87%E6%80%BB

taro update project

npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass