若想战胜竞争对手，产品无疑需要在设计上做好提前规划，并时刻树立优化意识，尽量满足用户的体验期望。然而研发团队有时总容易陷入误区，本篇文章里，作者就产品研发过程中可能忽略的、对用户体验具有破坏性的因素做了总结，一起来看一下。

毫无疑问，要想获得出色的用户体验 (UX) 需要在数字世界中保持竞争优势。尽管如此，由于某些关键盲点，改善用户体验的努力并不总能取得成功。如果忽略这些盲点，那么无论预算大小和团队的努力如何，失败都会预先留存在项目中。事实上，如果实施不准确，可能会导致所谓的“经验差距”造成的设计上的损失。

上图所示的具体案例：某银行投资了近 50 万美元改进其手机银行应用程序，却导致整体客户满意度下降。其根本原因是金融公司未能发现和预防不同级别的内部经验差距。那么，该如何及时识别和避开这些盲点，以保障耗资巨大的大规模数字化项目的成功呢？

一、即使预算庞大，用户体验工作也可能失败 UX efforts can fail even with huge budgets

在过去十年中，大量研究证实，用户体验对公司市场效率存在优先影响。根据甲骨文的一份报告，如果糟糕的用户体验导致多个业务问题，那么积极的用户体验会增加推荐、保留率和收入，因为 86% 的客户愿意为更好的用户体验支付更多费用。

看起来一切都很简单——只要增加预算和成本，就足以提供最好的体验？但在实际操作中，这并不容易。根据贝恩公司的研究，80% 的 CEO 认为他们提供了卓越的体验，而只有 8% 的客户同意这一点。

其主要原因可以用“经验鸿沟”来解释——这是客户期望的体验与他们从数字服务中获得的体验之间的负面差异。如果体验比预期的差很多，就会产生许多令人不快的后果，比如客户忠诚度下降、大量负面评论，甚至客户决定离开品牌。

在大多数情况下，人们往往无法认识到真正的经验鸿沟。

即使公司的领导和员工觉得有些地方不对劲，他们也往往不明白“要改进什么”以及“为什么要改进”。如果没有意识到某件事，就不可能管理它。

二、现实生活中的例子：行动中的经验鸿沟 Real-life example: Experience gap in action

为了解释“经验鸿沟”可能导致麻烦的基本原理，我想分享一个现实生活中的例子。

几年前，一家知名且受人尊敬的中欧银行开始了大规模的数字化转型之旅。当时，该银行的应用程序的评级为 3.5，并且已经过时。所以，为了实现数字化、提升银行形象，并在不断增长的数字市场中获得竞争机会，管理层打算紧急创建并推出一款现代化的银行应用程序。因此，最初的设计和开发周期为 6 个月。

尽管如此，银行还是花了三倍时间（1 年零八个月）自主构建新应用程序。无论从时间来说，还是从投资预算来说，这都可以称得上是一个重要项目。从项目的范围、所做改进和时间表来看，总成本估计在 50 万左右。

然而，结果完全没有达到预期。新应用发布后，它从之前的 3.5 下降到 2.4，并且因为它没有改进，以至一年后，其评分仍在下降，其用户体验也日渐恶化。

银行尽一切努力改善用户体验，整个团队努力工作近两年，怎么会发生这种情况？

这种情况的产生，正是由于“经验鸿沟”的存在。尽管该银行启动数十名顶级专业人士花费了 20 个月和 50 万来改良产品，但它仍未满足用户的期望。

虽然客户不满意的真正原因是无意识的“体验鸿沟”，但公司往往倾向于通过指责外部环境来解释它。例如市场的变化、竞争对手的活动、创新的出现、消费模式的变化。当然，这也是客观事实，但一家适应性强的公司应该考虑将这些因素用于其增长，而不是作为“替罪羊”。

但衡量适应效果的最重要方式是公司服务在多大程度上满足甚至超过了消费者的期望。没有意识到他们服务和客户期望之间存在差距的公司注定无法适应外部环境的变化。

在某些情况下，公司的行为甚至会导致经验鸿沟扩大到临界水平。这通常会导致目标客户对公司产品和服务的需求急剧下降。

如果我们回到这个例子，似乎管理层对重大改进是否可以成功充满信心，并投入了大量资金和精力进行广告宣传。同时，那些宣传此应用程序现代、创新和友好的广告，激发了消费者的高期望，以至于大大超出了其服务的实际质量。

结果，当产品最终发布时，客户惊讶地发现他们的期望落空了，新应用程序比改良前更糟糕。并且相关的负面评论不仅出现在 App Store 和 Google Play 上，也在社交媒体上大量涌现，人们在推特上不断讽刺该银行失败的数字化项目。

三、对鸿沟的不了解是主要威胁 Unawareness of the Gap is the main threat

接下来，让我们探讨一下数字服务和用户期望之间的鸿沟是如何形成的，以及为什么没有人能够阻止它。

事实上，最大的挑战是大家往往很难注意到这些差距。他们的原因并不明显，并且可以同时存在于各个组织架构之上。此外，它们的影响令人难以察觉，以至于最终会导致意想不到的破坏性后果。最终，直到团队面对产品在市场上的失败，才有人明白原因是什么。

弥合鸿沟的主要困难在于，级别越高，对经验鸿沟的不了解程度越高。实际上，在组织架构的顶部，通常会找到造成鸿沟的根源。级别越低，离用户越近，员工越能觉察到问题和差距，但他们往往没有权力和能力去消除它们，他们受制于文化。

在这种特殊情况下，售后部门每天都会接到数千个关于产品问题的电话，但由于业务流程分散，他们对此也无能为力。

客户的挫败感变得更加强烈。即使是最简单的日常场景，他们面临的问题也难以执行，但他们从银行员工那里得到的反馈是，他们并不是唯一产生困惑的人，而且目前银行正忙于交付新功能，而不是修复当前问题。

使事情变得复杂的是，经验鸿沟背后的内部流程，是由过去促进公司生存和增长的相同机制引起的。该公司受制于过去的成功。就像诺基亚一样，这家全球最大的以硬件为中心的手机工厂，在苹果智能手机引领的软件革命中被彻底击败。

由于任何组织都有惰性，这些机制受到内在信念和价值观的影响，对适应市场和弥合经验鸿沟造成了阻碍。

首先，应该在管理层面解决鸿沟。因此，级别越低，离领导层越远，离客户越近，就越能感受和认识到鸿沟的存在。自然，一线员工将拥有从那些期望没有得到满足的客户那里得到最多的数据。

四、7 种体验鸿沟盲点 The 7 types of experience gap blind spots

主要的体验鸿沟可能是由组织中七个层次（文化、反馈、执行、设计、价值、品牌承诺、情感联系）中的一个或几个盲点造成的。

1. 文化鸿沟

在文化层面缺乏以顾客为中心的理念，员工无法使服务更接近客户期望，导致了“文化鸿沟”。在具有“文化鸿沟”的公司中，有助于以客户为中心的流程和活动都是处于低优先级的，相应的，它们也不会得到相关的资源。

2. 反馈鸿沟

缺乏关于客户期望和他们对产品或服务的体验数据会造成“反馈鸿沟”。在这种情况下，公司可能经常收集数据，但没有对其进行分析，也没有采取任何措施来改善这种情况。

3. 设计鸿沟

即使优先考虑以客户为中心的方法，并且收集了大量有关客户期望的数据，但在设计能力和方法上仍可能存在鸿沟。拥有合适的专业知识，就可以构建高质量的数字产品生态系统，从而根据客户需求提供最佳服务。

4. 执行鸿沟

这种鸿沟与糟糕的设计执行有关。如果不优先以用户为中心的来设计产品，那么创建最终产品和服务的决策和努力将注定是低质量和低效率的。这决定了公司在数字时代创造有竞争力的服务和产品的能力。

5. 价值鸿沟

如果设计生态系统在 价值金字塔的五个层次（功能、可用性、美学、地位、使命）上不符合用户的期望，就会形成价值鸿沟。

6. 过度承诺的鸿沟

正如我在上述银行案例中所表明的那样，如果一家公司只顾着积极推广其服务，承诺一些产品无法提供的东西，它会导致用户对期望的更大失望。因此，由于广告承诺与现实不符，对该服务的负面评价可能会翻倍。

7. 情感鸿沟

如果品牌传播是纯粹的信息传播，专注于功能特征，那么就无法与用户形成情感联系。由于人类基于情感做出决策，因此基于情感构建服务价值会对客户期望和最终用户体验产生积极影响。

五、弥合经验鸿沟 Bridging the experience gap

每个客户都会不知不觉地根据自己的期望来评估他们所接受的服务。用户体验质量所引发的情感将形成品牌的声誉。

在现代世界，数字渠道已成为品牌的主要“营销”和公关渠道。

一个应用程序，即使有一百年的服务客户历史和其他渠道的优质服务，负面体验也会破坏品牌推广的所有努力。

这仅仅是因为在数字时代，移动渠道占主导地位，对于某些人来说，它正在成为与品牌互动的唯一途径。这就是为什么了解如何弥合数字产品出现的七个体验鸿沟的方法如此重要。

1. 弥合文化鸿沟

在文化方面，转型基于高层心态的改变，并将这种影响渗透到整个的公司文化和内部价值观。特别是，可形成“以客户为中心”的体验思维模式。

2. 弥合反馈鸿沟

在银行案例中，开始弥合反馈鸿沟的第一步，是深入了解社交媒体上的负面评论以及致电售后部门的电话。接近这些客户才容易消除反馈鸿沟。事实上，他们比管理层更了解应解决哪些问题，并且往往渴望积极分享自己的情绪并希望得到倾听。如果一家公司足够开放并准备好接受批评，它可以使用这些数据来弥合鸿沟并提高产品迭代的敏捷性。

3. 弥合设计鸿沟

通过整合设计方法和设计思维来制定弥合鸿沟的策略，可以使用设计金字塔。该框架从五个层次（流程、团队、行动、结果和价值）确定了能够提高公司整体效率的设计集成。

4. 弥合执行鸿沟

组织必须将经过验证的设计执行方法（例如设计思维、HCD 或 UX 设计方法）与分步系统相结合，以设计符合客户期望并能够弥合执行鸿沟的数字产品。

5. 弥合价值鸿沟

产品的功能级别为客户创造真正的价值和利益，并通过提供卓越的可用性进行功能扩展；美学 ——令人惊叹的视觉识别；状态 —— 针对产品特定受众的个性化，最后是建立产品的价值观与使命。

6. 弥补过度承诺的鸿沟

数字时代的客户要求透明、关怀、诚实和开放的沟通。由于网络效应，几乎不可能销售劣质产品，因为每个人都可以在社交媒体上发布负面反馈，而这些负面反馈将深深地损害客户的信任。因此，做出不仅可以兑现，甚至可以超额兑现的承诺至关重要。

7. 弥合情感鸿沟

对客户的同情和关怀比以往任何时候都更加重要。在品牌与客户之间建立情感联系对于确保长期忠诚度和需求至关重要。这种联系是通过之前涵盖的所有阶段建立的——将客户放在第一位的正确心态；收集反馈并在此基础上进行改进；使用正确的工具和方法来创建产品设计和生态系统；创造真正的价值和利益，最后，通过诚实和超额兑现承诺。

六、成为深受喜爱品牌的途径 The pathway toward becoming a beloved brand

该途径涵盖了可能破坏数字产品创造的 7 个主要体验鸿沟，以及可以帮助避免和解决这些鸿沟的 7 个桥梁。如果一个品牌能意识到这些盲点，它可以立即获得比仍处于盲点的竞争对手的显著市场优势。

仅凭意识就可以产生巨大的差异，但将意识与行动相结合会导致长期成功，成为一个需求量很大和深受喜爱的品牌。

本文翻译已获得作者的正式授权（授权截图如下）

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

今日，有消息称字节跳动将会推出一款名为“飞乐”的音乐流媒体产品。字节跳动的入局，或将引起音乐行业的新波澜。本文作者对此发表了自己的观点，一起来看看吧。

擅长“四路出击”的字节跳动，又双叒叕出手了……

长期以来，关于字节跳动扩张的消息就一直不断。前有抖音内测“心动外卖”进军外卖领域，后有字节跳动收购VR公司的消息登上热搜……近日，有报道称字节跳动将于今年下半年推出一款音乐流媒体产品，产品的名称暂定为“飞乐”，项目内部代号为“luna”。而字节跳动的再次入局，或将引起音乐行业的新波澜。

一、坚持不懈的音乐梦

今年4月，字节跳动成立了音乐事业部；7月份的时候，字节跳动将音乐升级为P1优先级业务，与游戏业务和教育业务平级；不久之后还内测了音乐代理发行平台“银河方舟”。除了自身做音乐之外，字节跳动还投资了校园音乐平台。这一系列动作无一不展现了字节跳动发力音乐领域的决心，而字节跳动之所以如此看重音乐业务也是有一定原因的。

首先，音乐业务有助于字节跳动获取新流量。据CNNIC发布的第47次《中国互联网络发展状况统计报告》显示，截至2020年12月，我国的网络音乐用户规模达6.58亿，与2020年3月相比增长了2311万，占网民整体的66.6%。其中，手机网络音乐用户规模达6.57亿，与2020年3月相比增长了2379万。随着短视频领域流量见顶，字节跳动亟需找寻到新的流量增长点。

其次，音乐行业用户的付费意愿在逐步增强。据前瞻产业研究院发布的相关报告显示，我国的网络音乐付费用户规模已经由2016年的2017万人，增长至2020年的7192万人，网络音乐付费渗透率也由2016年的4.0%增长至2020年的10.9%。网络音乐用户的月度消费金额也由2017年的8.5元，增长至2020年的9.5元。

以腾讯音乐为例，据其最新发布的二季度财报显示，截至2021年6月30日，腾讯音乐的在线音乐付费用户人数达到了6620万，同比增长了40.6%，与今年一季度相比净增长了530万人；付费率为10.6%，与去年同期和今年一季度的付费率相比均有所提升。

最后，音乐业务与字节跳动旗下的短视频业务相辅相成。配乐是制作短视频必不可少的环节之一，配乐和内容契合度极高的优质短视频往往能收获很高的播放量，但也正因短视频配乐使抖音多次陷入侵权局面，不少短视频也因其所使用的音乐无版权而被做下架处理。倘若字节跳动推出音乐产品，就能够为短视频用户提供更为方便的曲库支持，有利于短视频用户进行创作。

二、逐梦音乐有“加成”

7月24日，国家市场监管总局责令腾讯音乐解除其网络音乐独家版权；8月31日，腾讯发布了《关于放弃音乐版权独家授权权利的声明》。众多音乐平台不再被音乐版权“卡脖子”，字节跳动于此时再度发力数字音乐，自然也能享受到行业大环境变化所带来的重大利好。除此之外，还有其他原因也会对字节跳动发展音乐业务产生积极影响。

其一，是其拥有庞大的流量优势。据抖音发布的《2020抖音数据报告》显示，截止2020年12月，抖音的日均视频搜索次数突破4亿；截止2020年8月，抖音的日活跃用户数量突破6亿。有抖音这一巨大流量池为其引流，无论是音乐流媒体产品的用户获取，还是音乐作品宣发都会容易一些。

9月9日，工信部相关业务部门召开了“屏蔽网址链接问题行政指导会”，提出有关即时通信软件的合规标准，要求9月17日前各平台按标准解除屏蔽。随着屏蔽外链的解除，字节跳动也将从中获益，迎来新一波流量增长。

其二，是创作者扶持计划成效显现。早在2018年，抖音就启动了“看见音乐计划”以扶持原创音乐，随着不断进行的音乐扶持计划，抖音的音乐生态也在逐渐完善。据《2020抖音音乐生态数据报告》显示，2020上半年抖音的音乐人入驻数量增长近3万；近半年抖音音乐人涨粉累计超3亿，其中涨粉超1000万的音乐人有6位，涨粉超500万的音乐人有23位。

而抖音扶持音乐计划的成功，也给字节跳动的音乐流媒体产品打了样。字节跳动在发展音乐业务时，也可以采用类似的策略进行音乐产品内容生态的完善。另外，部分抖音音乐人也可能成为字节跳动音乐业务的潜在音乐人，为字节跳动音乐业务的发展添砖加瓦。

其三，算法优势助力音乐业务发展。众所周知，算法是字节跳动的一大特色，今日头条和抖音能取得当前的成绩，与字节跳动的算法推荐不无关系。据悉，字节跳动的音乐业务主要由前台和市场、算法两大中台支持构成。在中台方面，由抖音的市场团队承担国内音乐人合作与版权宣发，算法团队负责提供智能配乐、安全风控等技术支持。

三、在线音乐硝烟起

无论是后版权时代的来临，还是字节跳动自身的优势都对其发展音乐业务大有裨益，但机遇与挑战并存，字节跳动在迎来重大利好的同时，依然面临着不小的挑战。

一方面，腾讯音乐的霸主地位难以动摇。在“取消网络音乐独家版权”尚未落地之前，腾讯音乐凭借海量的正版歌曲曲库以及持续建设的内容生态，稳居行业头部。据腾讯音乐发布的财报显示，今年二季度腾讯音乐的在线音乐月活跃用户数为6.23亿，仅月活跃用户数这一项指标，字节跳动在短时期内就很难与之相匹敌。

另一方面，网易云音乐的音乐社区文化别具一格。在被音乐版权“卡脖子”的时期，网易云音乐凭借其音乐社区文化，成功地从众多音乐平台中脱颖而出，浓郁的社区氛围也极大地提高了用户的黏性。另外，网易云音乐不断推出的扶持计划也增强了其内容竞争力。

网易云音乐的这些特色化优势，也将为其在今后的发展中提供助力，但对字节跳动来说，拥有这些差异化优势的网易云音乐，无疑是一位强劲的对手。

另外，快手也在音乐领域有所布局。早在2018年的时候，快手就推出了一款音乐产品“光音Mulight”；今年2月26日，快手推出了音乐K歌APP“回森”；5月份的时候，快手推出了音乐APP“小森唱”，该软件的核心功能是AI创作词曲用户进行演唱，在演唱之后还可以通过点赞评论等方式进行互动，最终达到社交的目的。随着快手在音乐领域的不断加码，也会对字节跳动音乐流媒体产品的发展产生影响。

目前来看，随着行业大环境的变化，在线音乐领域的竞争愈发激烈已经是无可辩驳的事实。无论是稳居头部的腾讯音乐，还是擅长打情怀牌的网易云音乐，亦或是跨界而来的快手，都是字节跳动音乐流媒体产品的强劲对手。而字节跳动能否在强手如云的音乐行业闯出一片天，仍待时间验证。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

做好行业研究，有助于企业或个体从业人员更好地洞察市场，进一步发现机会，或者找准产品定位，推动企业战略决策和后续实施。本篇文章里，作者就行业研究的分析框架与思考维度做了总结和梳理，一起来看一下。

一、行业研究的目的

以始为终，构建行业研究的方法论和分析框架，需要从目的出发，下面列举几类典型的行业研究报告目的。

券商的报告（二级市场），分析某个行业是否有投资价值，从行业赛道的选择过渡到这个行业赛道中的值得被投资的公司，说明这个行业中哪些公司更有投资价值。报告结果是要用于股票投资服务的。二级市场由于公司财务报告的披露性质，公司的财报分析在行业报告中也是重要的构成部分。

互联网战略投资部门/VC的报告（一级市场），互联网战略投资部门通常以公司的战略发展目标为出发点，布局上/下游产业链，或通过收购竞品公司，巩固和发展公司在行业的竞争力，提升市场占有率，开拓新的市场；VC通过布局细分的赛道，选择合适的投资标的，参与风险投资。

值得注意的是在互联网初创企业的财报分析通常不作为重要参考因素，多数互联网公司在初创期将投入大量资金，长期处于亏损状态，此时，市场份额和估值与传统二级市场的分析方式有较大差异。

咨询公司的报告，目的是为行业内的公司服务的，说明该行业的行业规律、行业风险、行业机会、行业发展趋势等。在行业研究的内容方面，咨询公司常见的模式还包括访谈调研行业内公司高管。

二、行业研究的常规分析框架

基于行业研究的目的，常规的行业研究框架，包括一下几个核心部分：宏观分析、行业分析、公司分析、消费者分析、竞争者分析，其中宏观分析和行业分析的视角都是从赛道链路的角度，进行整体分析，而公司、消费者和竞争者则是从市场参与者的角度进行分析。

1. 宏观分析

1）宏观分析思考的维度

1. 宏观分析的因素大多非直接影响行业和公司，而是通过影响宏观基本面，进而对行业产生间接影响。
2. 在宏观分析中，多数分析不是仅仅是单因子影响，而是混合因子影响的结合。
3. 除了行业分析的分析范围，宏观分析应该考虑更广阔的范围要素，例如如果限定为某一国家的具体的某一行业研究，需要将宏观分析的内容范围扩展至全球范围内的影响要素分析，将中外的宏观影响影响都考虑到。
4. 最后，宏观分析需要考虑时间维度，不能局限于静态分析，既要考虑存量数据，也要考虑趋势变化，同时考虑增量数据。

2）宏观分析考虑的内容：

宏观分析中考虑的因素点对行业环境的影响，因素点可采用PEST模型分类，但不必拘泥于PEST模型，因素点间可能是组成多因素，从而对行业环境产生间接或直接影响。基于PEST模型，因素点可以分为：

① 经济类

包括经济发展水平、社会经济结构和宏观经济政策，其中经济发展水平可以通过较为典型的量化指标进行衡量，例如GDP\CPI\进出口规模等；宏观经济政策主要包括货币政策和财政政策；社会经济结构主要体现在经济体制和产业结构构成。

② 政治类

包括政治体制、政局稳定性、和相关的政治政策。

其中政治体制包括资本主义、社会主义和中国特色社会主义等，政治体制对行业的影响为间接影响；政策包括投资政策、环保政策、进出口政策、货币政策和财政政策等，也有针对具体行业的政策，例如近期发布的教育“双减”政策就对在线教育行业产生了不小冲击，网络安全隐私数据保护政策对互联网公司获取用户使用偏好数据，产生了非常大的影响。

其次，除了政治政策，政局的稳定性对行业发展稳定产生重要影响。

③ 文化环境类

包括人口因素、社会流动性和消费心理，此类因素可与消费者分析关联，对消费者细分市场和市场定位产生了重要的影响，主要从聚类的角度，对消费群进行分析。

人口因素主要考虑人口总数、年龄构成、性别比例、教育水平、人口地理分布等，社会流动性主要考虑社会阶级流动性和贫富差距；消费心理主要包括生活方式、文化传统和价值观等，对消费者偏好心理产生影响，从而影响消费者的行为决策。

④ 科技类

主要包括专利技术数量和质量、相关产业技术等，科技对一个产业的生产效率与产品更新，甚至一个产业的萌芽和灭亡都将产生巨大的影响，例如智能芯片对手机行业产生了巨大的冲击，原有的非智能手机迅速被智能手机取代，生产非智能手机的厂商迅速破产。

综上，宏观类因素多数为混合因子对产业产生直接或者间接的影响。

2. 产业分析

1）产业分析思考的维度

① 整体市场分析

整体市场分析除了关注静态的存量市场，也需要关注动态的增量市场。市场的现有市场规模和增速决定了市场的规模，体现为市场的“宽”度和市场的“长”度，行业壁垒和驱动因素影响参与市场的玩家数量，体现为市场的“陡”度。

② 市场参与者

市场参与者从各个角度，在产业分析上有不同的分析时间，例如从产业链角度，分析上下游供应商和购买者、从行业参与者的角度，分析竞争者和行业集中程度。

③ 影响因素

产业影响因素和宏观影响因素的区别在于，产业影响因素从供给需求、驱动和壁垒的角度分析更为直接的影响因素对产业产生的影响。

2）宏观分析考虑的内容

① 产业规模

产业规模可以从空间维度进行解析，产业的宽度代表现有市场规模，产业的长度以时间为维度，代表增长率和增长率增速，而产业规模=现有市场规模*增速。

由此可见产业规模的衡量有两个重要的衡量标准和指标，即市场规模与复合年均增长率（CAGR），市场有多宽指行业规模有多大、增长的天花板有多高，是衡量一个行业现有市场容量和将来市场发展空间的最重要的标准，现有市场容量决定了该市场有多少蛋糕可以分，而市场增速决定了行业发展潜力，行业增速可与行业的成熟度曲线紧密联系。

② 产业生命周期

产业的生命周期以时间为维度，一般分为导入期、成长期、成熟期和衰退期。产业生命周期在导入期、成长期、成熟期和衰退期的不同阶段，可以从经营风险、财务风险、产品差异、单位利润、产品特征等不同维度进行分析，详见下图。

③ 产业链

产业链分为上游供应商、下游购买者、潜在进入者和现在竞争者，将企业放在产业链进行分析，需要对供应商和购买者有较高的议价权，能有效面对竞争者。

其中，影响供应商议价能力的影响因素包括市场占有率、转换成本和供应商战略，影响购买者议价能力的影响因素包括价格敏感度，相对议价能力等，影响潜在进入者的障碍有结构性障碍和行为障碍，影响替代品威胁的主要因素包括产品同质化程度和劳动生产效率等。

④ 产业驱动因素与行业壁垒

产业的驱动因素主要分为两个部分，第一是生产要素驱动，第二是相关支持性产业驱动，其中，生产要素包括高级生产要素和初级生产要素，而相关支持性产业，则表现为产业链上下游的聚集驱动。

行业壁垒：行业壁垒分为限制性要素和市场壁垒，可以通俗理解为一只“看得见”的手和“看不见”的手，即政策限制和市场限制。

政策限制如进出口限制、许可证、配额等，实现限制如规模效益使得成本降低，对新进入的小规模玩家形成行业壁垒，又比如缺乏品牌技术，而只能成为代加工企业，获取最低的生产制造利润等。

如果行业的门槛很高，竞争者难以进入市场，行业的垄断程度也相应比较高，通常用行业集中度来分析衡量，即CR5（行业中前5名的企业占据的市场份额）。

但是，垄断程度越高，企业越有机会获得超额利润，但行业的垄断程度并非仅仅由行业壁垒所决定，消费者的需求差异也会对垄断程度产生重要影响，例如手机行业的垄断程度较高，而餐饮行业却很难出现寡头垄断，因为餐饮的消费者偏好差异非常大。

⑤ 供求分析

供给侧主要包括产能分析，同时也受行业集中程度的影响，即上文所述的行业垄断程度，产能分析包括产能利用率水平、库存周期、产品使用寿命、订单周期，这里比较典型的行业是电子产品生产制造业。

需求侧主要从消费者市场出发进行分析，同时考虑替代品，需求预测包括消费者整体购买力和细分需求市场，这里的消费者整体购买力受到宏观因素的影响，例如人均可支配收入、贫富差距等；替代品的细分影响因素包括国家进出口和国内市场替代品。

⑥ 产业结构

产品结构：产品结构可以从加工阶段和主导构成不同的视角进行分析，加工阶段主要以产业链维度为分析视角，从初级产品、中间产品和最终产品进行分析，主导构成主要从驱动因素进行分析，分为劳动密集型产品、资金密集型产品和技术密集型产品等。

市场结构：市场结构从分类上可以分为市场主体结构、市场客体结构、市场空间结构和市场 时间结构，从行业集中程度，可以分为完全竞争市场、完全垄断市场、垄断竞争市场和寡头垄断市场等，影响行业集中程度的因素在前文已经提及。

3. 市场参与者——公司与竞争者

1）公司思考的维度

① 战略

战略需要将企业放置在宏观和产业的角度，通过对赛道、竞争者和消费者的分析，制定战略，从整体分配资源，规划产品和服务。

② 经营分析

经营分析从数据量化的指标，动态指导经营过程中的业务发展。运用定量分析、业务分析和行为分析相结合的方法，对企业进行综合分析的一种现代经营分析体系。包括:经营基础分析、财务分析、市场分析、劳务分析、生产分析、物资分析等。从业务单元的视角优化运营。

2）公司分析考虑的内容

① 战略分析

战略分析包括企业能力与资源分析、价值链分析、产品组合分析、外部分析、内部分析、财务指标分析和商业模式分析等。

• 外部分析：外部分析从企业所面临的产业环境出发，分析企业在产业环境中所面临的机会和威胁
• 内部分析：内部分析从企业内部经营的角度出发，分析企业所拥有的资源与能力的优势和劣势，即下文所展开的企业能力与资源。企业的外部分析和内部分析构成了SWOT模型。
• 企业能力与资源：从企业能力的视角可以分为研发能力、生产管理能力、营销能力、组织管理能力、财务能力等，这些能力构成了企业的核心能力，成为企业在市场中竞争的制胜因素，构成了企业的护城河，其次，从企业资源的视角，可以分为有形资源和无形资源。
• 价值链：可以分为基础设施和基本活动两大类，其中基础设施包括财务、战略、法务、人力资源、技术开发和采购管理，基本活动包括内部后勤、生产经营、外部后勤、市场营销和运营。
• 商业模式：从企业提供产品和盈利模式出发，主要关注一类企业在市场中与用户、供应商、其他合作伙伴（即营销的任务环境的各主体）的关系，尤其是彼此间的物流、信息流和资金流。
• 产品组合：从提供的服务和产品出发，例如零售行业中的品类策略，包括产品线的和SKU的设置，即品类的长度和深度，也可以从经典的波士顿矩阵出发，分析销售增长率和市场占有率的矩阵，针对明星业务、问题业务、瘦狗业务和金牛业务制定不同的策略。
• 财务指标：从财务指标，以始为终，进行测算和分析，包括毛利率、现金流、ROE等。

② 战略选择

战略选择可以从总体战略和智能单元战略出发，如果业务涉及海外业务，需要分析选择国际化经营战略。

• 总体战略：总体策略是公司的总策略，可分为发展战略、稳定战略和收缩战略，其中发展战略可以分为一体化、密集型和多元化战略。
• 职能战略：从业务单元视角，制定单元战略，一般包括营销、生产研发、运营、人力和采购战略。例如营销战略中需要制定细分市场STP，进行营销战略的选择，包括产品、渠道、促销和分销（4P）等，其余业务单元策略，在此不做过多的赘述。
• 国际经营战略：根据全球化协作程度和本土独立性和适应能力的差别，本土企业的国际化经营战略可以分为四种类型，即国际化战略、多国本土化战略、全球战略与跨国战略。

3）竞争者思考的维度

• 优势：竞争者分析的思路可以简单分为，发现优势是什么，以及采取何种策略发大优势，形成企业的护城河。
• 劣势：其次，竞争者分析需要思考与竞争者相比，企业的劣势是什么，如何缩小这种劣势。

4）竞争者分析考虑的内容

• 竞争分析：竞争分析主要从前文所述的企业资源和能力角度进行分析，包括产品优势，技术壁垒、分销渠道优势、用户增量和存量、财务状况、组织架构、核心管理层（人才资源）等视角分析，同一赛道的不同玩家在市场中的竞争力。
• 战略选择：基于竞争分析，针对赛道中的竞争者，可以采取不同的竞争者战略，主要包括三类，即蓝海战略、中小企业战略和基本竞争战略，其中，基本竞争战略可以分为成本领先战略，差异化战略和集中化战略。

4. 消费者

1）消费者思考的维度

细分市场与精准营销：在互联网数字化的革新下，原有的消费者聚类分析越来越精细化，不仅有群体的聚类标签，个体消费者的标签也能层层穿透，为精准营销运营提供了条件。

2）消费者分析考虑的内容

基本属性：基本属性包括年龄、收入、性别、受教育程度和地域分布等。

购买动机和购买行为：根据MBA智库的定义，营销学家把消费者的购买动机和购买行为概括为6W和6O，从而形成消费者购买行为研究的基本框架。

① 市场需要什么（What）——有关产品（Objects）是什么。通过分析消费者希望购买什么，为什么需要这种商品而不是需要那种商品，研究企业应如何提供适销对路的产品去满足消费者的需求。

② 为何购买（Why）——购买目的（Objectives）是什么。通过分析购买动机的形成（生理的、自然的、经济的、社会的、心理因素的共同作用），了解消费者的购买目的，采取相应的市场策略。

③ 购买者是谁（Who）——购买组织（Organizations）是什么。分析购买者是个人、家庭还是集团，购买的产品供谁使用，谁是购买的决策者、执行者、影响者。根据分析，组合相应的产品、渠道、定价和促销。

④ 如何购买（How）——购买组织的作业行为（Operations）是什么。分析购买者对购买方式的不同要求，有针对性地提供不同的营销服务。在消费者市场，分析不同的类型消费者的特点，如经济型购买者对性能和廉价的追求，冲动性者对情趣和外观的喜好，手头拮据的购买者要求分期付款，工作繁忙的购买者重视购买方便和送货上门等。

⑤ 何时购买（When）——购买时机（Occasions）是什么。分析购买者对特定产品的购买时间的要求,把握时机，适时推出产品，如分析自然季节和传统节假日对市场购买的影响程度等。

⑥ 何处购买（Where）——购买场合（Outlets）是什么。分析购买者对不同产品的购买地点的要求，如快速消费品，顾客一般要求就近购买，而选购品则要求在商业区购买，一边挑选对比，特殊品往往会要求直接到企业或专卖店购买等。

三、总结

综上所述，行业研究的框架可从宏观、赛道、市场参与者进行分析。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

什么是登录？

登录是进入一个应用程序 、网站或服务的入口。帮助用户建立他们的账户。

• 一个登录流程通常包括一个主要的登录页和一个相当复杂的重置流程，其中包括 “忘记密码”、重置密码和其他登录方法。
• 登录的首要目标是确保用户成功登录到他们的账户。

什么是登录目标？

让我们花点时间来定义一下“登录目标”这个术语，这是在做设计决策时的关键。

登录目标是指用户进入登录流程的意愿。以有声思维来表达，它可以是 “我想登录”、“我想检查我的电子邮件”、“带我去那里”，等等。

当用户进入到登录页时，他们可能没有登录意愿。可能会产生“嗯，我不在乎，以后再做”或“这太麻烦了”或“呀，我现在该怎么办？”的想法。忘记密码、半路遇到困难或切换到另一个页面/设备，都可能是缺乏登陆意愿的迹象。

我们得到了登陆目标

保留或增强登录流程中的登陆意愿是很好的目标，下面的准则都是为这个目标量身定做的。

设计熟悉的体验

设计熟悉的体验，虽说不是设计师最喜欢的设计准则，但是与整个生态系统中最好的体验保持一致是非常重要的。例如使用简单、公认的布局，使用众所周知的术语和文案，都有助于用户自信而轻松地进行熟悉的操作。

保持通用的设计也有助于将页面轻松扩展到不同的形式和设备。

Pinterest 有一个传统的、居中的覆盖式登录页。它有一个亮红色的主要登录按钮，并提供 Google 和 Facebook 作为额外的社交登录选项。

滑到最后，有我对网络上流行的成功登录经验的总结。这就把我们带到了下一个问题 —— 创新的界限在哪里？

登录是一个品牌展示的绝佳机会点。在视觉上，它可能使用品牌色、品牌照片、品牌插图，甚至是营销信息。和大多数设计问题一样，登录页品牌展示的关键在于平衡。登录操作应该一直占据中心位置。页面上的其他元素必须谨慎规划好，不应该夺走登陆操作的注意力。

一条优秀的经验之谈：用户在登录页面上花费的时间越少越好。帮助他们继续前进，尽快发现产品中的优点和价值。

聚焦设计

快速回顾一下：用户在登录页面上花费的时间越少越好。根据这一点，登录（或恢复）操作应当占据用户的全部注意力。

• 最好是把登录框放在页面的中心。如果你打算把它放在一侧，最好是赋予它核心视觉效果。
• 对于文案写作来说，指明用户在某一步骤中到底需要做什么才是很重要的！比起冗长的解释，一句简单的 “输入密码”就能起效。幽默、复杂的行话、技术术语和花哨的文笔在登录体验中是没有用武之地的。

在恢复体验中，将一套复杂的操作分解成多个步骤是很有效的。安排用户一次只做一件重要的事情！例如：输入你的手机号码和输入发送到你手机上的验证码是两个独立的步骤。

Facebook 在页面中保持用户信息在右侧，并将恢复流程分解为多个步骤。

亚马逊把它的恢复流程分解成多个步骤。它将次要的恢复选项设置为 “我需要更多帮助 ”的可扩展部分，这有助于保持注意力集中在主要操作。

保持注意力集中在主要操作的技巧：

• 登录框可以布局在一个主页、叠加页，或一个独立页面。
• 使用卡片式布局
• 将操作分为主要和次要操作
• 使用一个大而醒目的登录按钮
• 尽量减少次要操作的数量 —— 避免出现任何与核心登录操作无关的内容。

给予明确的反馈并在用户失败时提供帮助

在登录过程的每个阶段，用户都可能失败。电子邮件地址输入错误、密码输入错误或忘记密码、网络问题，所有这些都可能导致登录意愿的急剧下降。因此，登录界面以最恰当的方式回应用户是非常重要的。清晰、及时、精心编辑的错误提示信息能起到很大帮助。

错误信息包含有用的提示/暗示，指明你在失败时可以做什么

当你密码登陆失败，但你有一个 Gmail ID 时，Facebook 会增加一个 “用 Google 账号登录 ”的功能

指导用户恢复的技巧：

• 鼓励用户尝试合适的替代方案
• 在用户失败后，安排替代的登录方案，同时将用户导航至一个独立的页面
• 在文本中展示出最有用的登录方案，并在出现错误时对用户做出积极响应！

尽量保留登录痕迹

重点是让用户知道平台识别出了他们，并提供一个欢迎回归的体验。这有助于提升用户的登录意愿。

保留登录痕迹的方法：

• 像 “记住我”这样的功能
• 预先填写上一步收集到的字段，例如：在跳转到恢复流程时，预先填写登录步骤中收集到的电子邮件 ID
• 如果使用的是两步式登录，为用户提供个性化的登录方式是个不错的主意 —— 用户对电话OTP（一次性验证码）登录更满意？还是电子邮件+密码？记住用户上次选择的登陆方式可以提升用户的登录意愿，并让他们感觉到登录体验的自然和舒适。
• 在企业 SSO（单点登录） 中，用户可能会用多个账户登录。在检测到多个账户的情况下，最好是将这些账户选项呈现给用户，让他们选择他们想使用的账户。

灵活提供多种登录方式

对于你的平台应该提供哪些登录方法，没有一个放之四海而皆准的方案。最好是提供一到两种额外的方法（除了用户名+密码），这样用户就有了选择，以防他们忘记密码。这些方法可以是基于电话号码的登录、人脸识别，或最常见的社交登录，如 Google、Twitter、LinkedIn 或 Facebook。如果你正在考虑社交登录，思考为平台添加最流行和最安全的方案。

需要注意的是 —— 增加很多的登陆方法会使页面变得混乱，可能会导致登录意愿降低！将额外的选项限制在 2 或 3 种。

针对最常用的登陆方式进行优化，并明确区分主要和次要方式。这些选项通常被证明是需要重置密码（以防用户忘记密码）的很好的替代方法，但同时也被认为是一个乏味的步骤。情况允许时，应智能地浮现其他登陆选项并进行个性化处理。例如：如果用户是通过电子邮件登录，提供一个带有一次性链接的登录选项可能会有效。

在此提供 Medium 登录页的案例。虽然清晰且设计良好，但它确实有太多的登录方法。不得不回访 Medium 的设计者，如果这个设计对他们来说是好的！

无密码登录正火速流行起来。特别对于只有移动端的应用程序来说，基于电话号码的认证已常态化。指纹和 FaceID 在许多地方出现，使认证流程变得快速、安全。为平台找到最适合（且可开发）的方法，并将其作为主要登录选项。

登录是信任敏感的时刻

登录涉及到用户输入敏感的个人数据，如电子邮件、密码和电话号码 —— 这是决定了他们与平台关系的敏感时刻。

登录框代表了品牌，任何视觉上的改变都必须缓慢进行——因为整体的视觉变化可能会失去用户信任。

登录也是（有用的）保障 —— 足以让坏人无法进入系统!

虽然减少普通用户的操作是很重要的，但如果我们怀疑用户可能是黑客，那么出现额外的认证也变得很重要。这可能是一个很好的机会去提醒用户能够采取哪些措施来加强他们账户的安全性 —— 例如：强密码、双重认证等。

通过调研确定用户类型

之前有提到过，投入足够的时间去调研用户，有助于提高登录意愿！这一点是很重要的。

登录是一种体验，你的用户角色可以是各种各样的 —— 每个人都可能拥有一个你平台的服务账户！如果可能的话，缩小你的角色范围。

情况允许时，像我这样（为社交媒体平台设计），可以尝试以下方案：

1. 登录漏斗 —— 与项目管理人员合作，找出用户在登录流程中互动和放弃的关键点。
2. 登录入口 —— 用户是通过电子邮件进入登录页面？还是通过搜索引擎的结果？还是当他们在使用产品时？或是在应用程序中？你可以利用这些入口点作为线索，为用户展现出最相关的选项。
3. 已知的设备 —— 手机、浏览器和已知的设备可以有助于为用户提供受欢迎的、个性化的登陆体验。
4. 用户群组 —— 根据用户特性进行划分，如网络/移动、年龄组和地域，也能有帮助。
5. 在用户没有登录时，使用这些线索可以增加用户的登录意愿。采取微小的步骤进行用户识别，并且使用户易于接受。这有助于你提高登录成功率！反之这也会为你的平台带来更多的活跃用户，每个人都能成为赢家。

案例介绍

以下是我对网络上我最喜欢的登录页进行的总结，包含一些我经常访问的平台。欢迎推荐更多登录页！

Google（谷歌）打破了标识优先的格式 —— 改成了分步式登录模式，在不同的步骤中输入电子邮件和密码。这种模式对于 Google 有安全优势，也可以使他们在接下来的步骤中为用户提供个性化的选择。页面也是最小的、全白的、聚焦的。

Uber 的登录页是简单且聚焦的，允许用户输入他们的电话号码并进入下一步。

Facebook 有几个登录方案，他们用这些方案进行实验和 A/B 测试 —— 这是一个右对齐的登录框案例，它很好地突出了重点。左侧的空间被用来打造积极的品牌形象 —— 总体来说是成功的登录体验。

Pinterest 做了 一个简单居中的叠加表单，有硕大的输入框 —— 不断吸引用户！还有一个亮红色的登录主按钮，以及一些额外的社交登录选项。

尽管 Airbnb（爱彼迎）在很多方面都做得很好，但它的登录页让人感到操作繁多，这也许是因为基于手机号码登录，也许是因为大量的次要登录选项，导致相当多的认知负荷！

LinkedIn（领英）很好地保持登录框的简介、聚焦和居中，有一个醒目的主登录按钮。

我对 Dropbox 的登录页面持犹豫态度——插图很好看，但它的颜色与界面按钮的颜色相似。这是附加元素分散注意力的案例。就我个人而言，我喜欢在界面中大胆使用插图，但评估插图的使用环境也很重要。

Amazon（亚马逊）的登陆页视觉设计上有些老旧，但对于管理用户注意力是一个很好的案例，巨大的黄色“继续”按钮以及页面上没有任何干扰，使登录任务看起来简单快速。

在登录页面上放置广告可能不是一个好主意，但同时 Yahoo（雅虎）有一个与众不同的标识在登录框中，其中设计了一些巧妙的功能，帮助用户减少输入。(参考下图)

我想把 Figma 纳入优秀的登录案例中，该页居中于浮层，Google 登录被突出展示（也许是 Figma 的首选和推广的登录形式？），它非常简洁，几乎是线框式的。用户体验非常好。

感谢我的产品合作伙伴 Apurva 和我一起学习。采取微小的步骤进行用户识别，并且使用户易于接受。这会使你的用户登录成功率越来越高！同时这也会为平台带来更多的活跃用户。:)希望你能从这篇文章中得到启发，并应用于你自己的产品和设计工作中。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、准备合约

本节课程教大家如何讲智能合约部署到conflux公链上，首先大家可以看到下面的这个智能合约是不是很简单。我们将会以这个合约演示部署到conflux公链的过程。

pragma solidity ^0.5.0;

contract Counter {
    uint public count=0;
    event SelfEvent(address indexed sender, uint current);

    constructor() public {
    } function inc(uint num) public returns (uint){ return count += num;
    } function self() public {
        emit SelfEvent(msg.sender, count);
    }
} 复制代码

二、conflux的sdk安装

我们使用js-conflux-sdk作为本教程的web教程，交互首先我们需要进行安装nodejs作为我们的运行环境。飞机票一张收下吧，我们安装好nodejs后，就可以来玩我们的sdk了。废话不多说，直接开始撸。

我们使用WIN + R键打开命令行，然后创建一个文件夹（温馨提示切换到非系统盘玩切换方式“D:”就切换到D盘了）使用“mkdir my-project && cd my-project” 创建好项目后自动进入文件夹，然后我们运行“npm init” 进行初始化node项目，这一步会让你确认一些东西，如果你是小白一路回车（Enter键）就好。如果你是前端大神，我也没啥好教的我也不太懂。为了稳定我们使用固定版本号方式安装依赖，我们运行 “npm install js-conflux-sdk@0.9.2” 命令进行安装js-conflux-sdk的0.9.2版本依赖（可以使用“npm uninstall package-name” 命令删除对应依赖）。前置准备到这里基本已经完成。

三、编写调用合约js代码

下面请看我的目录结构跟随我一起来学习，下面的目录结构请不要直接看到了就创建，因为你不知道都是什么意思，看玩我的解释在回头创建。

 

 

小伙伴应该已经发现了 node_modules、package-lock.json、package.json 这些文件是我们在进行安装 sdk依赖时自动生成的。其他文件目前都没有，我们来按顺序生成他们。

先创建sol这个文件夹，然后创建这三个文件。test.sol就是上面我们的合约代码直接拷入文件中。abi.json和code.json两个文件是通过这个工具 remix 在线生成的。我来说下生成过程。 首先我们将里面的文件全部删除，然后点击这里找到我们的项目目录下的test.sol 文件

 

 

 

 

我们应该看到下方我框出来的两个按钮了吧，那两个按钮就是abi.json和code.json文件的来源。abi.json我们可以直接复制过去，code.json文件我们要改点东西。

首先我们看到的code文件应该是这样的

{ "linkReferences": {}, "object": "608060405260...c63430005110032", "opcodes": "PUSH1 0x80 PUSH1 ... 1100 ORIGIN ", "sourceMap": "27:337:0 ... 37;;;;;;" } 复制代码

代码有省略，太长不好看，我们看到object这个key值了吧，我们把它的值考出来然后在头部加0x 就好了放在code.json文件中。code.js文件中只存放object的内容前面加0x，也就是下面的代码，其他信息都不要，千万记住了。这点很重要！！！！

"0x608060405260...c63430005110032" 复制代码

就是这样的。然后我们在写另外两个call和deploy两个文件

先写deploy文件

 // 私钥地址
const PRIVATE_KEY = '0x20f9169d40801955faada641cdb029f8e42c581c0c991a62753c736a0a168e5e';
// 合约地址
const CONTRACT = '';
const { Conflux } = require('js-conflux-sdk');

async function main() {
  const cfx = new Conflux({
    url: 'http://mainnet-jsonrpc.conflux-chain.org:12537',
    defaultGasPrice: 100,
    defaultGas: 1000000,
  });
  const account = cfx.Account(PRIVATE_KEY); // create account instance
  console.log(account.address); 

  // create contract instance
  const contract = cfx.Contract({
    abi: require('./sol/RC20.abi.json'),
    bytecode: require('./sol/RC20.code.json'),
  });

  const receipt = await contract.constructor()
    .sendTransaction({ from: account })
    .confirmed();
  console.log(receipt.contractCreated); 
}
main().catch(e => console.error(e)); 复制代码

打开项目cmd窗口在上面的目录下 运行命令 “node deploy.js”就将合约部署上去了

receipt.contractCreated 这个会打印出合约地址。

作者：悠悠_15832013094

链接：https://juejin.im/post/5ef563f75188252e99702335

来源：掘金

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

Conflux DApp 开发教程

对本教程有任何疑问或建议可以在 GitHub 给我们留言。

简介

Conflux DApp 开发教程将使用 Conflux Studio 在 Oceanus 网络下开发一个简单的代币应用 Coin。

通过这个开发教程，你将会学习到如何进行 Conflux 智能合约的编写、调用，配置智能合约的代付以及如何使用 Web 前端项目与智能合约进行交互，从而实现一个包含前端和智能合约的完整的 DApp。

在阅读教程中遇到任何问题，欢迎在 Issues 中向我们反馈。

准备工作

安装 IDE

请在 GitHub 下载页面下载 Conflux Studio。目前 Conflux Studio 支持 macOS 和 Linux 系统，请根据系统下载对应的版本。

正确安装 Conflux Studio 并初次启动后，Conflux Studio 将显示欢迎页面，根据提示完成 Docker, Conflux Node 以及 Conflux Truffle 的下载、安装及启动。

创建钱包

完成所有的安装步骤后，首先需要创建钥匙对来完成后续的合约部署以及调用。

在 Conflux Studio 的任意界面，点击应用左下⻆的钥匙图标，打开密钥管理器。点击 Create 按钮打开新钥匙对弹窗，输入钥匙对的名字并点击 Save 按钮。完成后将在密钥管理器中看到刚刚生成的钥匙对的地址。钥匙对由私钥和公钥组成，公钥在智能合约中也常被称作地址。

导出私钥可以通过点击每个地址后面的眼睛按钮打开查看私钥弹窗，弹窗显示地址以及私钥。后续教程中会需要通过管理器导出私钥。

为了顺利完成教程，首先需要创建三个钥匙对：

• minter_key 用于 Coin 合约部署时的签名，是这个教程中最常使用的钥匙对
• receiver_key 用于 Coin 合约接收转账，将在后文中介绍转账时用到
• sponsor_key 用于 Coin 合约代付功能，将在后文中介绍代付功能时用到

连接 Conflux 网络

教程将在 Oceanus 网络进行合约的部署以及合约的调用。点击顶部 Network 标签的倒三角打开下拉菜单，点击选择 Oceanus 网络进行切换。

切换完成后，可以在主页面中看到当前网络为 oceanus。页面左边包括了当前网络的节点 URL，Chain ID，TPS 信息，页面右边包含了当前网络区块的信息。

申请测试 CFX

点击顶部 Explorer 标签打开区块浏览器，并在地址栏粘贴钥匙对地址，可以在左边看到当前地址的 CFX 余额信息。

在区块链的世界中，大家通常将申请测试 Token 的方式称为 faucet，目前在 Oceanus 网络下每次 faucet 申请到的 Token 为 100 CFX。

获取 CFX 的方式有两种方式：

• 输入地址后点击地址栏右边的水龙头按钮，Conflux Studio 将为地址自动申请 CFX
• 你也可以直接在浏览器中输入 https://wallet.confluxscan.io/faucet/dev/ask?address={address} 来申请 CFX
  

使用上述方法在 Conflux Studio 中为 minter_key 和 sponsor_key 申请 CFX Token。完成申请后，这两个账户上的余额将会从 0 CFX 更新为 100 CFX。

目前余额信息为：

• minter_key 余额 100 CFX
• receiver_key 余额 0 CFX
• sponsor_key 余额 100 CFX

智能合约

创建项目

点击顶部左边的 Project 标签切换至项目列表页面，点击页面中的 New 按钮打开项目创建窗口，输入项目的名称并选择 coin 模版，点击 Create Project 完成项目的创建。

合约代码

Coin 合约是一个简单的代币合约，其中：

• 通过 mint 方法可以增发代币数量
• 通过 send 方法可以将一定数量的代币转账给别的用户，同时会在事件中记录下这笔转账的信息
• 通过 balanceOf 方法可以查询到指定账户地址的代币余额
• 通过 add_privilege 方法可以为合约添加代付白名单
• 通过 remove_privilege 方法可以为合约移除代付白名单
  

Conflux 智能合约使用 Solidity 语言进行开发，打开目录下的 contracts/Coin.sol 文件，这个是本项目的核心代码：

// 指定了 Solidity 的版本，通过 Pragmas(https://solidity.readthedocs.io/en/latest/layout-of-source-files.html#pragmas) 告诉编译器本代码可以兼容的版本为 0.5.0 到 0.7.0
pragma solidity >=0.5.0 <0.7.0;

// 导入 SponsorWhitelistControl 合约
import "./SponsorWhitelistControl.sol";

// 定义 Coin 的合约
contract Coin {
    // 定义了两个 State Variables(https://solidity.readthedocs.io/en/latest/structure-of-a-contract.html#state-variables)
    address public minter;
    mapping (address => uint) private balances;

    // 使用 SponsorWhitelistControl 合约连接系统合约
    SponsorWhitelistControl constant private SPONSOR = SponsorWhitelistControl(address(0x0888000000000000000000000000000000000001));

    // 定义了 `Sent` 的事件，定义了 from / to / amount 列
    event Sent(address from, address to, uint amount);

    // Coin 合约的 constructor ，在 constructor 中指定了 minter 的地址
    constructor() public {
        // msg.sender 为部署合约时签名的账户地址，将这个地址赋值给 minter
        minter = msg.sender;
    }

    // 定义 mint 方法，通过此方法来增发代币
    function mint(address receiver, uint amount) public {
        require(msg.sender == minter);
        require(amount < 1e60);
        balances[receiver] += amount;
    }

    // 定义 send 方法，通过此方法可以给别的账户转账代币
    function send(address receiver, uint amount) public {
        require(amount <= balances[msg.sender], "Insufficient balance.");
        balances[msg.sender] -= amount;
        balances[receiver] += amount;
        // 通过 emit 触发 Sent 事件，记录这笔转账的信息
        emit Sent(msg.sender, receiver, amount);
    }

    // 定义 balanceOf 方法，这是个 view 类型的方法，用于查询账户余额
    function balanceOf(address tokenOwner) public view returns(uint balance){
      return balances[tokenOwner];
    }

    // 定义了 add_privilege 方法，调用系统合约 add_privilege 方法添加地址到代付白名单
    function add_privilege(address account) public payable {
        address[] memory a = new address[](1);
        a[0] = account;
        SPONSOR.add_privilege(a);
    }

    // 定义了 remove_privilege 方法，调用系统合约 remove_privilege 从合约代付白名单中移除地址
    function remove_privilege(address account) public payable {
        address[] memory a = new address[](1);
        a[0] = account;
        SPONSOR.remove_privilege(a);
    }
} 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

编译及部署合约

点击工具栏的 Build 按钮进行合约的编译，编译的结果将会保存在 build/Coin.json 文件中。

在部署合约前，首先需要确认在 Explorer 中选择合约部署所使用的地址，Conflux Studio 会使用这个地址将部署合约这笔交易进行签名（选择的方法为在 Explorer 的地址栏中输入地址）。在合约代码的 constructor 中，minter 被赋值为 msg.sender，这个 msg.sender 就是 Explorer 所选择的地址。

在此我们选择 minter_key 作为部署合约的签名者。

点击工具栏的部署按钮进行部署，部署完成后，部署结果会在 deploys 的 JSON 文件中，在这个文件中可以在 contractCreated 中找到当前合约部署的地址，后文中使用 contract_addr 来代表这个合约地址。

调用合约

点击顶部的 Contract 标签切换至合约页面，在地址栏输入 contract_addr 地址并加载合约。

合约页面由三个部分组成：

• 左边为合约调用区域
• 中间为合约数据查询区域
• 右边为事件查询区域

合约调用及查询

增发代币

点击合约调用的下拉菜单中选择 mint 方法，在下方的参数区域分别填入以下信息：

• receiver 接收代币的地址。填入 minter_key 地址
• amount 发行的代币总数。填入整数 1000
• Value 选填项，具体可查看 Value 详解。填 0 或者不填
• Signer 这笔交易的签名地址，如果没有开通代付功能，交易手续费将在这个账户地址中扣除，在合约代码中通过 msg.sender 获取到这个地址。填入 minter_key 地址

填写完成后点击执行按钮，Conflux Studio 将自动构造交易并推送到网络中。成功执行后可以在下方 Result 中看到这笔成功的交易。

查询代币余额

点击查询区域的下拉菜单并且选择 balanceOf 方法，这是在代码中定义的查询方法。在下方的 tokenOwner 填入 minter_key 地址并点击执行，就可以在下方的 Result 中看到 minter_key 账户的 Coin 代币的余额信息为 1000。使用同样方法可以查询到 receiver_key 账户的代币余额为 0。

转账代币

在合约调用区域选择 send 方法，在 Parameters 中分别填入：

• receiver 收款人地址。填入 receiver_key 地址
• amount 转账的代币数量。填入整数 200
• Signer 这笔交易的签名地址，代币转出的数量将会在这个账户中扣除。填入 minter_key 地址，

点击执行完成转账，再次查询代币余额可以看到 minter_key 账户只剩下 800 代币，而 receiver_key 账户则从 0 变成了 200 代币。

Value 参数

Conflux 智能合约的每个调用的方法都可以带上 Value 参数，这是一个可选的参数。如果带上了这个值，智能合约出了在执行这个方法的逻辑外，还会额外转 Value 中指定数量的 CFX token 到 receiver 账户，转账金额为 Value 中所填的值。有些智能合约的方法需要这个参数才可以完成调用，但是在 Coin 合约不需要这个参数。

后文中的代付功能将会使用到 Value 参数。

查询事件

在事件区域选择 Sent 并点击执行，下方的 Event Logs 可以看到转账的记录。Sent 事件的列都是由代码中的 Sent 事件的参数来定义的（其中 epoch 为事件发生的时间，这个为系统默认列）。在代码中定义了 Sent 方法的参数为 from， to 和 amount，分别对应了这笔转账的发起者地址，接受者地址以及转账的数量。

代付功能

Conflux Studio 支持 Conflux 系统合约提供的代付功能。

通过系统合约可以为别的合约设置代付功能，系统合约提供给了四个方法：

• add_privilege 添加合约代付白名单，在代付白名单中的地址调用该合约的方法时不需要付手续费，费用由代付账户支付。其中添加特殊地址 0x0000000000000000000000000000000000000000 代表为所有调用该合约的地址代付费用
• remove_privilege 移除合约代付白名单
• set_sponsor_for_collateral 设置合约储存费 (collateral for storage) 的代付账户及代付金额
• set_sponsor_for_gas 设置合约手续费 (gas fee) 的代付账户、代付金额及每笔交易代付金额上限

启用一个合约的代付需要设置代付的账户、代付金额的及代付白名单。教程将会使用 Conflux Studio 通过系统合约设置代付账户及代付金额，通过 Coin 合约添加代付白名单。设置完成后，minter_key 账户调用 Coin 合约的方法时将不会被扣除手续费，手续费由 sponsor_key 账户代付。

设置代付账户及代付金额

在 Conflux Studio 中访问系统合约地址 0x0888000000000000000000000000000000000001，在合约调用区域能看到前文中提及的四个设置代付的方法。

选择 set_sponsor_for_collateral 方法，该方法有三个参数：

• contract_addr 设置代付的合约地址。填入 contract_addr
• Value 设置代付金额。填入整数 40
• Signer 代付账户地址。填入 sponsor_key 地址
  
  填好以上参数并执行运行，系统合约将为 Coin 合约设置好储存费代付账户，此时 sponsor_key 账户将会被扣除 40 CFX。

选择 set_sponsor_for_gas 方法，该方法有四个参数：

• contract_addr 设置代付的合约地址。填入 contract_addr
• upper_bound 设置每笔交易代付的上限。填入 1000000000000
• Value 设置代付金额。填入整数 40
• Signer 代付账户地址。填入 sponsor_key 地址
  
  填好以上参数并再次执行运行，系统合约将为 Coin 合约设置好手续费代付账户，此时 sponsor_key 账户将会再次被扣除 40 CFX。

完成这两个方法的调用后 Coin 合约代付账户便设置好了，sponsor_key 账户将为 Coin 合约的手续费和储存费各提供为 40 CFX Token 的代付服务。由于目前代付白名单中并没有账户地址，因此还需要添加白名单地址才能完成代付设置。

添加代付白名单

在 Coin 合约中集成了设置代付白名单的方法，通过调用此方法可以添加或删除代付白名单。

在 Conflux Studio 中访问 contract_addr 合约，选择 add_privilege 方法：

• account 添加白名单的地址。填入 minter_key 地址
• Value 不填
• Signer 这笔交易的签名地址。填入 minter_key 地址

运行后就成功设置了代付白名单了，至此 Coin 合约的代付功能设置好了。

代付测试

在进行代付测试前，先查询并记录下 minter_key 账户的 CFX 余额。例如本教程中，minter_key 的初始余额为 97.6210937497093952 CFX。

回到 Coin 合约调用页面，再次调用 mint 方法并使用 minter_key 地址增发代币 1000，完成代币增发后再次查询 minter_key 的余额，仍然为 97.6210937497093952 CFX。

可以看到增发代币的这笔交易，原本应该由 minter_key 账户支付的手续费，变成了由 sponsor_key 账户支付。

前端项目

前端项目源码可以前往 Conflux 前端。

预备

下载项目并安装依赖

• 下载前端项目：git clone https://github.com/ObsidianLabs/conflux-frontend-react
• 使用 npm install 或者 yarn 进行项目依赖安装

Conflux Portal 的安装及配置

Conflux Portal 是由 Conflux 提供的浏览器插件，目前提供了 Chrome 及 Firefox 的支持，用户可以使用 Conflux Portal 进行私钥的管理以及交易签名。

前往 Conflux Portal GitHub 下载安装。项目的源代码在 GitHub 中可以找到。

在这里需要将 Conflux Studio 中生成的地址导入到 Conflux Portal 中。完成插件安装后，在 Conflux Portal 的页面中选择 Import，将 Conflux Studio 中的 minter_key 的私钥（在创建钱包章节中介绍了如何将私钥导出）粘贴到输入框中，点击 Import 按钮完成私钥导入。

运行前端项目

在运行项目之前，需要修改一些默认的环境变量。

在前面的教程中部署合约后会生成一个 contractCreated，这个值便是部署在网络中智能合约的地址。打开项目根目录并找到 .env 文件，这个文件提供了项目的环境变量，将 REACT_APP_CONFLUX_COIN_ADDRESS 的值修改为 contract_addr。

使用 yarn start 启动前端项目，开发服务器运行起来后会在浏览器中打开前端页面（如果没有打开，请在浏览器中访问 http://localhost:3000）。

项目运行起来后，页面将显示四个卡片信息，分别为

• 左上角 Conflux 网络信息模块
• 右上角 Conflux Portal 模块
• 左下角 Coin 合约模块
• 右下角 SponsorWhitelistControl 合约模块
  

连接 Conflux Portal

点击右上角组件中的 Connect to Conflux Portal 按钮，Conflux Portal 页面将被打开，输入密码和选择账户后完成连接。连接成功后，将会在按钮下看到当前连接的账户地址以及账户中的 CFX 余额。

运行 Coin 合约代币增发和代币转账操作

左下角的组件为 Coin 合约组件，可以通过这个组件调用代币增发和代币转账功能。

• 代币增发：选择 mint 方法并在 receiver 中填入增发地址 minter_key 地址和在 amount 中填入增发代币的数量 100，点击 Push Transaction，在弹出的 ConfluxPortal Notification 窗口中点击 Confirm 按钮来确认交易。

• 代币转账：选择 send 方法并在 receiver 中填入收款人地址 receiver_key 地址和在 amount 中转账代币的数量 20，点击 Push Transaction，在弹出的 ConfluxPortal Notification 窗口中点击 Confirm 按钮来确认交易。
  

查看 Coin 合约中的余额

选择 balanceOf 方法并在 tokenOwner 输入框中填入查询的地址，点击 Query Data 按钮可以查询到账户的余额。

查看 Sent 事件

选择 Sent 事件并点击 Query Data 可以查询到转账操作所触发的转账事件的记录。

前端项目解析

项目使用 React 进行开发。主要由三大部分组成：视图组件、js-conflux-sdk 以及 Conflux Portal。

项目根目录下的 .env 环境变量，在这里定义了两个环境变量，分别为

• REACT_APP_CONFLUX_NODE_RPC：Conflux 的网络节点地址，目前默认为 Oceanus 网络的地址
• REACT_APP_CONFLUX_COIN_ADDRESS：已部署的 Coin 智能合约地址

视图组件

视图组件在项目的 src/components 中，其中 App.js 为页面的主入口，负责页面的排列及合约信息的读取。

ConfluxNetwork.js

负责渲染 Conflux 网络信息，Node URL 的值为 .env 环境变量文件下的 REACT_APP_CONFLUX_NODE_RPC 设置的值（默认为 Oceanus 网络）。

ConfluxPortal.js

负责渲染 Conflux Portal 的连接信息，并提供了连接 Conflux Portal 的交互按钮。

• connectConfluxPortal 调用 Conflux Portal 的 enable 方法启用 conflux （conflux portal 实例由浏览器插件注入到 windows.portal 中），完成 enable 后调用 getAccount 方法获取到 Portal 中的账户。
• refreshBalance 调用 Conflux SDK 的 getBalance 方法来更新账户余额信息
• renderPortalButton 根据当前不同的状态，渲染连接 Portal 的按钮

ConfluxContract.js

负责渲染 Conflux 合约信息，本项目中提供了 Coin 和 SponsorWhitelistControl 两个合约。

ConfluxContract.js 由三个组件组成，分别为：

• ConfluxContract 负责根据传入的合约 abi 来渲染合约的信息，包括合约地址、合约方法和事件，合约提交的交互逻辑及显示执行后的结果
• ContractMethods 负责渲染合约 abi 中的方法和事件的表单及相对应的按钮
• ConfluxForm 负责根据方法或事件的 abi 来渲染输入表单

lib

lib 在项目的 src/lib 中，这里的文件主要是为视图提供包括连接网络、构造交易、获取账户、读取合约等服务。

conflux.js

conflux.js 是 js-conflux-sdk 的封装。js-conflux-sdk 是由 Conflux 提供的 JavaScript SDK，本前端项目使用 SDK 来连接 Conflux 网络，和合约进行交互以及构造合约中的实例。

conflux-portal.js

conflux-portal.js 是 Conflux Portal 的封装，本前端项目通过调用浏览器插件来完成交易的签名。调用 Conflux Portal 提供的 enable 方法可以启动项目和 Conflux Portal 的连接（需要提前检查浏览器是否正确安装插件，在 constructor 中通过检查 window.conflux 是否为空来判断）。conflux-portal.js 提供了获取账户 getAccount 和发送交易 sendTransaction 两个主要的方法。

abi

lib/abi 文件夹下提供了两个 json 文件，分别为 Coin.json 和 SponsorWhitelistControl.json，这两个文件是构造合约所需要使用的 abi 文件。

总结

在本开发教程中，我们学习了如何使用 Conflux Studio 来完成一个完整的 Coin DApp 开发，其中包括了：

• 使用钥匙对管理器创建账户及导出账户私钥
• 切换 Oceanus 网络，查看网络信息
• 账户申请 CFX Token
• 创建、编译并部署项目
• 解析 Coin 合约代码，学习如何编写合约的读写方法及事件
• 使用合约浏览器调用 Coin 合约的代币增发、转账、查询余额及查询事件
• 设置并使用智能合约的代付功能
• 将私钥导入 Conflux Portal 并连接前端项目
• 在前端项目中调用 Coin 合约的代币增发、转账、查询余额及查询事件
• 解析前端项目代码，学习如何通过 Conflux Portal 和 Conflux JavaScript SDK 连接网络并实现交易

关于 Conflux Bounty

Conflux 基金会为了鼓励用户参与生态建设，提供了 Conflux Bounty 赏金平台。通过完成 Bounty 赏金平台发布的各项任务，参与者可以获得 FC (Fans Token) 作为奖励。

FC 的价值

FC，全称 Fans Coin，是由 Conflux 基金会与社区成员共同研发的生态代币，用于记录和感谢对 Conflux 生态建设做出贡献的社区成员。FC 目前在 Oceanus 上运行，Conflux 基金会承诺，在主网上线后，锁定和未锁定的 FC 都可以与主网 CFX 进行 1:1 承兑，以此保障所有社区成员的劳动成果都可以获得奖励。

FC 赏金分配方案会展示在赏金任务详情页中，包括最高奖金数量、奖金分配人数、奖金数量分布、排行名次确定方式等信息。账号余额中的赏金奖励可以随时申请提现至 Conflux 钱包。Conflux 团队会对所有的提现申请进行审核。

对于已经通过的提现申请，Conflux 团队会在每周二中午 12 点（如遇节假日，往后顺延至下一个工作日）进行提币操作。完成提币操作后，您的 Conflux 钱包将会收到您提现的赏金奖励。

Bounty 的价值

Conflux Bounty (https://bounty.conflux-chain.org) 的宗旨是为每一个通证找到价值。Bounty 分为几个板块：技术、品牌、社群、资源、其他等。

• 技术板块：分为产品、SDK、教程、开发、测试等；主要是奖励社区的一些技术资源贡献者。
• 品牌板块：分为文案、设计、视频、媒体、推广等；主要是奖励在各大网络平台分享 Conflux 的各种最新动态，扩大 Conflux 的生态影响力的活跃贡献者；
• 社群板块：分为活动、推广等；主要是奖励举办各种 Conflux 相关线上线下活动，帮助解答社群问题，活跃日常气氛等。
• 资源板块：分为政务、商务、人力等；主要是奖励为生态中引进企业资源，扩建Conflux 生态等。
• 其他板块：分为周边、采购等；主要是奖励一些其他的零散任务。

关于 Obsidian Labs

黑曜石实验室（Obsidian Labs) 是全球最大的区块链开发工具（IDE）提供商，也是 Conflux Studio 的开发团队，致力于为区块链开发者提供必备的工具及服务，帮助链上应用生态快速发展。目前，除了 Conflux Studio 外，Obsidian Labs 还为 EOS、Nervos、Substrate、Alogorand 等明星项目提供了专属的 IDE 和框架工具。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

转自：csdn
原文链接：https://blog.csdn.net/weixin_45029854/article/details/107638406
作者：Sam @黑曜石实验室
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

web3.js是以太坊提供的一个Javascript库，它封装了以太坊的JSON RPC API，提供了一系列与区块链交互的Javascript对象和函数，包括查看网络状态，查看本地账户、查看交易和区块、发送交易、编译/部署智能合约、调用智能合约等，其中最重要的就是与智能合约交互的API。

下面就介绍如何使用web3.js提供的接口调用智能合约。

系统和软件

    


        


            


            

        

        


            

                Ubuntu 16.04 64位
            

        

    

    


        


            


            

        

        


            

                nodejs 6.10.0
            

        

    

    


        


            


            

        

        


            

                npm 3.10.10
            

        

    

示例合约

本文以下面的MetaCoin合约为例，说明在应用中使用web3.js操作智能合约的方法。

    


        


            


            

        

        


            

                // 本文中用到的MetaCoin合约
            

        

    

    


        


            


            

        

        


            

                pragma solidity ^0.4.2;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                contract MetaCoin {
            

        

    

    


        


            


            

        

        


            

                mapping (address => uint) balances;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                event Transfer(address indexed _from, address indexed _to, uint256 _value);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function MetaCoin() {
            

        

    

    


        


            


            

        

        


            

                balances[tx.origin] = 10000;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function sendCoin(address receiver, uint amount) returns(bool sufficient) {
            

        

    

    


        


            


            

        

        


            

                if (balances[msg.sender] < amount) return false;
            

        

    

    


        


            


            

        

        


            

                balances[msg.sender] -= amount;
            

        

    

    


        


            


            

        

        


            

                balances[receiver] += amount;
            

        

    

    


        


            


            

        

        


            

                Transfer(msg.sender, receiver, amount);
            

        

    

    


        


            


            

        

        


            

                return true;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function getBalance(address addr) returns(uint) {
            

        

    

    


        


            


            

        

        


            

                return balances[addr];
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

这个合约有三个函数：

MetaCoin：构造函数，在合约被部署到区块链时执行 
getBalance：返回某账户的余额，它只读数据，不会修改数据 
sendCoin：向另一个账户发送指定数量的MetaCoin，它会改变状态变量balances 
启动一个以太坊节点，将上面的合约部署到区块链中，并记录下合约的地址，可以通过truffle部署，具体参考这篇文章。 接下来就可以按照下面的步骤在项目中通过web3.js来使用这个合约。

添加web3到项目中

首先新建一个Nodejs项目并初始化：

    


        


            


            

        

        


            

                $ mkdir web3test && cd web3test
            

        

    

    


        


            


            

        

        


            

                $ npm init
            

        

    

会提示输入项目信息，全部默认即可。 
接下来下载web3.js到项目中：

$ npm install web3 --save 

• 1
• 2

以上命令会将web3.js下载到web3test/node_modules目录下，其中–save参数会web3.js添加到package.json配置文件中。

创建web3对象

要使用web3.js与区块链交互，需要先创建web3对象，然后连接到以太坊节点。 在web3test目录下新建index.js文件，在其中输入以下代码：

    


        


            


            

        

        


            

                var Web3 = require("web3");
            

        

    

    


        


            


            

        

        


            

                // 创建web3对象
            

        

    

    


        


            


            

        

        


            

                var web3 = new Web3();
            

        

    

    


        


            


            

        

        


            

                // 连接到以太坊节点
            

        

    

    


        


            


            

        

        


            

                web3.setProvider(new Web3.providers.HttpProvider("http://localhost:8545"));
            

        

    

获取已部署的合约实例

要使用智能合约，必须先从区块链中获取到合约实例，获取合约实例需要合约的ABI和合约的地址：

    


        


            


            

        

        


            

                // 合约ABI
            

        

    

    


        


            


            

        

        


            

                var abi = [{"constant":false,"inputs":[{"name":"receiver","type":"address"},{"name":"amount","type":"uint256"}],"name":"sendCoin","outputs":[{"name":"sufficient","type":"bool"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"addr","type":"address"}],"name":"getBalance","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"inputs":[],"payable":false,"type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"_from","type":"address"},{"indexed":true,"name":"_to","type":"address"},{"indexed":false,"name":"_value","type":"uint256"}],"name":"Transfer","type":"event"}];
            

        

    

    


        


            


            

        

        


            

                // 合约地址
            

        

    

    


        


            


            

        

        


            

                var address = "0xb2cdd356e58280906ce53e1665697b50f88aac56";
            

        

    

    


        


            


            

        

        


            

                // 通过ABI和地址获取已部署的合约对象
            

        

    

    


        


            


            

        

        


            

                var metacoin = web3.eth.contract(abi).at(address);
            

        

    

metacoin就是获取到的合约对象实例，此时metacoin对象中就包含了与合约函数同名的Javascript函数，之后就可以通过metacoin对象来调用合约中的函数了。

调用合约函数

MetaCoin合约中有两个函数：getBalance和sendCoin，可以通过metacoin对象直接调用这两个函数。

首先来看getBalance，由于getBalance函数只是从区块链中读数据，而不修改数据，因此我们通过在getBalance后面加上.call()的方式调用：

    


        


            


            

        

        


            

                var account_one = web3.eth.accounts[0];
            

        

    

    


        


            


            

        

        


            

                var account_one_balance = metacoin.getBalance.call(account_one);
            

        

    

    


        


            


            

        

        


            

                console.log("account one balance: ", account_one_balance.toNumber());
            

        

    

这里：

在getBalance后加上.call()来显式指明用call的方式调用 
通过call的方式调用可以得到getBalance函数的返回值 
通过call的方式调用的函数只在节点本地虚拟机中执行，不会产生交易，不会花费费用，不会修改数据 
下面来看sendCoin函数，由于sendCoin要修改合约内部的数据，所以要使sendCoin生效，必须要向区块链发送交易，可以在sendCoin后面加上.sendTransaction()来指明这是一笔交易：

    


        


            


            

        

        


            

                var account_one = web3.eth.accounts[0];
            

        

    

    


        


            


            

        

        


            

                var account_two = web3.eth.accounts[1];
            

        

    

    


        


            


            

        

        


            

                // 提交交易到区块链，会立即返回交易hash，但是交易要等到被矿工收录到区块中后才生效
            

        

    

    


        


            


            

        

        


            

                var txhash = metacoin.sendCoin.sendTransaction(account_two, 100, {from:account_one});
            

        

    

    


        


            


            

        

        


            

                console.log(txhash);
            

        

    

这里：

在sendCoin函数后加上.sendTransaction()指明要向区块链发送交易 
合约代码中sendCoin函数只有两个参数，而在web3中通过.sendTransaction()调用合约函数的时候需要增加最后一个参数，它是一个javascript对象，里面可以指定from/value/gas等属性，上面的例子用from来指定交易的发送者 
上面的调用语句执行后，会向区块链提交一笔交易，这笔交易的发送者是account_one，接收者是metacoin的地址，交易的作用是以account_two和100作为参数执行合约的sendCoin函数 
函数会立即返回交易的hash，表明交易已经提交到区块链，但是并不知道交易何时处理完成，交易要等到被旷工收录到区块中后才会生效 
监听合约事件

当通过.sendTransaction()调用合约的时候，交易会被提交到区块链进行处理，这个处理需要一定的时间，如果需要等交易完成之后再执行其他操作，就必须要知道交易何时完成，那么如何知道交易何时完成呢？可以通过监听合约事件来实现。

在合约中可以定义事件，事件可以带有参数，在合约函数内部完成某些操作时，可以触发事件，向外界传达一些信息。例如，在MetaCoin合约中定义了一个事件叫做Transfer，表示一个转账的事件，它带有三个参数：交易的发送者、接受者、转账数量。在sendCoin函数中，转账成功后就会触发Transfer事件，将对应的参数传给该事件，这样外部监听到事件后，可以取出事件的参数来获得交易发送者、接收者、数量。同时事件中还带有其他信息，比如交易hash等。

在web3中使用事件，要首先获取事件对象，然后监听事件，如果事件发生，就会在回调函数中获取到事件信息：

    


        


            


            

        

        


            

                // 获取事件对象
            

        

    

    


        


            


            

        

        


            

                var myEvent = metacoin.Transfer();
            

        

    

    


        


            


            

        

        


            

                // 监听事件，监听到事件后会执行回调函数
            

        

    

    


        


            


            

        

        


            

                myEvent.watch(function(err, result) {
            

        

    

    


        


            


            

        

        


            

                if (!err) {
            

        

    

    


        


            


            

        

        


            

                console.log(result);
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                console.log(err);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                myEvent.stopWatching();
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 输出：
            

        

    

    


        


            


            

        

        


            

                { address: '0xb2cdd356e58280906ce53e1665697b50f88aac56',
            

        

    

    


        


            


            

        

        


            

                blockNumber: 651,
            

        

    

    


        


            


            

        

        


            

                transactionIndex: 0,
            

        

    

    


        


            


            

        

        


            

                transactionHash: '0xcc71bc2824cc84d1ee831c46189e3a80cf0af05697ba0370693aa97390c8067b',
            

        

    

    


        


            


            

        

        


            

                blockHash: '0x1d53f04206f3926d0f311b1230a9dd0b0c5aadac35b169a6a609e384ab130c6f',
            

        

    

    


        


            


            

        

        


            

                logIndex: 0,
            

        

    

    


        


            


            

        

        


            

                removed: false,
            

        

    

    


        


            


            

        

        


            

                event: 'Transfer',
            

        

    

    


        


            


            

        

        


            

                args:
            

        

    

    


        


            


            

        

        


            

                { _from: '0x68b73956d704007514e9257813bdc58cdf3c969a',
            

        

    

    


        


            


            

        

        


            

                _to: '0x9c3c1a2f5ef913fac44f0348a78f68d835f3f26e',
            

        

    

    


        


            


            

        

        


            

                _value: { [String: '100'] s: 1, e: 2, c: [Object] } } }
            

        

    

从输出可以看出，获取到的事件信息包括事件的参数、事件名、区块号、交易hash等。

通过检测事件中的transactionHash与调用合约函数返回的交易hash是否一致，可以判定某一笔交易是否已完成：

    


        


            


            

        

        


            

                var account_one = web3.eth.accounts[0];
            

        

    

    


        


            


            

        

        


            

                var account_two = web3.eth.accounts[1];
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                var account_one_balance = metacoin.getBalance.call(account_one);
            

        

    

    


        


            


            

        

        


            

                console.log("account one balance:", account_one_balance.toNumber());
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                var txhash = metacoin.sendCoin.sendTransaction(account_two, 100, { from: account_one });
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                var myEvent = metacoin.Transfer();
            

        

    

    


        


            


            

        

        


            

                myEvent.watch(function (err, result) {
            

        

    

    


        


            


            

        

        


            

                if (!err) {
            

        

    

    


        


            


            

        

        


            

                if (result.transactionHash == txhash) {
            

        

    

    


        


            


            

        

        


            

                var account_one_balance = metacoin.getBalance.call(account_one);
            

        

    

    


        


            


            

        

        


            

                console.log("account one balance after sendCoin:", account_one_balance.toNumber());
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                console.log(err);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                myEvent.stopWatching();
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 输出：
            

        

    

    


        


            


            

        

        


            

                account one balance: 7000
            

        

    

    


        


            


            

        

        


            

                account one balance after sendCoin: 6900
            

        

    

watch中的回调函数如果被执行，说明事件已被触发，也就是说某笔交易已经处理完，检查交易hash是否一致，可以判定产生这个事件的交易是否是自己发送的交易，如果是，就可以进行其他操作，比如查询最新的余额

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

这篇文章多看几遍加深理解

async function 声明定义了一个异步函数，它返回一个AsyncFunction对象。异步函数 是指通过 事件循环（event loop） 异步执行的函数，通过返回一个隐式的 Promise 作为其结果。使用异步函数的代码的语法和结构更像使用标准同步功能。（The async function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. But the syntax and structure of your code using async functions is much more like using standard synchronous functions.
）

语法

async function name([param[, param[, ... param]]]) { statements } 


    

        1
    

参数：

• name：函数名称
• param：要传递给函数的参数。
• statements：函数体语句。

返回值：返回一个promise对象，将返回异步函数返回的值（如果异步函数是resolved则返回resolved的值；如果抛出异常，则rejected从异步函数中抛出的异常）。（A Promise which will be resolved with the value returned by the async function, or rejected with an uncaught exception thrown from within the async function.）

异步函数可以包含await表达式，该表达式暂停异步函数的执行 并等待 Promise的执行结果返回，结果返回后就恢复异步函数的执行。

await 关键字只在异步函数（async functions）内有效。如果在异步函数外使用它，会抛出语法错误。
当异步函数暂停时，它调用的函数仍会继续执行。

举例一：

function resolveAfter5Seconds() { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 5000); }); } async function asyncCall() { console.log('calling'); let result = await resolveAfter5Seconds(); console.log(result); // 5s之后输出结果 } asyncCall(); //返回的是一个promise对象 // console.log(asyncCall()); // Promise { <pending> } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

运行效果：

举例二：

let resolveAfter6Second = function () { console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }) } let resolveAfter4Second = function () { console.log('start fast promise'); return new Promise(resolve => { setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let sequentialStart = async function () { console.log('sequential start'); const slow = await resolveAfter6Second(); console.log(slow); const fast = await resolveAfter4Second(); console.log(fast); } sequentialStart() //立即输出 // sequential start // start slow promise //再过6秒后输出 // slow promise is done // slow // start fast promise //再过4秒后输出 // fast promise is done // fast 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

运行效果：

换一种await的写法，结果完全不同：两个计时器被同时创建

let resolveAfter6Seconds = function () { console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }) } let resolveAfter4Seconds = function () { console.log('start fast promise'); return new Promise(resolve => { setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let concurrentStart = async function () { console.log('concurrent start'); let slow = resolveAfter6Seconds(); let fast = resolveAfter4Seconds(); console.log(await slow); console.log(await fast); } setTimeout(() => { concurrentStart(); }, 2000); //2秒后执行 // concurrent start // start slow promise // start fast promise //再过4秒后执行 // fast promise is done //再过2秒后执行 // slow promise is done // slow // fast 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

运行效果：

在 concurrentStart 中，两个计时器被同时创建，接着执行await。等待的是 promise的resolve回调，resolve后面的代码（ console.log(‘fast promise is done’);）会继续执行。
这两个计时器同时运行。但是 await 仍旧是顺序执行的，第二个 await 还是得等待第一个执行完。在这个例子中，这使得先运行结束的输出出现在最慢的输出之后。
也可以把 concurrentStart 改写成如下，运行效果一样：

let resolveAfter6Seconds = function () { console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }) } let resolveAfter4Seconds = function () { console.log('start fast promise'); return new Promise(resolve => { setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let concurrentPromise = async function () { console.log('concurrent start'); return Promise.all([resolveAfter6Seconds(), resolveAfter4Seconds()]).then((messages) => { console.log(messages[0]); // slow console.log(messages[1]); // fast }); } setTimeout(() => { concurrentPromise(); }, 2000); //2秒后输出 // concurrent start // start slow promise // start fast promise //再过6秒后输出 // fast promise is done //再过2秒后输出 // slow promise is done // slow // fast 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

并行执行两个或更多的任务，如下例所示：

let resolveAfter6Seconds = function () { console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }) } let resolveAfter4Seconds = function () { console.log('start fast promise'); return new Promise(resolve => { setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let parallel = async function () { console.log('start paralel'); await Promise.all([ (async () => console.log(await resolveAfter6Seconds()))(), (async () => console.log(await resolveAfter4Seconds()))() ]); } setTimeout(parallel, 2000); //2秒后输出 // start paralel // start slow promise // start fast promise //再过4秒后输出 // fast promise is done // fast //再过2秒后输出 // slow promise is done // slow 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

运行效果：

如果希望并行执行两个或更多的任务，你必须像在parallel中一样使用await Promise.all([job1(), job2()])

也可以把parallel改写成如下，运行效果一样：

let resolveAfter6Seconds = function(){ console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }); } let resolveAfter4Seconds = function(){ console.log('start fast promise'); return new Promise(resolve =>{ setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let parallelPromise = function(){ console.log('parallelPromise start'); resolveAfter6Seconds().then(msg => console.log(msg)); resolveAfter4Seconds().then(msg => console.log(msg)); } setTimeout(() => { parallelPromise(); }, 2000); //2秒后输出 // parallelPromise start // start slow promise // start fast promise //再过4秒后输出 // fast promise is done // fast //再过2秒后输出 // slow promise is done // slow 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

async/await和Promise#then对比以及错误处理：
大多数异步函数（async functions ）也可以使用 Promises函数 编写。然而，当涉及到错误处理时，异步函数不太容易出错。
上面例子中的concurrentStart函数和concurrentPromise函数在功能上都是等效的。在concurrentStart函数中，如果任一awaited调用失败，它将自动捕获异常，异步函数执行中断，并通过隐式返回Promise将错误传递给调用者。
在Promise例子中这种情况同样会发生，函数必须负责返回一个捕获函数完成的Promise。在concurrentPromise函数中，这意味着它从Promise.all([]).then()中返回一个Promise。事实上，在此示例的先前版本忘记了这样做！
但是，async函数仍有可能然可能错误地忽略错误。
以parallel异步函数为例。 如果它没有等待await（或 return）Promise.all([])调用的结果，则不会传播任何错误。
虽然parallelPromise函数示例看起来很简单，但它根本不会处理错误！ 这样做需要一个类似于return Promise.all([])处理方式。（详见）

使用async函数重写 promise 链

返回 Promise的 API 将会产生一个 promise 链，它将函数分解成许多部分。例如下面的代码：

function getProcessedData(url) { return downloadData(url)// returns a promise .catch(e => { return downloadFallbackData(url);// returns a promise }) .then(v => { return processDataInWorker(v);// returns a promise }) } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

可以重写为单个async函数：

async function getProcessedData(url) { let v; try { v = await downloadData(url); } catch (e) { v = await downloadFallbackData(); } return processDataInWorker(v); } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

在上述示例中，return 语句中没有 await 操作符，因为 async function 的返回值将被隐式地传递给 Promise.resolve。

return await promiseValue; 与 return promiseValue;的比较

返回值隐式的传递给Promise.resolve，并不意味着return await promiseValue;，只是在功能上等同于返回return promiseValue;。
重写的上面代码，在processDataInWorker抛出异常时返回null：

async function getProcessedData(url) { let v; try { v = await downloadData(url); } catch(e) { v = await downloadFallbackData(url); } try { return await processDataInWorker(v); // 注意 `return await` 和单独 `return` 的比较 } catch (e) { return null; } } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

简单地写上return processDataInworker(v);将导致在processDataInWorker(v)出错时function返回值为Promise而不是返回null。

return foo;和return await foo;有一些细微的差异：
return foo;不管foo是promise还是rejects都将会直接返回foo。相反地，如果foo是一个Promise，return await foo;将等待foo执行(resolve)或拒绝(reject)，如果是拒绝，将会在返回前抛出异常。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一套完善的产品化设计系统，可以解决内部协作的一致性问题，解决设计系统更新的周期性问题，解决一群设计师与工程师如何规模化的生产各种业务、UI的问题，从而最终解决用户体验一致性的问题。说到自己，公司的产品从接手开始便是以antdesign作为前端框架，所以很多人会说后台用antdesign、Element或者Taro的框架就足够了呀，当然不～在已有的成熟框架下，也并不能完全满足产品日（sang）益（xin）旺（bing）盛（kuang）的需求，所以设设计规范还是很有必要的。

作为B端设计师，视觉表现层面权重逐渐减少，更多的是需要梳理逻辑流程，将线下业务更好的梳理到线上流程，所以熟知设计规范可以更效率的完成工作。

设计规范的目的：

1、解决内部协作的一致性问题

为设计师内部沟通协作起到决定作用，当同一个项目存在多个设计师横向设计的时候，设计规范会避免颜色错误、间距失调、控件混乱等问题。

2、解决设计系统更新的周期性问题

随着产品的不断推进和发展，为了新增的需求和不断优化的用户体验，这时候会需要对某些规范控件进行调整，在有设计规范的情况下，可以迅速对接开发快速全局调整控件，极大的提升了设计和开发的工作效率。

3、解决设计师与工程师如何规模化的生产各种业务

关于和开发对接，图标在如今有了iconfont的项目管理下，项目可以建立自己的图标库。再加上设计建立的可复用的公共控件库，开发可以更加快捷的复用控件，减少返工率，也为后期的修改降低开发成本。

关于建立后台设计规范：

首先要了解项目适用的主要场景，也就是用户爸爸一般是在什么情况下用什么样的设备来进行操作的，然鹅你永远不知道会有什么的场景和什么样奇葩的设备在等待你。在后台的设计群一直有一个经久不衰的话题，那就是后台设计的设计分辨率是向下适配还是向上适配更合适（是1980*1080 还是 1440*900 ），这两者都是可以的，本案由于用户使用笔记本的情况居多，且设备并不是很新所以采用1440*900的分辨率向上适配1980向下适配1200。
在清楚的了解到项目背景之后，开始着手于设计规范的建立，这里关于设计规范的建立是随着设计的不断深入从而不断完善的，不必刻意深入，但是要随时更新规范文档。

关于页面构成

开发与设计所理解的页面是不一样的，所以会造成开发出来的页面有时候会因为各种原因与高保真相差较大，在设计看来（比如sketch），一个页面是由多个组结合而来，每个组里包含一个或多个字段、图片和图标等，在调整大小、间距、颜色之后慢慢成为高保真。而在开发的角度来看，整个页面就是由多个box构成，盒子与盒子之间存在空白间隔，且盒子存在一定的属性，例如盒子默认对齐于左上，盒子之间相互嵌套或覆盖需要基于所属盒子来定位。

颜色

根据品牌背景和产品定位来确定你的品牌色，用于字体、icon、按钮、插画等业务流程。功能色则是为特殊场景，例如失败、成功、提醒等情况。

字体

通过购买商用字体或使用免费字体来使用，如果选用免费字体同时也要注意区分系统，通常情况下mac系统使用默认字体苹方字体，windows系统使用微软雅黑。如今免费等字库已经越来越多了，所以这对设计师来说是一个好消息，今年阿里也在UCAN上公布了普惠体，年尾oppo也推出了自己的免费字体，文章末尾附上群友整理的免费字体导图。

边角

倒角的使用可以起到样式的区分，从而让用户感知到功能区域的分别。

图标

快速帮助用户理解产品并顺利完成操作，好的图标具有高度浓缩并快捷传达、便于记忆的特性，能够更好的传达品牌特性。

阴影

阴影的添加可以更好的提高界面品质，让用户易于区分功能区域

按钮

按钮是传达它将要发起动作的载体。 用户可以点击一个按钮来开始一个过程或工作流程，或触发一个动作。

用法：

1、要传达重要的行动。如：提交表单；

2、要导航到另一个屏幕，触发一个模式或启动一个动作。如：在进程中指定新的动作或模式；

3、按钮上的文本应保持简洁，带着明确、可操作的动词，例如：注册、下一步、下载 ；

4、优先考虑最重要的行动。行动号召太多会引起混乱，并使用户不知道下一步该做什么。

选择输入框

如无特殊需求，则默认采用框架内输入框，特殊情况可同研发一起讨论修改。这边因为一些特殊原因，在修改了代码的情况下实现了标题、选择、输入同时在框架内，这样为寸土寸金的后台界面留出了更多的空间。

表格

表格在后台系统中无处不在，对数据管理和分析起到了重要的作用，方便用户阅读，分析和比较数据。表格一般由表头、表尾、数据单元格组成。

模态/非模态弹窗

用户交互的两种方式，模态弹窗强制交互完成当前操作流程，非模态则是弱提示。

缺省状态

缺省页是指操作异常状态下给予用户反馈的提示页面，它的作用不仅是提醒用户，安抚情绪；更重要的是用“空白”触发用户的操作行为，营造良好用户体验。

结语

以上是我对于设计规范的部分总结，还有很多没有涉及到，包括非常重要的可视化部分，可以多了解一下ECharts（https://www.echartsjs.com/zh/index.html），然后希望可以和大家互相学习。设计规范的建立是长征的第一步，贯彻执行才是根本，在B端庞大的设计系统中，我们需要维护好产品的组件库，不断的完善用户体验和清晰的梳理线上业务，保证产品的功能需求才是重中之重。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务