Ryan Chen 陈亮, Engineering Manager Chromecast and Home, Google Typescript, Angular, 和移 动端的跨平台开发 1 What’s TypeScript? What’s TypeScript? ● A statically typed superset of JavaScript that compiles into

reserved，powered by Gitbook最后更 新： 2021-01-17 00:08:40 前⾔ 4 Electron简介 Electron概述 所属技术领域： 跨平台的桌⾯端应⽤开发 谁开发的： Github 旧称： Atom Shell 历史 2013年作为构建Github上可编程的⽂本编辑器Atom的框架⽽被开发出来 2014春季这两个项⽬开源出来 Web技术： HTML 、 CSS 和 JavaScript 对⽐：传统桌⾯应⽤都是⾮Web技术开发的 跨平台： Win / Mac / Linux 等多个平台 桌⾯应⽤：主要⽤来开发桌⾯端应⽤ ⽽不是Web应⽤ 基本原理 将 Chromium 和 Node.js 合并到同⼀个运⾏时环境中 让你使⽤纯 JavaScript 调⽤丰富的原⽣(操作系统) APIs 并将其打包为 的浏览器的内核实现 可把Electron看成 ⼀个被 JavaScript 控制的，精简版的 Chromium 浏览器 ⼀个 Node. js 的变体 专注于桌⾯应⽤⽽不是 Web Server 端 使⽤ web ⻚⾯作为它的 GUI 主⻚ Electron | 使⽤ JavaScript，HTML 和 CSS 构建跨平台的桌⾯应⽤程序 竞品 nw.js 现状 已成为开源开发者、初创企业和⽼牌公司常⽤的开发⼯具

s', 'MAP * 127.0.0.1'); 4. 5. app.on('ready', function() { 6. // Your code here 7. }); 设置客户端的证书文件 path . 忽略用 , 分隔的 domains 列表的连接限制. 禁止请求 HTTP 时使用磁盘缓存. 在指定的 端口 通过 HTTP 开启远程调试. 指定引擎过渡到 --js-flags="--harmony_proxies --harmony_collections" your-app 使用一个特定的代理服务器，它将比系统设置的优先级更高.这个开关只有在使用 HTTP 协议时有效，它包含 HTTPS 和 WebSocket 请求. 值得注意的是，不是所有的代理服务器都支持 HTTPS 和 WebSocket 请求. 支持的 Chrome 命令行开关 —client-certificate=path semi-colon 分隔的hosts列表的代理服务器.这个开关只有在使用 —proxy-server 时有效. 例如: 1. app.commandLine.appendSwitch('proxy-bypass-list', ';*.google.com;*foo.com;1.2.3.4:5678') 将会为所有的hosts使用代理服务器，除了本地地址 ( localhost

可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必 须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。 Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理 器”。 var obj = new Proxy({}, { get: function (target, key, receiver) { console // 35 proxy.title // 35 上面代码中，作为构造函数， Proxy 接受两个参数。第一个参数是所要代理的目 标对象（上例是一个空对象），即如果没有 Proxy 的介入，操作原来要访问的就 是这个对象；第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一 个对应的处理函数，该函数将拦截对应的操作。比如，上面代码中，配置对象有一 个 get 方法，用来拦截对目标对象属性的访问请求。 的一个使用场景是，目标对象不允许直接访问，必须通过代理 访问，一旦访问结束，就收回代理权，不允许再次访问。 this 问题 虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做 任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代 理的情况下，目标对象内部的 this 关键字会指向 Proxy 代理。 const target = {

Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 186 前端 | 2020 202 移动端 UI 一致性解决方案 202 美团外卖 Flutter 动态化实践 227 美团开源 Logan Web：前端日志在 Web 端的实现 255 外卖客户端容器化架构的演进 270 Flutter 包大小治理上的探索与实践 Litho 在美团动态化方案 MTFlexbox 中的实践 459 开源 React Native 组件库 beeshell 2.0 发布 473 React Native 在美团外卖客户端的实践 506 Android 静态代码扫描效率优化与实践 530 Probe：Android 线上 OOM 问题定位组件 560 活动 Web 页面人机识别验证的探索与实践 580 React React Native 工程中 TSLint 静态检查工具的探索之路 589 ESLint 在中大型团队的应用实践 610 美团 iOS 工程 zsource 命令背后的那些事儿 627 客户端单周发版下的多分支自动化管理与实践 635 美团外卖前端容器化演进实践 643 Bifrost 微前端框架及其在美团闪购中的实践 664 Litho 的使用及原理剖析 680 Android

生命周期钩子 提供/注入 模板引用 渲染机制和优化 Vue 2 中的更改检测警告 工具 单文件组件 测试 TypeScript 支持 Mobile 规模化 路由 状态管理 服务端渲染 无障碍 基础 语义学 标准 资源 从 Vue 2 迁移 介绍 v-for 中的 Ref 数组 异步组件 attribute 强制行为 自定义指令 自定义元素交互 Data (例如：在 *.vue 文件中)，你需要将打包工具配置 vue 别名到这个文 件 vue.cjs(.prod).js ： 或用于 Node.js 通过 require() 进行服务器端渲染。 如果你将应用程序与带有 target: 'node' 的 webpack 打包在一起，并正确地将 vue 外部化，则将加载此构建。 dev/prod 文件是预构建的，但是根据 process createApp({ 3. template: '' 4. }) 5. 使用构建工具 vue(.runtime).esm-bundler.js ： 对于服务端渲染 运行时 + 编译器 vs. 仅运行时 安装 - 10 - 本文档使用 书栈网 · BookStack.CN 构建 6. // 不需要 7. Vue.createApp({ 8. render()

Service mpvue SDK 事件函数 逻辑 Data ⽣生命周期 data event js Core ⻚页⾯面窗⼝口 mpvue 框架组成 数据同步机制 运⾏行行阶段 全局事件代理理 ⽣生命周期关联 构建集成 开发阶段 项⽬目模板 项⽬目初始化 样式编译 编译阶段 脚本编译 模板编译 SDK 注⼊入 Vue.js 引擎引⼊入 - 运⾏行行时⽀支持 维护 mp 对象实例例 维护数据模型和虚拟 dom ⼩小程序负责视图层渲染 mpvue runtime 实现 事件函数 mp 对象 AppData ⽣生命周期 事件函数 Vue 对象 data ⽣生命周期 事件代理理机制 数据同步机制 ⽣生命周期关联 mpvue SDK 从 SFC 提取出 AST 从 AST 构建模板代码 AST 数据改造 mpvue-loader MINA mpvue wepy js 样式规范 wxss sass, less, postcss, … sass, less, styus, … 组件化 component Vue.js SFC 类 Vue.js SFC 跨端复⽤用 不不可复⽤用 快速移植 H5, 快应⽤用 ⽀支持转换 H5 ⾃自动构建 本身⽆无构建 webpack 构建 内置构建 上⼿手成本 全新学习 熟悉 Vue.js 即可 Vue.js 和 wepy

视图层 Bridge Node API Native API 服务端 Eggjs Cat Egg-cors Egg-Script 应⽤用层 中间层 客户端 Vue Vue-Router Vuex Iview Electron 底层 Main Process Render Process 底层 代理理层 SSO Stash ⽤用户信息 版本统计 权限管理理 构建层 未登录 http协议 SSO Center Tiler协议 callback Page 跳转登录页 认证信息 携认证信息 重定向 当前域 种Cookie后重 定义 服务端 客户端 Electron跨域如何解决？ File协议与HTTP如何交互？ ⾃自定义协议是什什么？ App ->registerStandardSchemes tiler://index.html 影响所有⽤用户使⽤用 客户端 更更新SDK 添加灰度版本和配置信息 配置信息 项⽬目实践 #3如何完成签名、⾃自动更更新 灰度发布 指定⼈人员发布 指定版本发布 项⽬目实践 #4如何定位和收集问题 Main Process Render Process Clinet Server CrashReporter Crash Log 客户端版本多，⽤用户崩溃信 息收集困难

同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小 到一个家庭，社会的主要组织形式呈现出“树”的特征；冬天的衣服就像“栈”，最先穿上的最后才能脱下； 羽毛球筒则如同“队列”，一端放入、另一端取出；字典就像一个“哈希表”，能够快速查找目标词条。 本书旨在通过清晰易懂的动画图解和可运行的代码示例，使读者理解算法和数据结构的核心概念，并能够通 过编程来实现它们。在此基础上，本书致力于 语言设计之初，人们认 为 16 位足以表示所有可能的字符。然而，这是一个不正确的判断。后来 Unicode 规范扩展到了超过 16 位，所以 Java 中的字符现在可能由一对 16 位的值（称为“代理对”）表示。 ‧ JavaScript 和 TypeScript 的字符串使用 UTF‑16 编码的原因与 Java 类似。当 1995 年 Netscape 公司 首次推出 JavaScript 操作系统）都广泛使用 UTF‑16 编码。 由于以上编程语言对字符数量的低估，它们不得不采取“代理对”的方式来表示超过 16 位长度的 Unicode 字符。这是一个不得已为之的无奈之举。一方面，包含代理对的字符串中，一个字符可能占用 2 字节或 4 字 节，从而丧失了等长编码的优势。另一方面，处理代理对需要额外增加代码，这提高了编程的复杂性和调试 难度。 出于以上原因，部分编程语言提出了一些不同的编码方案。

同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小 到一个家庭，社会的主要组织形式呈现出“树”的特征；冬天的衣服就像“栈”，最先穿上的最后才能脱下； 羽毛球筒则如同“队列”，一端放入、另一端取出；字典就像一个“哈希表”，能够快速查找目标词条。 本书旨在通过清晰易懂的动画图解和可运行的代码示例，使读者理解算法和数据结构的核心概念，并能够通 过编程来实现它们。在此基础上，本书致力于 语言设计之初，人们认 为 16 位足以表示所有可能的字符。然而，这是一个不正确的判断。后来 Unicode 规范扩展到了超过 16 位，所以 Java 中的字符现在可能由一对 16 位的值（称为“代理对”）表示。 ‧ JavaScript 和 TypeScript 的字符串使用 UTF‑16 编码的原因与 Java 类似。当 1995 年 Netscape 公司 首次推出 JavaScript 操作系统）都广泛使用 UTF‑16 编码。 由于以上编程语言对字符数量的低估，它们不得不采取“代理对”的方式来表示超过 16 位长度的 Unicode 字符。这是一个不得已为之的无奈之举。一方面，包含代理对的字符串中，一个字符可能占用 2 字节或 4 字 节，从而丧失了等长编码的优势。另一方面，处理代理对需要额外增加代码，这提高了编程的复杂性和调试 难度。 出于以上原因，部分编程语言提出了一些不同的编码方案。