zhangrui_web-CSDN博客

原创 Taro/kbone/uni-app多端统一开发框架(小程序篇)

随着小程序的火热推出，现如今多端统一开发框架层出不穷；今天给大家简单的讲解一下，Taro，kbone，uni-app三个框架的横评；Taro京东凹凸实验室出品，官网地址：Taro | 多端统一开发解决方案多端框架，发布到各个端均可，均将常用接口及组件封装了成了跨端API和跨端组件，组件规范沿用微信小程序的规范，部分平台特有API；支持与小程序代码混写，可通过混写的方式调用框架尚未封装的小程序新增API；uni-appDCloud出品，官网地址：https://uniapp.d

2021-12-27 16:27:55 2776

原创 MQTT入门篇

物联网（Internet of Things，IoT）最近曝光率越来越高。虽然HTTP是网页的事实标准，不过机器之间（Machine-to-Machine，M2M）的大规模沟通需要不同的模式：之前的请求/回答（Request/Response）模式不再合适，取而代之的是发布/订阅（Publish/Subscribe）模式。这就是轻量级、可扩展的MQTT（Message Queuing Teleme...

2021-12-27 16:06:13 265

转载 kbone-多端统一开发工具（小程序）

kbone 是一个致力于微信小程序和 Web 端同构的解决方案。简介微信小程序的底层模型和 Web 端不同，我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题，它实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。这里有个简单的代码片段：https://developers.weixin.qq.com/s/R9Hm0Qm67Acd，可以使用开发者工具打开看看效果。因为 kbone 是通过..

2021-12-27 15:55:11 636

转载 React 性能优化技巧(纯干货)

本文篇幅较长，将从编译阶段->路由阶段->渲染阶段->细节优化->状态管理->海量数据源，长列表渲染方向分别加以探讨。一不能输在起跑线上，优化babel配置,webpack配置为项1 真实项目中痛点当我们用create-react-app或者webpack构建react工程的时候，有没有想过一个问题，我们的配置能否让我们的项目更快的构建速度，更小的项目体积，更简洁清晰的项目结构。随着我们的项目越做越大，项目依赖越来越多，项目结构越来越来...

2021-01-22 10:56:20 11610 2

转载 React特性Hooks,Suspense,lazy,memo解析

1.memo其实react.memo的实现很简单，就几行代码。export default function memo<Props>( type: React$ElementType, compare?: (oldProps: Props, newProps: Props) => boolean,) { if (__DEV__) { if (!is...

2019-11-05 15:09:16 624

原创 Vue3.0时代即将到来

在10月05日凌晨Vue3的源代码正式发布了，来自官方的消息：目前的版本是Pre-Alpha ，作者表示，Vue 3 主要的架构改进、优化和新功能均已完成，剩下的主要任务是完成一些 Vue 2 现有功能的移植。仓库地址：Vue-next，可以通过Composition API了解更多新版本的信息，目前版本单元测试相关情况vue-next-coverage。Vue 3...

2019-10-09 09:23:16 5786

转载 Flutter初识篇（四）

简介本章将通过一些简单的示例来一步步介绍Flutter的开发流程.本章目录Flutter的第一个应用 Flutter路由管理 Flutter包管理 Flutter资源管理 Flutter应用调试 Dart线程模型及异常捕获...

2019-05-17 08:37:09 215

转载 Dart线程模型及异常捕获

Dart线程模型及异常捕获Dart单线程模型在Java和OC中，如果程序发生异常且没有被捕获，那么程序将会终止，但在Dart或JavaScript中则不会，究其原因，这和它们的运行机制有关系，Java和OC都是多线程模型的编程语言，任意一个线程触发异常且没被捕获时，整个进程就退出了。但Dart和JavaScript不会，它们都是单线程模型，运行机制很相似(但有区别)，下面我们通过Dart官...

2019-05-16 19:43:27 1265 1

转载 Flutter应用调试

调试Flutter应用有各种各样的工具和功能来帮助调试Flutter应用程序。Dart 分析器在运行应用程序前，请运行flutter analyze测试你的代码。这个工具（它是dartanalyzer工具的一个包装）将分析你的代码并帮助你发现可能的错误。如果你使用IntelliJ的Flutter插件，那么已经自动启用了。Dart分析器大量使用了代码中的类型注释来帮助追踪问题。我们...

2019-05-16 19:42:34 2241 1

转载 Flutter资源管理

资源管理Flutter应用程序可以包含代码和 assets（有时称为资源）。assets是会打包到程序安装包中的，可在运行时访问。常见类型的assets包括静态数据（例如JSON文件）、配置文件、图标和图片（JPEG，WebP，GIF，动画WebP / GIF，PNG，BMP和WBMP）等。指定 assets和包管理一样，Flutter也使用pubspec.yaml文件来管理应用程序所...

2019-05-16 19:41:22 350

转载 Flutter包管理

包管理一个完整的应用程序往往会依赖很多第三方包，正如在原生开发中，Android使用Gradle来管理依赖，iOS用Cocoapods或Carthage来管理依赖，而Flutter也有自己的依赖管理工具，本节我们主要介绍一下flutter如何使用配置文件pubspec.yaml（位于项目根目录）来管理第三方依赖包。YAML是一种直观、可读性高并且容易被人类阅读的文件格式，它和xml或Jso...

2019-05-16 19:40:28 518

转载 Flutter路由管理

路由管理路由(Route)在移动开发中通常指页面（Page），这跟web开发中单页应用的Route概念意义是相同的，Route在Android中通常指一个Activity，在iOS中指一个ViewController。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。这和原生开发类似，无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个...

2019-05-16 19:39:37 649

转载 Flutter的第一个应用

计数器应用示例用Android Studio和VS Code创建的Flutter应用模板是一个简单的计数器示例，本节先仔细讲解一下这个计数器Demo的源码，让读者对Flutter应用程序结构有个基本了解，在随后小节中，将会基于此示例，一步一步添加一些新的功能来介绍Flutter应用的其它概念与技术。对于接下来的示例，希望读者可以跟着笔者实际动手来写一下，这样不仅可以加深印象，而且也会对介绍的概...

2019-05-16 19:38:27 270

转载 Flutter初识篇（三）

Dart语言简介在之前我们已经介绍过Dart语言的相关特性，读者可以翻看一下，如果你熟悉Dart语法，可以跳过本节，如果你还不了解Dart，不用担心，按照笔者经验，如果你有过其他编程语言经验，尤其是Java和JavaScript的话，所以，如果你是前端或Android开发者，那么将会非常容易上手Dart。当然，如果你是iOS开发者，也不用担心，Dart中也有一些与Swift比较相似的特性，如命...

2019-05-16 19:33:40 221

转载 Flutter初识篇（二）

常见配置问题Android Studio问题缺少依赖库问题上手安卓最常遇见的问题之一，错误如下图所示，此时点击超链接即可自动跳转到安装页面安装之后重新运行即可。连接不上Android Repository这也是最常见的问题之一，当你发现自己无法下载部分依赖的时候，请优先考虑这种情况。进入File->Settings->Appearance &a...

2019-05-16 19:30:43 171

转载 Flutter初识篇（一）

最近想要研究一下Flutter，分享大家一起学习一下！！！安装Flutter工欲善其事必先利其器，本节首先会分别介绍一下在Windows和macOS下Flutter SDK的安装，然后再介绍一下配IDE和模拟器的使用。搭建Flutter开发环境由于Flutter会同时构建Android和IOS两个平台的发布包，所以Flutter同时依赖Android SDK和iOS SDK，在安装...

2019-05-16 19:29:15 367

转载 Less中使用calc()的坑

前端开发者们对于calc()已经不陌生了，它是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来计算元素的长度。使用示例如下：div { height: calc(100vh - 88px);}需要注意的只有一点：中间的运算符两头都要有空格！！！同样的代码写在less中，就出现问题了。最终结果可能变成了：div { height: ca...

2019-05-16 19:00:41 2422

转载 h5+实现手机端的录音，拍照，录像

使用h5+即h5plus可以实现调用手机的功能实现语音的录制播放，图片上传下载，拍照，录像的功能，并提供上传下载的功能。开发工具使用hbuilder，该开发工具有模板和demo可以参考实现快速的开发app功能。使用h5调用硬件的功能，实现原生的效果，前端开发app周期短，开发速度快，入门门槛低，hbuilder还提供了一个mui库，可以实现很多手机原生ui的效果。上传下载参考：https://...

2019-03-06 16:44:13 7624

转载 electron窗口和主进程通信ipc

Electron与前端通信ipcconst electron = require('electron')const { app } = electronconst ipc = require('electron').ipcMainconst { BrowserWindow } = electronlet winipc.on('getMsg', (sys, msg) =&g...

2018-10-23 14:06:15 1737

转载 react如何显示HTML之dangerouslySetInnerHTML

在react中，通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。在显示时，将内容写入__html对象中即可。具体如下： <div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />如果是直接调用接口中的值，则是以上的写法，如果是单纯的显示固定的内容，用如下的写法...

2018-09-28 15:02:59 6356

转载 nwjs解决页面透明化，启动时显示白屏的问题

在html页面实现：<body style="background-color:rgba(0,0,0,0)">在package.json 文件中实现"window": {"frame": false,"transparent": true}好了可以透明化了，可是就是显示的时候有一闪的白屏，白屏就闪了一下，怎么办继续在package.json中添加文件"sho...

2018-09-20 15:22:29 1650

转载 NW.js之基础篇（2）

2.1 基本程序结构 2.2 package.json 2.2.1 必须的配置 2.2.2 特性控制字段 2.3 小结2.1 基本程序结构如上图，是一个nw程序的基本组织结构，在根目录下package.json,程序的配置文件；index.html(可以是任意名称)，应用的启动页面；js/css/resources，应用的样式、脚本、html、图片等资源文件；node_mo...

2018-09-20 15:03:14 1150

转载 NW.js之Native UI API概览(3)

目录node-webkit学习(3)Native UI API概览3.1 Native UI api概览 Extended Window APIs. Menus. Platform Services. Tips. 3.2 注意事项 3.3 EventEmitter 3.4 小结3.1 Native UI api概览Native UI API，是提供了在代码中访...

2018-09-20 14:59:02 740

转载 NW.js之入门篇(1)

目录1.1 环境安装 1.1.1 windows下的安装 1.1.2 linux环境下的安装 1.2 hello world1.1 环境安装webkit是开源项目，项目地址为https://github.com/rogerwang/node-webkit。我们可以在该项目首页找到downloads节（https://github.com/rogerwang/node-we...

2018-09-20 14:56:46 3589

转载 NW.js之window篇(4)

4.1 window api 概述 4.2 获取和创建窗口 4.3 window对象属性和方法 4.3.1 Window.window 4.3.2 Window.x/Window.y 4.3.3 Window.width/Window.height 4.3.4 Window.title 4.3.5 Window.menu 4.3.6 Window.isFullscreen...

2018-09-20 14:54:17 6294 2

转载 Electron前端开发桌面程序--入门篇

前言前端开发桌面程序这个概念已经出现有一段时间了，这项技术也已经走向成熟，Github上nw和光electron的star就差不多有10w颗星了，github也衍生出了很多开源的桌面项目俨然成了一个热门项目。既然这么热，那就一个字：学。本文主要帮助js基础比较薄弱，又没有接触过electron的同学更好的学习electron，文中有什么不足之处或者错误，欢迎指出。electron 安装npm命令安...

2018-06-15 13:31:24 22867 1

转载 Nerv - 京东高性能前端框架

Nerv 是一款由京东凹凸实验室打造的类 React 前端框架。目前已广泛运用在京东商城（JD.COM）核心业务及TOPLIFE全站。Nerv 基于React标准，使用 Virtual Dom 技术，拥有和 React 一致的 API 与生命周期，如果你已经对 React 使用非常熟悉，那么使用 Nerv 开发对你来说绝对是零学习成本。与此同时，相比于 React 以及市面其他同类型框架，Nerv...

2018-06-14 09:39:33 5175

转载多端统一开发框架 - Taro

Taro 是什么？Taro - 多端开发框架Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。现如今市面上端的形态多种多样，Web、App 端(React Native)、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。使用 Tar...

2018-06-14 09:32:51 3242

转载 MQTT入门篇

2018-06-06 16:11:50 667

原创 Three.js与canvas实现地球自转动画

效果如上图实现代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>旋转球体</title> <style> body{ margin: 0;

2018-06-06 13:40:25 6952

转载 SVG 快速入门

SVG 全称是 Scalable Vector Graphics，即，矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先，不要把 SVG 和 CSS，Canvas，HTML 搞混。他们之间并没有你中有我，我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。如何书写开篇说过，SVG 就是一个 XML。看一下代码吧：<svg x="0px" y="0px" ...

2018-06-06 13:32:06 277

转载 WebSocket入门篇

一、为什么需要 WebSocket？初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续...

2018-04-14 16:51:13 201

转载消息队列（二）--- 十大用途

解耦在项...

2018-04-12 15:33:47 239

转载消息队列（一）--- 四种场景

消息队列中间件是分布式系统中重要的组件，主要解决应用耦合，异步消息，流量削锋等问题实现高性能，高可用，可伸缩和最终一致性架构使用较多的消息队列有ActiveMQ，RabbitMQ，ZeroMQ，Kafka，MetaMQ，RocketMQ二、消息队列应用场景以下介绍消息队列在实际应用中常用的使用场景。异步处理，应用解耦，流量削锋和消息通讯四个场景2.1异步处理场景说明：用户注册后，需要发注册邮件和注...

2018-04-12 15:30:04 946

转载 react前端框架dva(四)

dva.js 知识导图不知大家学 react 或 dva 时会不会有这样的疑惑：es6 特性那么多，我需要全部学会吗?react component 有 3 种写法，我需要全部学会吗?reducer 的增删改应该怎么写?怎么做全局/局部的错误处理?怎么发异步请求?怎么处理复杂的异步业务逻辑?怎么配置路由?...这篇文档梳理了基于 dva-cli 使用 dva 的最小知识集，让你可以用最少的时间掌握...

2018-03-22 11:40:52 4312 1

转载 react前端框架dva(三)

API输出文件dva默认输出文件。dva/router默认输出 react-router 接口， react-router-redux 的接口通过属性 routerRedux 输出。比如：import { Router, Route, routerRedux } from 'dva/router';dva/fetch异步请求库，输出 isomorphic-fetch 的接口。不和 dva 强绑定，...

2018-03-22 11:23:47 10412

转载 react前端框架dva(二)

dva的8个基础概念：数据流向数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且...

2018-03-19 09:12:47 5507 2

转载为企业级框架和应用而生--Egg.js

一. Quick StartEgg是一个强约束的Node框架，这也会其和Express/Koa最大的不同，后者对开发者相对宽松，主要体现在目录结构，编写方式等均可以自定义。Egg对目录结构等有一系列要求，幸运的是，虽然官方文档几乎是鸭蛋，但是Git上的官方人员还是很贴心的给我们送上了一个自动生成项目目录以及一些简单例子的方式，我们可以来看下：执行如下命令来安装egg-init，在*nix系统下有可...

2018-02-27 17:29:49 1033

原创支付宝框架UmiJs（五米）

最近有发现了一套dva过后的新的React应用框架--UmiJs（当然也可叫做“优米”或者“五米”）。不知道，对UmiJs这套框架有所了解的小伙伴们，对这套框架有什么看法呢？请留言哦！也是刚刚了解这套框架，那么废话少说我们来切入主题吧。umi 就是一套零配置，按最佳实践进行开发的前端框架。具有以下几点特性：1、高性能 PWA、按需加载、tree-shake、scope-hoist、智能提取公...

2018-02-27 17:10:26 13313