所以在避免盲目学习,学玩就忘的前提下,翻了一些trailhead以后,安利一下官方提供的这个lightning aura框架下的基础学习。 一. 想要学好lightning提供的aura框架开发也好,LWC开发也好,先将自己的javascript基础夯实起来才是王道。这里官方推荐了好几个优秀的书籍,其中有两个可以在线观看。 针对Aura 框架下的学习 Aura框架的入门其实还是很容易的,官方提供了很多的trailhead用来学习:其中 https://trailhead.salesforce.com/content/learn trail_id=lex_dev 基本上这个trailhead涵盖了简单的lightning的组件开发的基础东西,剩下的就要看多读官方的文档,aura框架就可以入门了。
数据: AURA MLS水汽产品HDF格式 数据来源:NO 前言 本报告将为您介绍AUR MLS水汽产品的基本概念和应用领域,并展示相关数据经过可视化处理后的结果 Aura 卫星上的微波临边探测(Microwave 年代中期美国空气推进实验室开始研究这一技术, 并应用到卫星大气探测上, 已有代表性是高层大气研究(UARS)卫星 MLS 产品(Waters 等, 1999). 2004 年美国发射了装备 MLS 探测器的 Aura Aura-MLS 廓线产品也不断更新, 1.5, 2.2 和 3.3 版已公开(Livesey 等, 2011). 标准产品存储在根据约定命名的文件中:MLS-Aura_L2GP-v04-20-c01.he5。 {basename}\n{long_name}') plt.show() In [ ]: BrO产品廓线 f2 = h5py.File('/home/mw/input/MLS6867/MLS-Aura_L2GP-BrO_v05
="flexipage:availableForAllPageTypes"> <aura:handler name="init" value="{! v.testAttribute} </aura:component> 3. TestActionController.js:通过action类调用后台并且对response进行处理。 TestUtils.cmp <aura:component> <div aura:id="testChangeUI">Change This background
下图是一些salesforce提供的标准QuickAction,在当前版本下salesfoece不支持直接跳转到lwc,只能通过Aura画面进行跳转,具体做法如下。 this.opportunityName = data.fields.Name.value; } } } } 2.创建跳转用的Aura 画面(Create Aura Component) 创建完成,Aura一共有九种类型的文件,各个文件的意义在这里就不说明了,因为我们只是想实现画面跳转,所以只用到cmp文件,编辑这个文件,可以打开lwc force:hasRecordId,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes"> <aura v.recordId}"/> </aura:component> 3.创建QuickAction,ActionType选择LightningComponent image.png 4.最后编辑page
上一篇介绍了Aura Framework中 Component类的部分方法,本篇将要介绍Event常用的方法。 ="test component event"> <aura:attribute name="testAttribute1" type="String"/> <aura:attribute handler,在init函数中触发此事件; <aura:component> <aura:registerEvent name="TestComponentEvent" type="c:TestComponentEvent "/> <aura:handler name="TestComponentEvent" action="{! c.testComponentHandler}"/> <aura:attribute name="testA1" type="String"/> <aura:attribute name
v.label'), component.set('v.label','xxValue'); 小伙伴肯定有疑问这些方法是怎么定义的,lightning到底有多少已经声明的方法可供我们使用,此篇主要讲述aura 每个人的URL不同,URL 保留到force.com,然后添加一下URL: /auradocs/reference.app 即可看到aura的文档,aura文档里面给我们提供了aura framework 点击JavaScript API, 切换到 Component,可以查看到 Aura提供的所有的方法,常用的部分方法描述如下: ? .getLocalId(): 此方法用于获取组件元素的local id, 此方法通常用于通过事件获取事件的元素组件以后,获取元素组件的local id; eg: TestComponent.cmp <aura 总结:此篇只是简单的描述了Aura Framework中的Component对象常用的方法,其他的方法感兴趣的自行查看,篇中有错误的内容欢迎指出,不懂得欢迎留言。
前面的一些lightning文章讲述了aura的基础知识,aura封装的常用js以及aura下的事件处理。本篇通过官方的一个superbadge来实现一个single APP的实现。 aura:attribute name="formData" type="object"/> 3 </aura:event> BoatReviewAdded.evt 1 <aura:event type 19 <aura:if isTrue="{! <aura:if isTrue="{! 39 <aura:if isTrue="{!
8
9 <aura:text value="{!}"/>
10
11 <aura:text value="{! 'xxx' : ''}" >test
<aura:if>:此标签通常和aura:set一起用。 当aura:if判断部分为true,显示aura:if为true的逻辑,否则使用aura:set设置attribute为else,走false的逻辑。 1 <aura:attribute name="edit" type="Boolean" default="true"/>
2 <aura:if isTrue="{! <aura:component>
<aura:attribute type="String" name="sonAttribute"/>
son attribute : <aura:text
:attribute name="recordByEvent" type="sObject"/> </aura:event> 3.Create Child Component For Display the :attribute name="oRecord" type="sObject" /> <aura:attribute name="IconName" type="string"/> ""/> <aura:attribute name="IconName" type="string" default=""/> <aura:attribute name="label" v.Message} <aura:iteration items="{! v.IconName}"/> </aura:iteration>
="recordId" type="Id"/> This is Aura RecordId is: {! v.recordId}</aura:component>quickActionForDeleteAura.cmp<aura:component implements="force:lightningQuickActionWithoutHeader ="recordId" type="Id"/> This is Aura RecordId is: {! ="recordId" type="Id"/> This is Aura RecordId is: {! important; } </aura:html> <aura:attribute name="recordId" type="Id"/> <c:quickActionForDeleteLwc
image.png 通过前两篇,我们看到跟标准画面不同,打开方式并不是Dialog方式,以下我们通过嵌套Aura情况下,打开Lwc画面。 1.Aura组件做成,Dialog里引用Lwc。 ListVIew数据下,如果需要选择的情报,也可以通过Aura传入Lwc组件中。 newContactInfoAuraComponent.cmp <aura:component> <aura:html tag="style"> /*control modal 组件 newContactInfoApp.app <aura:application access="GLOBAL" extends="ltng:outApp"> <aura:dependency resource="c:newContactInfoAuraComponent"/> </aura:application> 4.VfPage组件 这里从直接打开Lwc,改成Aura组件 newContactinfoVf.page
8
9 <aura:text value="{!}"/>
10
11 <aura:text value="{! 'xxx' : ''}" >test
<aura:if>:此标签通常和aura:set一起用。 当aura:if判断部分为true,显示aura:if为true的逻辑,否则使用aura:set设置attribute为else,走false的逻辑。 1 <aura:attribute name="edit" type="Boolean" default="true"/>
2 <aura:if isTrue="{! <aura:component>
<aura:attribute type="String" name="sonAttribute"/>
son attribute : <aura:text
但是我们在lightning aura中开发却发现这个常用的功能并没有包含,好吧,既然没有现成可用的那我们就要有workaround的方式去后台获取。 ="Function" name="callback" required="true" /> 6 </aura:method> 7 </aura:component> FieldLabelServiceController.js <aura:component implements="flexipage:availableForAllPageTypes"> <aura:handler name="init" value= c.doInit}"/> <aura:attribute name="accountFieldLabelMap" type="Map"/> <aura:attribute name="contactFieldLabelMap " type="Map"/> <c:FieldLabelService aura:id="service"/> </aura:component> FieldLabelTestComponentController.js
1 <aura:component> 2 <aura:handler name="bubblingEvent" event="c:compEvent" action="{! 此事件紧使用aura:handler声明了句柄,并未包含任何其他的component 1 <aura:component> 2 <aura:handler name="bubblingEvent 1 <aura:component> 2 <aura:handler name="bubblingEvent" event="c:compEvent" action="{! 1 <aura:application> 2 <c:eventBubblingParent /> 3 </aura:application> 结果展示: ? 1 <aura:component> 2 <aura:handler name="bubblingEvent" event="c:compEvent" action="{!
<aura:component> <aura:attribute name="testAttribute" type="string" default="test"/> test for {! 如果想要在后面设置attribute的值,也可以通过<aura:set attribute="anotherTestAttribute">来更改attribute值,aura:set通常可以和<aura eg: <aura:attribute name="onclick" type="Aura.Action"/> <aura:registerEvent>: 通常用于创建完自定义event后,将event <aura:handler>: lightning中提供了一些标准和自定义事件,将事件装载到lightning component中需要使用aura:handler。 aura:handler写法如下: <aura:component> <aura:attribute name="childAttr" type="String" /> <aura:handler
<aura:component> <aura:attribute name="testAttribute" type="string" default="test"/> test for {! 如果想要在后面设置attribute的值,也可以通过<aura:set attribute="anotherTestAttribute">来更改attribute值,aura:set通常可以和<aura eg: <aura:attribute name="onclick" type="Aura.Action"/> <aura:registerEvent>: 通常用于创建完自定义event后,将event <aura:handler>: lightning中提供了一些标准和自定义事件,将事件装载到lightning component中需要使用aura:handler。 aura:handler写法如下: <aura:component> <aura:attribute name="childAttr" type="String" /> <aura:handler
创建svg.component,用于显示slds提供的icon svg.component 1 <aura:component > 2 <aura:attribute name="class" 1 <aura:component > 2 <aura:attribute name="selectedObj" type="sObject" /> 3 <aura:registerEvent c.selectedObjectHandler}"/> 18 19 <aura:handler event="aura:waiting" action="{! c.showSpinner}"/> 20 21 <aura:handler event="aura:doneWaiting" action="{! 放在APP 里面调用 TestCustomLookUpApp.app 1 <aura:application extends="force:slds"> 2 <aura:attribute name
--This is a lwc component--> <c:testComponentForLwc> </aura:component> 我们只需要声明一个aura的components 因为aura的事件监听处理可以捕捉到lwc的事件注册。 "> <aura:attribute name="quickActionName" type="String"/> <lightning:quickActionAPI aura:id=" c.doInit}"/> <aura:if isTrue="{! c.closeModal}"/> </aura:if> <aura:if isTrue="{!
事件Events 通过aura:event来声明,声明后所在的位置为aura目录下,后缀名为.evt 如下图所示。 ? ? <aura:event type="COMPONENT"> <aura:attribute name="message" type="String"/> </aura:event> 以下的二、三步均需要写在 使用aura:registerEvent标签进行注册事件。 aura:registerEvent有两个属性,一个是name,一个是type。 配置handler需要使用aura:handler标签,主要有几个属性: name : 此属性用来定义handler句柄名称,此值需要和aura:registerEvent的name的值相同,这里是componentEvent <aura:component> <aura:attribute name="messageAttribute" type="String" default="test"/> <aura
4 <aura:handler name="init" value="{! 17 18 </aura:set> 19 </aura:if aura:id="popuplib"/> 4 <lightning:recordEditForm aura:id="editForm" recordId="{! aura:id="viewForm" recordId="{! 19 20 </aura:set> 21 </aura:if