解密腾讯前端技术体系

最新推荐文章于 2025-04-21 09:03:14 发布
最新推荐文章于 2025-04-21 09:03:14 发布
阅读量668 收藏 10
点赞数 4
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85599558/article/details/142154527
版权

wepy - 小程序组件化开发框架

原生小程序开发方式相对比较封闭，无法利用前端开发的完整体系生态，于是wepy就希望通过组件化、现代前端式的开发方式引入到小程序开发中。

WePY (发音: /'wepi/) 项目启动于 2017 年 11 月份， 是小程序最早的框架之一，是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。

特性：

  • 使用 Vue Observer 实现数据绑定

  • 支持 Vue watch/computed/mixin 等特性

  • 基于原生组件实现组件化开发

  • 支持 TypeScript

小程序开发框架目前在业界已经百花齐放，上图就是一个对比，可以看到对于小程序多端开发的诉求是非常高的，wepy对于小程序类型支持略显不足，同时也没有移动端容器支持的能力，但其在流行程度和组件丰富度上还是占据优势。

westore - 微信小程序解决方案

https://github.com/Tencent/westore

受 Omi 框架 的启发，且专门为小程序开发的 JSON Diff 库，所以有了 westore 全局状态管理和跨页通讯框架让一切尽在掌握中，且受高性能 JSON Diff 库的利好，长列表滚动加载显示变得轻松可驾驭。总结下来有如下特性和优势:

  • 和 Omi 同样简洁的 Store API

  • 超小的代码尺寸(包括 json diff 共100多行)

  • 尊重且顺从小程序的设计(其他转译库相当于反其道行)

  • 增强 data 数据绑定，函数属性可直接绑定到 WXML

  • this.update 和 setData 语法类似，但返回一个Promise

  • this.update 比原生 setData 的性能更优，更加智能

  • Westore 专为小程序插件开发定制了模板

  • Westore 集成了腾讯云开发

解决了小程序的痛点:

  • 使用 this.data 可以获取内部数据和属性值，但不要直接修改它们，应使用 setData 修改

  • setData 编程体验不好，很多场景直接赋值更加直观方便

  • setData 卡卡卡慢慢慢，JsCore 和 Webview 数据对象来回传浪费计算资源和内存资源

  • 组件间通讯或跨页通讯会把程序搞得乱七八糟，变得极难维护和扩展

5 UI组件库

===========

WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

WeUI提供了表单、基础组件、操作反馈、导航相关、搜索相关、层级规范等方面的组件库，下图就是部分表单、列表、选择器的组件示例。通过这套UI组件库，可以在微信Web生态中打造出和微信原生体验一致的界面风格，可以保证用户的体验。

腾讯云图

腾讯云图（Tencent Cloud Visualization，TCV） 是一站式数据可视化展示平台，旨在帮助用户快速通过可视化图表展示海量数据，10 分钟零门槛打造出专业大屏数据展示。精心预设多种行业模板，极致展示数据魅力。采用拖拽式自由布局，无需编码，全图形化编辑，快速可视化制作。腾讯云图支持多种数据来源配置，支持数据实时同步更新，同时腾讯云图基于 WEB 页面渲染，可灵活投屏多种屏幕终端。

6 跨平台

=========

Hippy - 多端一体化方案

Hippy 作为前终端的一体化方案，其拥抱W3C标准，通过自绘和源生混合绘图组件复用以追求极致性能，并不断接入实现更多优质组件。其已经在浏览器上应用了数十个内外部业务，承载了数十亿计的用户访问量，拿下了公司内部2018年年度代码文化奖。

对于多端一体化的研发方式，业界一直在探索，例如React Native、Weex实现了通过JS编写、Native渲染很好的平衡了研发效率和渲染效率，但是依旧无法直接实现Web/Native的多端一体化，因此依旧需要寻找一个框架可以在多端实现跨平台、高性能、动态化发布的开发解决方案。

项⽬目架构 Hippy SDK 采⽤用三层设计，其中：

  • JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境；目前支持前端主流框架，例如React、Vue

  • C++ 层：JavaScript运行时接口的封装；任务调度器包含延迟任务、优先级管理、事件循环等等；提供基础 UI 组件与布局计算框架，并负责渲染⾄至⽬目标平台；

  • Native Framework 层：负责前终端通讯与 JavaScript VM，并提供 Native 相关模块；

从Hippy-React架构中可以看到其如何支持三端：

  • Web端：依赖Hippy-React-Web将Hippy React代码转换成React-Dom，然后再渲染到Web浏览器

  • Android/iOS：通过运行时的C++布局引擎对Hippy React代码进行解析得到类似React Element对象，里面会含有组件对象的基本属性(name/props/events等)，再通过React-Reconciler进行转换成对应的FiberNode，然后再通过Native Renderer渲染出原生组件。

Hippy目前来看拥有以下特点：

  • 拥抱社区：即将开源，同时会紧跟W3C标准，将来开源后可能会有更多的社区去丰富其组件

  • 追求性能：采用Binding模式的前终端通讯方式，提升Web和Native之间的通信性能，同时基于C++的接口封装、任务调度、UI/布局计算框架等等，都达到了高性能渲染能力

  • 更多组件：支持Canvas、Lottie/PAG动画、腾讯地图

  • 设计适用：设计稿直出代码

omi - 前端跨端平台

Omi (读音 /ˈomɪ/，类似于 欧米) 是跨框架框架，基于 Web Components 设计，也可以使用相同语法的 omio 兼容 IE8+。支持 PC Web、移动 H5 和小程序开发(One framework, Mobile & desktop & mini program)。

相对于React或者Vue现在主流的前端框架而言，Omi有以下特点：

  • 4KB 的代码尺寸，比小更小

  • 顺势而为，顺从浏览器的发展和 API 设计，Webcomponents + JSX 相互融合为一个框架 Omi，Webcomponents 也可以数据驱动视图, UI = fn(data)

  • Shadow DOM 与 Virtual DOM 融合，Omi 既使用了虚拟 DOM，也是使用真实 Shadow DOM，让视图更新更准确更迅速

  • 类似 WeStore 体系，99.9% 的项目不需要什么时间旅行,也不仅仅 redux 能时间旅行,请不要上来就 redux，Omi store 体系可以满足所有项目

基于omi，现在已经有了一整套完整的生态支持：

  • omip：小程序和H5跨端开发

  • omix：小程序开发框架

  • omi-router：路由

  • omi-cli：脚手架工程

  • …

Kbone - 前端和小程序同构框架

Kbone 这个方案出现，源自于一个需求：微信开放社区当时只有 Web 端，为了让信息可以更方便地传播、分享和使用，希望实现社区小程序版，交互体验尽量贴近于 Web 端。

此次同构到小程序端需要考虑几个因素：多端代码复用、尽可能支持已有的特性和性能要有保证。其实最主要的就是要在尽量不改动现有代码的情况下来完成小程序的开发。

Kbone 这个适配器方案的大致设计思路，我们将其归纳为两个模块：仿造接口和自定义组件。正因为这个方案是通过提供适配器的方式来仿造出 Web 环境，所以用户代码不需要做任何魔改，大部分特性都可以继续使用不需要被删减，比如 vue-router、window.location 操作等。

不同于其他前端和小程序同构框架通过语法转译的方案，Kbone通过实现仿造Dom接口，从而让上层前端代码无须太多改变。Kbone 这套方案最大的优势：扩展性强、对各个特性的支持全面、对代码编写的要求少以及自由度高、不需要魔改 Web 框架的底层实现，这样对于代码的维护、升级也都更为简单方便。

7 工程化

=========

腾讯Now直播团队在2019 ArchSummit大会上分享了团队在工程化相关建设的思考，从中可以得到不少启发。

前端工程化不再是简单的Webpack打包、部署而已，从完整的研发流程来看，可以涵盖创建项目、本地开发、功能测试、发布、线上监控多个环节，每个环节又有各自需要建设的基础能力，只有有了这些Devops的能力，才能促使研发团队技术的标准化，提高研发运维效率。

分享中重点提到了打造前端工程化几个方面的思考：

总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结

最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结

最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结

2401_85599558
关注
腾讯web前端框架JX
一万年太久 - 只争朝夕
03-19 5985
JX 是模块化的非侵入式Web前端框架，开发于2008年，并于2009年开源于GoogleCode - http://code.google.com/p/j-et/，于2012年切换到Github，开始我们开源计划的新征途，请记住我们的最新开源地址：https://github.com/AlloyTeam/JX，欢迎访问我们的团队Blog - http://www.alloyteam.
web前端技术体系大全
m0_64460287的博客
03-13 477
5、Swagger（API 的设计、编写 API 文档、测试和部署）ant-design-mobile（react移动端）vue-element-admin（vue后台管理）5、ant-design系列（蚂蚁金服出品）ant-design（react web端）iview-weapp（vue微信小程序）iview-admin（vue后台管理）iview-admin（vue后台管理）ant-design（vue web端）6、inMap（iview的地图可视化）8、Flutter（vue移动端）
TDesign：腾讯的企业级前端框架，对标elementUI和ant-design
2401_82943878的博客
04-19 2370
TDesign 的设计理念秉承包容、多元、进化和连接的价值观，旨在与用户、行业及合作伙伴一起打造具有竞争力的产品体验。通过 TDesign，腾讯希望实现产品设计的标准化、协同化，提高产品设计的效率和质量。同时，TDesign 也可以帮助不同团队之间实现设计资源的共享和协作，促进产品设计的创新和统一性。TDesign 是腾讯公司内部推出的企业级设计体系，旨在为腾讯旗下的各种产品提供一致、高效、优质的设计支持。elementUI和ant-design在前端开发者中有了很高知名度了，组件和资源十分丰富了。
Web前端开发规范文档
精彩人生
10-21 819
规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器
大厂都在用的 12 大主流 AI 前端组件库！阿里、蚂蚁、腾讯也纷纷推出 AI 组件库！
最新发布
前端GitHub
04-21 3142
阿里巴巴开源的跨端 AI 聊天 UI 组件库，适配 React/Vue，内置消息流、对话历史、意图识别等丰富组件，适合 LLM、ChatBot 产品开发。腾讯 TDesign 推出的 AI 聊天组件，支持 React/Vue/小程序等，具备对话流、智能回复、Prompt 工程、语音识别等多项 AI 能力。Ant Design X 的 Vue 实现，支持 Vue 3，集成 AI 驱动的表单、智能助手、Copilot 体验等，适配前端低代码和 AI 场景。更多精彩项目，请看下方宝藏仓库，请慎入！
2024年Web前端最全解密腾讯前端技术体系(1)，一起看看这些大厂面试真题查漏补缺吧
2401_84411072的博客
05-11 1015
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容。
腾讯发布前端组件框架 Omi，全面拥抱 Web Components
weixin_34143774的博客
10-18 346
Omi - 合一 下一代 Web 框架，去万物糟粕，合精华为一 → https://github.com/Tencent/omi → Github 中文 Readme 特性 4KB 的代码尺寸，比小更小 顺势而为，顺从浏览器的发展和 API 设计 Webcomponents + JSX 相互融合为一个框架 Omi Webcomponents 也可以数据驱动视图, UI = fn(dat...
腾讯无界微前端框架介绍
miracle的专栏
08-21 1514
无界微前端框架是由腾讯团队推出的，旨在解决现有微前端方案中存在的问题，如适配成本高、样式隔离困难、运行性能不佳、页面白屏、子应用通信复杂、子应用保活机制缺乏等。无界微前端框架通过提供多样化的通信机制，简化了子应用之间的通信流程，使得开发人员可以轻松地构建出高度可扩展且维护性良好的微前端应用。与 qiankun 相比，无界在通信灵活性和安全性方面具有显著优势。
解密国内BAT等大厂前端技术体系-腾讯篇（长文建议收藏）
m0_37411791的博客
11-04 2262
1 引言为了了解当前前端的发展趋势，让我们从国内各大互联网大厂开始，了解他们的最新动态和未来规划。这是解密大厂前端技术体系的第三篇，前两篇已经讲述了阿里和百度在前端技术这几年的技术发展。这一篇从腾讯讲起。2 腾讯团队介绍2018年9月30日，腾讯宣布正式启动新一轮战略升级，优化组织架构，将原有的七大事业群拆分重组，在保留原有四个事业群的基础上新增平台与内容事业群和云与智慧产业群。平台与内容事业群（...
解密国内BAT等大厂前端技术体系-携程篇（长文建议收藏）
m0_37411791的博客
11-28 986
引言进入2019年，大前端技术生态似乎进入到了一个相对稳定的环境，React在2013年发布至今已经6年时间了，Vue 1.0在2015年发布，至今也有4年时间了。整个业...
解密国内BAT等大厂前端技术体系-美团点评之下篇（长文建议收藏）
m0_37411791的博客
12-13 794
这是奶爸码农第47篇原创文章，点击上方蓝字关注引言在上篇（见文末推荐阅读）中，我已经介绍了美团点评的业务情况、大前端的技术体系，其中大前端的技术全景图如下：上篇重点介绍了工程化和代码质量...
嘿哟论坛社区小程序V1.1.3全开源解密版+小程序前端.zip微信小程序模板源码
08-12
微信小程序是腾讯推出的一种轻量级的应用开发框架，它让用户无需下载安装即可使用应用，大大降低了用户获取服务的门槛。微信小程序支持多种编程语言，如JavaScript、WXML（微信小程序标签语言）和WXSS（微信小程序...
前端技术浪潮与应用
LittleRoundFace的博客
11-28 2516
2020年前端技术浪潮与应用 文章目录2020年前端技术浪潮与应用一、前端基建01.前端可视化01-1.页面可视化搭建①页面可视化背景-前端行业提效分析②业界-前端行业提效轮子：[前端可视化搭建工具业界的轮子](https://juejin.im/post/6858881797490098190)③背景-提效轮子总结归纳④智能化相关行业提效分析⑤举例可视化搭建其中的一个例子来看前端可视化——imgcookimgcook介绍-产品大图imgcook介绍-产品大图核心技术难点-智能识别表达拆解核心技术难点-智能
腾讯alloyteam团队前端代码规范
08-15
一个前端CSS、JS、HTML开发的代码规范，可以参考和学习一下
使用腾讯前端Jx框架写自己的方法
王小明的专栏
08-22 1379
使用腾讯前端Jx框架写自己的方法 <!DOCTYPE html> <html> <head> <title>Demo Example</title> <script type="text/javascript" src="jquery-1.12.0.min.js"></scri...
腾讯T3大佬亲自讲解，前端开发规范，移动web开发
m0_60229361的博客
04-08 1102
必须使用 camelCase 驼峰命名必须指定类型必须加上注释，表明其含义必须加上 required 或者 default，两者二选其一如果有业务需要，必须加上 validator 验证props: {// 组件状态，用于控制组件的颜色status: {return [‘succ’,‘info’,‘error’== -1},// 用户级别，用于显示皇冠个数。
解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）
m0_37411791的博客
10-16 1926
进入2019年，大前端技术生态似乎进入到了一个相对稳定的环境，React在2013年发布至今已经6年时间了，Vue 1.0在2015年发布，至今也有4年时间了。整个业界在...
前端传输加密+AES对指定的敏感字段二次加密
02-24
<think>好的，用户现在问的是前端传输加密加上对敏感字段的AES二次加密。之前我们讨论了Spring Boot项目如何集成腾讯云SDK实现短信登录，并提到了敏感数据加密，比如AES。现在用户可能想进一步了解如何在前端进行加密，特别是结合传输层加密和二次加密。 首先，我需要确定用户的使用场景。可能是在注册或登录过程中，用户需要提交敏感信息如手机号、身份证号等，用户希望这些数据在传输过程中即使被截获也难以解密。他们可能担心即使使用了HTTPS，仍然希望额外加密敏感字段，以增加安全性。 用户的真实需求可能包括：确保数据在传输过程中双重加密，防止中间人攻击，以及存储时的数据安全。深层需求可能涉及合规要求，比如某些行业标准要求对特定数据进行加密处理，或者用户对数据隐私有特别高的要求。 接下来，我需要整理前端加密的常用方法。HTTPS是基础，必须的。然后在前端使用AES加密敏感字段，这样即使HTTPS被破解（虽然可能性低），数据仍然被加密。需要注意的是，AES的密钥管理是关键，如何安全地传递密钥给前端，或者使用非对称加密来传递密钥。 可能的挑战包括：前端加密的性能影响，密钥的安全存储和传输，以及后端解密处理的正确性。同时，需要考虑如何在不影响用户体验的情况下实现这些加密步骤。 然后，要分步骤介绍实现方式。首先强调必须使用HTTPS，然后生成AES密钥，可能通过后端接口动态获取，或者使用RSA加密AES密钥。前端使用CryptoJS或Web Cryptography API进行加密，后端解密并处理数据。同时，二次加密可能指的是对某些字段在存储前的再次加密，比如数据库中的手机号用AES加密存储。 还需要提到安全注意事项，比如避免硬编码密钥，使用安全的密钥交换机制，定期更换密钥，以及防止重放攻击。此外，日志中不应记录敏感数据，加密后的字段在传输和存储中的处理方式。 最后，可能需要给出代码示例，比如前端如何加密，后端如何解密，以及存储时的二次加密。确保用户能够按照步骤实施，同时理解每一步的安全考量。</think>在前后端交互中，通过**前端传输加密 + 敏感字段二次加密**的组合方案，可以有效提升数据安全性。以下是具体实现方案和技术细节： --- ### 一、整体加密流程 ```mermaid sequenceDiagram participant 前端 participant 后端 前端->>后端: HTTPS传输（TLS加密） Note over 前端: 对敏感字段（如手机号/身份证）进行AES加密 后端->>后端: 解密AES数据后，再对敏感字段二次加密存储 ``` --- ### 二、核心设计原则 1. **分层加密**： - **第一层**：HTTPS（TLS）保证传输通道安全 - **第二层**：敏感字段在前端使用AES加密 2. **密钥管理**： - AES密钥通过安全渠道获取（如登录后动态下发） - 避免硬编码密钥到前端代码 3. **防重放攻击**： - 加密数据加入时间戳/随机数 - 服务端校验数据时效性 --- ### 三、前端加密实现（以Vue+CryptoJS为例） #### 1. 安装CryptoJS ```bash npm install crypto-js ``` #### 2. AES加密工具类 ```javascript import CryptoJS from 'crypto-js' // 加密方法（CBC模式+Base64编码） function encryptData(data, key, iv) { const encrypted = CryptoJS.AES.encrypt( CryptoJS.enc.Utf8.parse(data), CryptoJS.enc.Utf8.parse(key), { iv: CryptoJS.enc.Utf8.parse(iv), mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 } ) return encrypted.toString() } // 示例：加密手机号 const phone = '13800138000' const aesKey = '16/24/32字节密钥' // 从后端接口动态获取 const iv = '16字节初始化向量' const encryptedPhone = encryptData(phone, aesKey, iv) ``` --- ### 四、后端解密与二次加密（Java实现） #### 1. 接收并解密数据 ```java public String decryptAES(String encryptedData, String key, String iv) { Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding"); SecretKeySpec keySpec = new SecretKeySpec(key.getBytes(), "AES"); IvParameterSpec ivSpec = new IvParameterSpec(iv.getBytes()); cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec); byte[] decodedBytes = Base64.getDecoder().decode(encryptedData); byte[] decryptedBytes = cipher.doFinal(decodedBytes); return new String(decryptedBytes, StandardCharsets.UTF_8); } ``` #### 2. 二次加密存储（使用独立密钥） ```java // 数据库存储加密（密钥与前端不同） public String reEncryptForStorage(String data) { String storageKey = "独立存储密钥"; // ...类似解密流程，使用不同密钥加密 return encryptedData; } ``` --- ### 五、密钥安全方案 1. **动态密钥获取**： ```javascript // 前端登录后获取临时密钥 axios.get('/api/getEncryptKey').then(res => { sessionStorage.setItem('aesKey', res.data.key) sessionStorage.setItem('aesIv', res.data.iv) }) ``` 2. **密钥生成接口**（Java）： ```java @GetMapping("/getEncryptKey") public Map<String, String> generateKey() { String key = RandomStringUtils.randomAlphanumeric(32); // AES-256 String iv = RandomStringUtils.randomAlphanumeric(16); redisTemplate.opsForValue().set( "KEY:" + getCurrentUser(), key + ":" + iv, 5, TimeUnit.MINUTES ); return Map.of("key", key, "iv", iv); } ``` --- ### 六、安全增强措施 1. **防篡改校验**： - 在加密数据中加入HMAC签名 ```javascript // 前端添加HMAC const signature = CryptoJS.HmacSHA256(encryptedData, key).toString() ``` 2. **请求时效控制**： ```java // 后端校验时间戳 if (System.currentTimeMillis() - timestamp > 5000) { throw new RuntimeException("请求已过期"); } ``` 3. **敏感数据脱敏**： ```java // 日志过滤（使用@JsonIgnore） public class UserDTO { @JsonIgnore private String phone; } ``` --- ### 七、优缺点分析 | **优势** | **挑战** | |-----------------------------------|-----------------------------------| | 1. 即使HTTPS被破解仍保护敏感数据 | 1. 前端加密代码可能被逆向分析 | | 2. 符合GDPR等数据隐私法规要求 | 2. 加解密增加前后端计算开销 | | 3. 防止内部人员窥探传输数据 | 3. 密钥轮换机制需要完善设计 | --- 通过组合使用HTTPS传输加密和敏感字段二次加密，可构建纵深防御体系。需注意：**安全性与便利性需要平衡**，建议只对身份证号、银行卡号等高敏感字段实施二次加密。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值