qq小程序+taro开发体验

公司开发过几个微信小程序,百度小程序也做过但是没深入做。虽然不是专职前端,但是前端技术还是有必要了解下。
正好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了。

值得一读的文章和文档:

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

创建个新页面
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

标签: 无

发表评论: