完全停不下来系列之 LWC 基础介绍篇
在上一个湿手 trail 中建立了 LWC 的开发环境,同时无脑做了第一个 LWC 应用: hello world。接下来是时候一步一步了解 LWC 的相关概念了。
Unit 1:发现 LWC
LWC 的入门介绍,包括什么是 LWC, LWC 带来的好处,以及 LWC 相关的可用工具。同学可用参考这个系列文章的第一篇去对比了解Trailhead 和 我都是怎么介绍 LWC 组件的。这里就简单摘要下为什么要用 LWC?简单讲:遵从标准,减少定制。遵循标准带来的好处:更多方案,更多人会,更快开发,更丰富组件。Salesforce 用来支持 LWC 的工具可是相当丰富:LWC Playground,Salesforce DX,VS Code Extension,GitHub,Dev Hub, Scratch Orgs, Salesfroce CLI, Lightning Component Library
), Lightning Web Components Recipes, E-Bikes Demo
), Lightning Locker。
乌欧,很多不是吗?幸福来得突然,一下就能拥有这么多还真是有限不适应。不用担心过年期间跟着 trail 慢慢来你都会消化掉的。
Unit 2:创建 LWC
这个 Unit 是通过 LWC 的 playground 创建 LWC,直接打开链接就可用写 LWC 代码了。 浅尝即止的同学一定要玩下,然后你就会爱上 LWC 的。 这次试着写 LWC 更偏重于介绍 LWC 组件本身的很多细节。比如 HTML template 怎么写, js 文件用了那些新语法等等。
如果你玩了 LWC 的 playground,你会发现这是一个很好的学习 js 的工具,结合Lightning Web Components Recipes repo 聪明的同学应该很快就会掌握基本 LWC 的编写,同时也提示 js 水平到一个全新的高度。LWC playground 对于动手能力强的聪明同学来说就是能通过“白首太白经”直接倒推掌握整个侠客行的武功秘籍,而且还不需要满足像葵花宝典那么残酷的前置条件。 JUST DO IT!
Unit 3:Push Lightning Web Component Files
这个 Unit 说实话我觉得作者有点偷懒,并没有做到步步有指导,点点都有趣的trailhead 要求。完成这个Unit 需要综合运用很多技能包括
- GitHub account
- IDE, such as Visual Studio Code
- Salesforce CLI
- Dev Hub enabled org
- My Domain deployed to users in your Dev Hub enabled org
很多指导就一句话:比如 “1. In the project directory, follow the instructions for Installing E-Bikes using Salesforce DX.
” 对于很多人来说,这就相当于“请参考说明书,把两颗中子相撞产生的能量234维方收集到红双喜保温瓶里”一样。
但还好,哪个installing E-Bikes 的文章里步骤很清楚,一步一步向前走,眨眼已是老几个秋~ 安装指导做的过程中能感受到 SFDX 的开发体验真的很好,所有辅助操作都是可用通过命令行完成:创建项目,导入项目,设置权限,导入数据,拉起浏览器。命令行的另外一个好处是,很方便构建自动化的开发流程,甚至DEVOPS流程自动化。听起来一点也不 saleforce,但这就是 salesforce 的步伐,让从需求到代码,从代码到部署的整体流程体验都那么好,你感受过才能体会为什么叫 DX。真的是要努力把 developer experience 做到最佳。 在这个 Unit 中代码的编写和推送更多是用 CLI 命令完成,但其实如果之前的湿手 project 学的好,你可用直接在 VS Code 中使用 sdfx 插件完成。 try different way for FUN!
Unit 对 CLI 的要求挺高,反正不懂不妨碍你 copy paste 命令行去执行。恩,我就是这么做的。做下来对 Dev Hub,scratch org 都有了更多体会。
image.png
Unit 4: Handle Events in Lightning Web Components
这个 Unit 的节奏及更快了,基本没有太多寒暄就直奔主题:
导入代码,介绍组件关系,事件浮出流程,属性下沉流程,收工。真正读进去没有一个小时是完不成的,我也只是为了快点交稿,囫囵吞枣的过了。
Unit 5: Add Styles and Data to a Lightning Web Component
作为整个trail 的最后一个 Unit 赶工的痕迹就更明显了, css 就是简单介绍了下 SLDS,而连接数据源则只是简单介绍了装饰器 @wire 的基本使用方法。
甚至 Unit 最后 8bit 风格的配图,就隐约能感受到赶工的痕迹。
image.png
感受:
这个 module 是最不想 trailhead module 的module,越往后越快的节奏很像是开发人员写的文档。这个 module 对学员的综合能力要求也比较高,做下来更像是一个解密游戏:module 给出说明,你还需要到各处收集资料才能顺利完成。比起之前 module 手把手教的方式,这个 module 已经把你看作是一个成人了。呜呼 1024。
这个module可用让你完整体验 LWC 的开发流程,是时候为自己的未来做决定了:到底是去搬砖,还是来 LWC 搭乐高?反正我的身体肯定不能去搬砖了,我计划全心的投入到搬乐高的事业中去。一起吗?
LWC 系列文章
- Salesforce 未来最有钱途的闪电(Lightning)开发组件 LWC (Lightning Web Component) 导读
- Trailhead 官方 LWC trailmix 解读之 Quick Start: Lightning Web Components
- Trailhead 官方 LWC trailmix 解读之 LWC basics
- Trailhead 官方 LWC trailmix 解读之 Set Up Your Lightning Web Components Developer Tools
- Trailhead 官方 LWC trailmix 解读之 Lightning Web Components for Aura Developers (纯净版)
- Trailhead 官方 LWC trailmix 解读之 “熊出没” APP 搭建
网友评论