xiangzhihong8的专栏

先说说背景吧，笔者开发了一款微信工具类小程序，刚开始，小程序的日访问量和用户数都还可以，但后面慢慢的发现，受限于微信小程序平台规则，很难对用户进行更深入的运营，用户流失问题也将逐渐凸显出来。另一方面，本人一直想开发一个属于自己地App，但又限于对原生技术掌握的不够深入所以一直没有上手去做。偶然一次机会，在技术社区看到已经有比较成熟的「小程序转 App」工具后，便有了把现有小程序直接通过工具转为 App 的念头。

一、环境搭建首先，请确保已经安装了代码编辑器和浏览器，如果没有安装推荐安装VSCode和Chrome浏览器。其次是安装 Node.js，如果你的系统中还没有安装 Node.js ，可以进入 Nodejs 官网下载相应的安装包进行手动安装；如果已经安装了 Node.js，你可以使用这个命令检查一下 Node.js 版本。node -v如果安装了多个版本的Node.js，推荐使用 nvm 工具切换 Node.js 版本。安装完 Nodejs 之后，包管理器npm也会被自动安装，你可以执行下面的命令来验

Svelte是一个新兴的热门前端框架，作者是RichHarris，被称为前端界的【轮子哥】，有Ractive、Rollup和Buble开源作品。在官方的介绍中，Svelte即是一个前端UI框架，同时也是一个编译器。在《StateofJSsurveyof2020》报告中，它被预测为未来十年可能取代React和Vue等其他框架的新兴技术。在开源托管网站Github上，Svelte也获得了超过61k的关注，这仅次于明星框架React和Vue。...

最近，字节跳动技术团队公布了一份关于2022年前端技术的发展趋势预测，总结了新的一年前端技术可能发生的6个变化，下面我们来参考一下。

对微信小程序进行性能优化，主要可以从两大方面进行分析：性能扫描工具和代码优化。微信小程序提供了一个“体验评分”的工具插件，可以使用它获得微信小程序的一些性能数据和明显的缺陷，进而根据报告进行相应的优化。同时，为了方便开发者能够及时发现小程序的体验问题，从开发者工具 1.02.1811150 版本起支持体验评分的 “自动运行” 功能。一旦发现体验分数低于 70 分时，系统会在 console 面板打印一个 warning 信息提示开发者。然后，根据效果图的分析报告，查看需要优化的细项，并根据说明一一进行优

小程序上线后，改版了很多次，包括一些 Api 接口也有改动。如果你学习一个很久之前的小程序项目是没有意义的，本文推荐的小程序都是最近有更新的。相信在你学习、部署的过程中，不会遇到很多问题。1，WordPress 版微信小程序这个小程序功能几乎包含了「内容」产品涉及的功能，比如：文章列表（包括显示文章分类、缩略图、发布时间，支持分页）轮播图、文章分类、文章内容页（包括文章站内链接跳转，站外链接复制到剪切板）猜你喜欢相关文章、文章评论（提交评论和回复评论，加载评论分页，显示微信用户评论者的头像）显示文

回顾 2021过去一年 WebAssembly 的发展远比我们之前预测的要快很多，Safari web 浏览器这方面尤为突出。Safari 浏览器在 2017 年 WebAssembly 刚刚发布 MVP 版本的时候，Safari 还和其他浏览器一样处在相同水平线上。然后经过多年的发展，Safari 很不幸被甩在了后面。时间来到 2021 年，看到 Safari 不断发布对 WebAssembly 支持的更新，我感到兴奋不已。这或许是 Safari 赶超其他厂商的开始。随着 2021 年 12 月

一、简介介绍下React，说说他们都有哪些特性1.1 简介React是一个构建用户界面的 JavaScript 库，是一个UI 层面的解决方案。React遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序开发更高效。同时，React使用虚拟DOM来有效地操作DOM，遵循从高阶组件到低阶组件的单向数据流。同时，React可以帮助我们将界面拆分成各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成一个整体页面。语法上，React 类组件使用一个名为 render() 的方法或

一、背景随着项目越来越大，编译的耗时也在默默地不断增加。无论是开发阶段还是生产集成，编译耗时都成为了一个不容小觑的痛点。在经历了近5年的持续开发迭代后，我们的项目也在不久前由原来的微信原生小程序开发方式迁移至Taro。Taro 是一套使用React 语法的多端开发解决方案，使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等）运行的代码。所以，携程的很多小程序也使用

一、Node基础概念1.1 Node是什么Node.js 是一个开源与跨平台的 JavaScript 运行时环境。在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核），利用事件驱动、非阻塞和异步输入输出模型等技术提高性能。我们可以理解为：Node.js 就是一个服务器端的、非阻塞式I/O的、事件驱动的JavaScript运行环境。理解Node，有几个基础的概念：非阻塞异步和事件驱动。非阻塞异步： Nodejs采用了非阻塞型I/O机制，在做I/O操作的时候不会造成任

通常，对于一些需要记录用户行为的系统，在进行网络请求的时候都会要求传递一下登录的token。不过，为了接口数据的安全，服务器的token一般不会设置太长，根据需要一般是1-7天的样子，token过期后就需要重新登录。不过，频繁的登录会造成体验不好的问题，因此，需要体验好的话，就需要定时去刷新token，并替换之前的token。要做到token的无感刷新，主要有3种方案：方案一：后端返回过期时间，前端每次请求就判断token的过期时间，如果快到过期时间，就去调用刷新token接口。缺点：需要后端额外提

简介Naive Ui Admin 是基于 vue3,vite2,TypeScript，搭配使用 Naive Ui 组件库形成一套开箱即用的中后台前端解决方案，Naive Ui Admin 遵守 Naive Ui 组件设计和开发约定，风格统一，全面的组件和便捷的工具会让您信手拈来，如鱼得水，更多功能在不停开发中。特性最新技术栈：使用 Vue3/vite2 等前端前沿技术开发TypeScript: 应用程序级 JavaScript 的语言主题：可配置的主题Mock 数据 内置 Mock 数据方案

一、 Hook 简介1.1 Hook历史在React Hook出现之前的版本中，组件主要分为两种：函数式组件和类组件。其中，函数式组件通常只考虑负责UI的渲染，没有自身的状态也没有业务逻辑代码，是一个纯函数。而类组件则不同，类组件有自己的内部状态，界面的显示结果通常由props 和 state 决定，因此它也不再那么纯洁。函数式组件，类组件有如下一些缺点：状态逻辑难以复用。在类组件中，为了重用某些状态逻辑，社区提出了render props 或者 hoc 等方案，但是这些方案对组件的侵入性太强，并且

常常听人吐槽说，前端技术更新太快、前端的细分太多，程序员太苦、很多东西学不过来。作为一名工作了9年的资深前端⼯程师，我也是深有感触。有时候，面对这种吐槽，我也是一笑而过。不过，面对这些吐槽，我看到的却是前端开发者内心的焦虑。面对越来越卷的行业现状，大多数的开发者都有一股想突破⾃我的想法，不然的话，那和咸⻥有什么区别。首先，对于前端同学不断学习的态度我是很赞赏的，作为一名开发者，不停的学习新技术是每个开发者需要掌握的必备技能。但如果我们从另外⼀个⻆度来看，⼀个⾏业的新东⻄层出不穷，正说明这个⾏业⼀直在⾼速发

WebAssembly, 简称WASM, 是一种以安全有效的方式运行可移植程序的新技术，主要针对Web平台。 与 ASM.js类似, WASM的目标是对高级程序中间表示的适当低级抽象，即，WebAssembly代码旨在由编译器生成而不是由人来写。WebAssembly程序剖析实际上，称之为“模块（module）”，是因为使用WebAssembly并没有“程序”和“库”之间的区别，只有“模块...

前两天，Node.js官方发布了Node.js 15的正式版本，Node.js 15 将替代 Node.js 14 成为当前的的稳定发行版，后者将在本月晚些时候升级为 LTS（长期支持）版本。如果大家想体验下Node.js 15 的最新功能，可以从官方进行下载。那Node.js 15带来了哪些新的功能和特性呢？主要体现在以下几个方面：AbortControllerN-API 版本 7npm 7unhandled rejections 默认抛出QUICV8 8.6AbortControl

Webpack简介随着前端发展如日冲天，前端项目也越来越复杂，得益于Nodejs的发展，前端模块化、组件化、工程化也大势所趋。伴随着前端的模块化和工程化，Grunt、Gulp到Webpack等项目构建和打包工具也随之出现。前端工程化的早期，主要是解决重复任务的问题。Grunt、Gulp就是其中代表，他们的主要功能是完成文件压缩、编译less、sass、地址添加hash、替换等。不过，随着前端工程化的发展，Webpack出现了，与其说是一个工程构建工具，Webpack更像是一套前端工程化解决方案。根据官

在现行的软件架构中，前端和后端是分离的，即前端只专注于页面渲染，而后台专注于业务逻辑，前端和后端是两个不同的工种，而前后端交互最常见的方式就是通过接口。前后端分离架构在正式说明前后台架构分离之前，我们来看一下多年之前，传统软件开发的架构模式。为什么要前后端分离还记得零几年我上大学的时候，在初学 Java Web 开发时，课本上介绍的还是 JSP + Servlet 这种很传统的架构模式，这时候前端和后端业务逻辑代码都在一个工程里面，还没有分离开来，这种开发模式属于 Model1 模式，虽然实现了逻辑

简介WebSocket是基于TCP的一种新的网络协议，并在2011年被IETF定为标准的全双工通信协议，它实现了客户端与服务器全双工通信。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。众所周知，在WebSocket出...

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles" @click="getDescribe(article.id)">方案一 getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.pus...

再有两个月，2018就快过完了，因而有必要在年末对2018年的前端学习做一个总结，本文主要从前端面试中的一些基础知识来对前端进行相关的总结。本文根据网络面试题进行总结。基础知识本部分主要从以下几个方面来回顾前端相关的基础知识：HTML相关CSS相关JAVASCRIPT相关DOM相关HTTP相关webpack相关Htmlhtml根据内容的结构化（内容语义化），选择合适的标签...

关于Jest测试的基础内容，可以参考之前的博客：前端单元测试之Jest本文主要讲的是匹配器（Matchers），匹配器（Matchers）是Jest中非常重要的一个概念，它可以提供很多种方式来让你去验证你所测试的返回值，本文重点介绍几种常用的Matcher，其他的可以通过官网api文档查看。相等匹配例如，有下面一段测试代码：test('two plus two is four', () =...

概述关于前端单元测试的好处自不必说，基础的介绍和知识可以参考之前的博客链接：React Native单元测试。在软件的测试领域，测试主要分为：单元测试、集成测试和功能测试。单元测试：在计算机编程中，单元测试（英语：Unit Testing）又称为模块测试, 是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函...

概述随着应用程序单页面需求的越来越复杂，应用状态的管理也变得越来越混乱，而Redux的就是为解决这一问题而出现的。在一个大型的应用程序中，应用的状态不仅包括从服务器获取的数据，还包括本地创建的数据，以及反应本地UI状态的数据，而Redux正是为解决这一复杂问题而存在的。redux作为一种单向数据流的实现，配合react非常好用，尤其是在项目比较大，逻辑比较复杂的时候，单项数据流的思想能使数...

3.6.1 React组件简介众所周知，组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。 所谓无状态组件，就是没有状态控制的组件，只做纯静态展示的作用，无状态组件是最基本的组件形式，它由属性props和渲染函数render构成。由于不涉...

随着应用程序单页面需求的越来越复杂，应用状态的管理也变得越来越混乱。应用的状态不仅包括从服务器获取的数据，还包括本地创建的数据，以及反应本地UI状态的数据，而Redux正是为解决这一复杂问题而存在的。用Redux官网的话来概括什么是Redux：Redux是针对JavaScript应用的可预测状态容器。这句话虽然简短，但其实是有几个涵义的:可预测的(predictable): 因为Re...

Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列，Node.js 里面的许多对象都会触发分发事件：一个 net.Server 对象会在每次有新连接时触发一个事件， 一个 fs.readStream 对象会在文件被打开的时候触发一个事件。 所有这些产生事件的对象都是 events.EventEmitter 的实例。EventEmitter简介events 模块只提供...

这几天在阅读徐超老师的《React 进阶之路》，然后在看看自己之前的《React Native移动开发实战》，发现之前我自己的书部分写的比较的浅显，最近打算对基础部分进行升级，加大基础部分，特别是React基础部分的讲解，并对React Native提供的组件部分进行升级。众所周知，React框架的核心思想是组件化，一个应用程序由多个组件搭建而成，组件最重要的概念是State（状态），Stat...

众所周知，React是一个专注于View层的前端框架，组件也】是React核心理念之一，一个完整的应用将由一个个独立的组件拼装而成，组件也是React最基础的一部分，学习React就需要先学习组件。React中创建组件的方式在了解React中的无状态和有状态的组件之前，先来了解在React中创建组件的三种方式：ES5写法：React.createClass；ES6写法：Reac...

SwiperSwiper是一个滑块容器类组件，主要提供如下的一些属性。 属性名 类型 说明 支持版本 indicator-dots Boolean 是否显示面板指示点...

Redux简介如果要用一句话来概括Redux，那么可以使用官网的这句话：Redux是针对JavaScript应用的可预测状态容器。此句话虽然简单，但包含了以下几个含义：可预测性(predictable): 因为Redux用了reducer与纯函数(pure function)的概念，每个新的state都会由旧的state建来一个全新的state。因而所有的状态修改都是”可预测的”。状态...

Webpack简介Webpack 是一个前端资源加载和打包工具。所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。 webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的依赖关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打...

在Angular 5发布半年之后，Angular 6在昨天正式发布，那么在这个版本有哪些新功能呢？新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外，这次更新还包括框架包（@angular/core、@angular/common、@angular/compiler 等）、Angular CLI、Angular Material + CDK等。ng updat...

这两年，各种异步编程框架，上面RxJava,RxAndroid,RxSwift等等，今天要聊的是RxJs，对于我等入门不久的前端工程师来说，这个框架还是比较有新颖的，中文官网地址：http://cn.rx.js.org/RxJs简介RxJS是一个异步编程的库，同时它通过observable序列来实现基于事件的编程。它提供了一个核心的类型：Observable，几个辅助类型（Observ

继移动APP之后，小程序作为当前移动的有一个入口为大家所推崇，不管是微信的小程序还是支付宝的小程序，其实现的思路都是一致的，即通过一个宿主来运行相关的JS页面。现在Hera根据市场需求，推出了一款真正的跨平台框架，除了可以让你的小程序除了在微信上运行，还可以打包成 Android 、 iOS应用，以及以 h5 的方式跑在浏览器端。主要的优点有：一套代码 处处运行 Hera提供了强大的跨平台能力：

概述JavaScript，作为一门处于高速发展期的开发语言，正在变的越来越完善、稳定。我们必须拥抱这些变化，并且我们需要把ES8加入到我们的技术栈中。 ECMAScript 是标准化的 JavaScript 语言，1997 年发布了第一版，1998 年和 1999 年发布了第二和第三个版本，之后沉寂 了许多年，直到 Ajax 流行起来后标准工作才再次起步，2009 年发布了第五个版本，自 2015

V8的前世今生V8是JavaScript渲染引擎，第一个版本随着Chrome的发布而发布(具体时间为2008年9月2日)。在运行JavaScript之前，相比其它的JavaScript的引擎转换成字节码或解释执行，V8将其编译成原生机器码（IA-32, x86-64, ARM, or MIPS CPUs），并且使用了如内联缓存（inline caching）等方法来提高性能。V8可以独立运行，也可以

Javascript 采用回调函数(callback)来处理异步编程。从同步编程到异步回调编程有一个适应的过程，但是如果出现多层回调嵌套，也就是我们常说的厄运的回调金字塔(Pyramid of Doom)，绝对是一种糟糕的编程体验。于是便有了 CommonJS 的 Promises/A 规范，用于解决回调金字塔问题。回调金字塔那么何为回调金字塔呢？简单的讲就是回调里面嵌套回调。例如：asyncOpe

概述高阶组件（ higher-order component ，HOC ）是 React 中复用组件逻辑的一种进阶技巧，通俗的讲，高阶组件就是一个 React 组件包裹着另外一个 React 组件。它本身并不是 React 的 API，而是一种 React 组件设计理念，众多的 React 库已经证明了它的价值，例如耳熟能详的 react-redux。 高级组件使用函数来实现，基本上是一个类工厂，

概述React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。JSX是什么JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。使用虚拟DOM可以将React的语法