Taro

蒲公英 · JELLY技术周刊 Vol.16 近期，谷歌有史以来的第一次线上谷歌 Web 开发者大会，Web Vitals、PWA、DevTools 和 Lighthouse 6.0 等一系列特性或产品带来的全新体验，让人眼花缭乱。这次大会也以线上的形式分享了包括了性能优化、打包构建等非常多干货，定会让你收获颇丰。 登高远眺 天高地迥，觉宇宙之无穷 基础技术 谷歌发布首个线上 Web 开发者大会 谷歌在本月初完成首次线上 Web 开发者大会 (web.dev/live)，以线上视频的形式，分享关于优化核心 Web 指标的最佳实践，Cookie 隐私和安全保护、构建工具与打包优化、Chrome DevTools 改进等技术干货。 深入浅出现代 Web 编程 这是芬兰赫尔辛基大学公开的全栈课程资源，内容包括 React, Redux, Node.js, MongoDB, GraphQL 以及 TypeScript 等，教你利用 ReactJS 搭配 Node.js 开发 REST API，搭建属于自己的单页应用程序（SPA：Single Page Application）。 前端框架 在 React 内使用内联函数的性能损耗究竟有多少？ 一直有人教导我们：在 React 里用形如 onClick={() => { /* xxx */ }} 函数内联的写法会降低性能，是不好的

这里说的去除小程序框架其实并不严谨，因为小程序本身也算是一个框架，而且是一个功能更加完善的框架系统。在前端的概念中，我们一般说一个框架是指一个用来帮助开发者构建用户界面的框架，而小程序框架本身不仅仅包含了UI层的功能，还提供了API能力、服务端的能力，所以说小程序框架本身是一个比常规的前端框架更完善的东西，或者说是一个完善的构建应用系统。本文中所说的原生小程序与小程序框架的对比，均指与第三方小程序框架的对比。 在小程序的世界里，原生小程序框架已经足够好，它就是那把给你雕刻小而美应用的雕刻刀，而不必要去寻找一把屠龙刀。 1、框架的取舍 最近Vue作者尤大关于框架设计平衡的分享中也提到了框架的取舍问题。 当我们去构建一个复杂的前端应用的时候，如果没有工具，而是使用原生JavaScript去开发的话，那只会花费更多的时间。对小程序来说，原生小程序框架就是我们的工具，它足以用来构建一个复杂的小程序应用。 然而web应用的开发环境是否也适用于小程序开发呢？ 小程序框架在小程序生态发展的初期的确起到了很大的促进作用，然而随着小程序原生框架的不断完善，这些小程序框架的作用已经不再具备优势。 框架的确给前端带来了生产力的提高，也带动了前端界生态的发展。所以在小程序出现之后，一股框架之风也很快的出现，微信小程序刚推出之后，就出现了两个比较出名的小程序开发框架，wepy、mpvue。

小程序页面滚动穿透 一、场景 在项目当中，基础遇到这样的需求 有一个长列表，或者其他可滚动展示的页面， 在这个页面会弹出一个 Modal 层，如下： 贝壳找房的 的筛选栏 二、问题 如果这个弹框内容不可滚动，不会有太大问题； 但是当弹出内容是可以滚动的时候，就会有问题， 触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页面， 三、解决办法 程序员是面向Google编程的，找到了下面的解决办法： 监听弹框状态，如果弹框展示就给列表 添加对应样式 // isShowMask 弹框是否展示 <view class="dog-container {{isShowMask ? 'bottom-fixed' : ''}}"></view> .bottom-fixed { position : fixed ; left : 0 ; top : 0 ; overflow : hidden ; } 给遮罩层添加 catchtouchmove 的阻止 myCatchTouch: function () { return; } <view wx:if="{{alert}}" catchtouchmove="myCatchTouch"> <template is="alert" data="{{alertData}}" /> </view> 这样的话，底部的列表内容就不会出现溢出，也自然不会滚动，

package.json " devDependencies " : { " taro-ui " : " ^3.0.0-alpha " } app.scss @import ' ~taro-ui/dist/style/index.scss ' ; 任意使用ui界面 import { AtButton } from ' taro-ui ' 来源： oschina 链接： https://my.oschina.net/u/4290521/blog/4406242

2020-5-9 文章编号：009/100 以前很少写文章。从今天开始我要挑战一下自己，连续输出100篇技术类文章。这100篇文章我尽量以实战案例为主。 如果你觉得本文还不错，记得关注或者给个 star，你们的赞和 star 是我编写更多更精彩文章的动力！ GitHub 地址 私人公众号：程序员小石 这里有大量的学习资料，免费分享给你 正文 上一篇文章简单分析了“奶茶店·小程序”，现在我们先来实现接口和数据库。 第一篇：业务逻辑拆分，敲定设计稿，设计 API 和数据库 第二篇：完成接口开发，测试接口 第三篇：完成前端页面，联调接口 本文重点内容 Taro 构建小程序 云函数设计 云函数 + 云数据库实现：队列推送 云函数 Taro 构建小程序 windows 系统要安装 python ，Nodejs版本要 >=8.0.0 尽量使用Taro 最新版，微信更新的很快。Taro 也会及时跟进 我目前的Taro 版本是 v2.2.3 构建项目 云函数设计 一般一个云函数负责一个模块，比如 Tea， 只负责 Tea 的 CURD 操作。 我的云函数需要两个字段 action 和 params。 其中 action 标记动作，params 是参数。这样设计云函数能提高可扩展性。 // 云函数入口文件 const cloud = require('wx-server-sdk') const

蒲公英 · JELLY技术周刊 Vol.17 React Hooks 相信大家都不陌生，自被设计出以来就备受好评，在很多场景中都有极高的使用率，其中原理更是很多大厂面试中的必考题，很多朋友都能够如数家珍。那么如何去用实现一个简单的 React Hooks 呢？或许大家都有各自的想法，但也不妨来看看文中所述的方案是如何构建的。 登高远眺 天高地迥，觉宇宙之无穷 基础技术 2020 Chrome DevTools 的新特性介绍 作为前端开发，与 Chrome 打交道是家常便饭，我们有必要了解 Chrome 调试工具的更新迭代，对日常开发和调试带来哪些帮助和改善。新 Chrome DevTools 集成了 lighthouse，并且在元素审查面板和性能面板都有一定程度的优化，本文还提供了相关特性的视频演示，非常易于理解学习。 浏览器的任务、微任务、队列和调度 浏览器里的事件循环（Event Loop）一直都是一个老生常谈的话题，社区里各种文章和资料也不少，但是你真的清楚事件循环里面的 tasks、microtasks、queues 这些概念以及他们的调度关系吗？本文是 Google Chrome 的开发人员 Jake Archibald 撰写的一篇博客，内容深入浅出，在任务调度及 JS 栈的部分还细心的绘制了 CSS 交互动画，最后还探讨了不同浏览器的差异以及相关规范的定义，非常值得一读

以上均为个人汇总，如有不对欢迎指出！ 小程序个人看法 可能今天在很多人眼中，小程序已经成为别人印象中的app，功能齐全，且可以完成各种功能以及业务。但是个人从小程序的诞生使用至今，在我眼中他依然是个轻量级应用，虽逐步的壮大，一些功能还是有所限制，但是从功能上的角度却无法与app相媲美。以微信小程序为例，也许今天大小限制8M，页面栈已经是15层，大小可开发约50~70个页面，的确已经很好的支持业务的开发以及功能的扩张。但是在小程序开始之初，页面栈仅为5，包大小限制1M，很多业务的确无法扩展。小程序也因业务的扩展，逐步逐渐支持工程化，如当前支持npm包。但我们从小程序的产品整体设计上，还是不能忘记这个限制，无止境的叠加页面以及业务。 小程序的编译原理 简单的借助大神的思路，描述一下小程序的编译原理。 我们都知道，小程序页面由View（视图层）,App Service(逻辑层)组成。它们在两个线程中运行（我们传统的h5,是单线程运行）。他们之间是由系统的JSBridage（常用于原生与h5交互的工具，可自行百度）进行交互的。 视图层使用 WebView 渲染，iOS 中使用自带 WKWebView，在 Android 使用腾讯的 x5 内核（基于 Blink）运行。 逻辑层使用在 iOS 中使用自带的 JSCore 运行，在 Android 中使用腾讯的 x5 内核（基于 Blink

概述 键空间通知使得客户端可以通过订阅频道或模式， 来接收那些以某种方式改动了 Redis 数据集的事件。如Redis数据库中键的过期事件也是通过订阅功能实现。本文主要基于Azure PaaS Redis演示相关功能的具体实现。 配置 因为开启键空间通知功能需要消耗一些 CPU ， 所以在默认配置下， 该功能处于关闭状态。因为Azure Redis屏蔽了部分指令，不能直接使用cli指令设置notify-keyspace-events参数，目前可以通过Azure Portal管理门户直接设置。注意: 基本版的Redis还不支持设置该参数。 操作演示 pub/sub 使用Azure Console发布消息 使用Cli工具订阅消息(注意使用cli连接Azure redis需要打开6379端口) sub expired key event 设置带有过期时间的key 订阅过期key事件 注意 Redis 使用以下两种方式删除过期的键： 1、当一个键被访问时，程序会对这个键进行检查，如果键已经过期，那么该键将被删除。 2、底层系统会在后台渐进地查找并删除那些过期的键，从而处理那些已经过期、但是不会被访问到的键。 当过期键被以上两个程序的任意一个发现、 并且将键从数据库中删除时， Redis 会产生一个 expired 通知。 Redis 并不保证生存时间（TTL）变为 0 的键会立即被删除：

作者：腾讯有数 - TabPan Taro 引入了腾讯有数的微信小程序无痕埋点能力，为 Taro 的开发者提供真·零开发的 8 大无痕埋点能力以及自定义埋点能力，包含小程序启动、显示、隐藏、页面浏览、页面离开、分享、下拉刷新、上拉触底等八大自动化埋点能力以及搜索、商品归因等定制化埋点，以及经营分析、直播分析、导购分析等能力，让你的小程序可以基于微信生态，串联全场景多触点，实现全域经营洞察。 随着人口红利的结束，用户增长面临瓶颈期，如何寻找新的增长点成为企业发展面临的问题。微信作为国内社交巨头，拥有巨大流量，同时天然的社交属性为商业变现提供了良好的生态环境。小程序作为微信生态中变现的战略重点，潜力巨大。据最新数据显示，小程序日活跃用户超过 4 亿，累计创造 8000 亿交易额，越来越多的企业与团队投入到小程序开发的队伍中。 开发小程序的团队虽多，但实际效果却各不相同。如何让开发出来但小程序实现快速增长，发挥社交规模效应，成为每个开发者都需要关注的问题。 腾讯有数作为腾讯官方推出的微信生态内数据分析与数据应用的平台，可以为开发者提供流量数据监测、渠道评估、用户洞察、经营诊断、精准营销等能力，指导运营决策。 目前，Taro 与腾讯有数已达成官方合作，Taro 的开发者可通过零开发的 无痕埋点能力以及自定义埋点能力，串联微信内全场景多触点，实现全域数据洞察。 一键安装，实现真·零开发埋点

最近因为一些原因想要换份工作，通过猎头帮我投递了几家公司，收到了蚂蚁、字节和拼多多的面试邀约，先来说下面试的结果 蚂蚁：收到 offer，定级 P6+ 字节：收到 offer，定级 2-1 拼多多：1 面之后未继续流程 拼多多 先来说说拼多多，本来投的是 C 端，结果鬼使神差简历去到了 A 端（管理后台），一面简单了解之后并不愿意去做 A 端，之后也就没有继续后续的流程了。 一面 合并两个数组 concat、for 循环、扩展运算法、push.apply 这些方法都可以 合并两个对象 Object.assign、扩展运算法、手写深浅拷贝 都可以 interface 和 type 的区别 常规题，网上资料很多了，还是看官网的说明比较好 An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot. An interface can have multiple merged declarations, but a type alias for an object type literal cannot. flex: 0 1 auto 表示什么意思 flex: 0 1 auto 其实就是弹性盒子的默认值，表示 flex