我也要用- 博客(4216)
- 收藏
- 关注
RSS订阅转载 Flutter的setState更新原理和流程
调用 setState()必须是没有调用过 dispose()方法，不然出错，可通过mounted属性来判断调用此方法是否合法。if (mounted) { setState(() {});}清晰的看到在framework.dart内setstate方法除了一些条件判断就是：_element.markNeedsBuild();那我们看看markNeedsBuild。Element 类 markNeedsBuild方法 void markNeedsB...
2021-03-02 16:41:46
20
转载 异步编程-Future
Future可以说是在Dart异步编程中随处可见，比如一个网络请求返回的是Future对象，或者访问一个SharedPreferences返回一个Future对象等等。异步操作可以让你的程序在等待一个操作完成时继续处理其它的工作。而Dart 使用Future对象来表示异步操作的结果。我们通过前面文章都知道Dart是一个单线程模型的语言，所以遇到延迟的计算一般都需要采用异步方式来实现，那么Future就是代表这个异步返回的结果。1. 复习几个概念1.1 事件循环EventLoopDart的...
2021-03-02 14:11:34
28
转载 10个React安全实践
你在找保护 React 应用程序的最佳方法吗？那你找对地方了！我创建了这个 React 安全最佳实践清单，以帮助你和你的团队发现并解决 React 应用中的安全问题。这篇文章将展示如何自动测试你的 React 代码中的安全问题，并修复它们。让我们开始吧。数据绑定（ Data Binding）默认的xss保护 危险的URL 渲染html 直接访问dom 服务端渲染 检测依赖项中的漏洞 JSON State 检测React易受攻击版本 linter工具 危险的库...
2021-02-20 10:48:26
71
原创 搭建 React 开发环境
初始化创建文件夹并进入：$ mkdir tristana && cd tristana初始化package.json$ npm init安装Webpack$ npm install webpack webpack-cli --save-dev创建以下目录结构、文件和内容：projecttristana|- package.json|- /dist |- index.html|- /script |- webpack.confi..
2021-02-20 10:46:09
49
转载 Flutter异常捕获和Crash崩溃日志收集
前言和Android中的Java语言类似，Dart中也可以通过try/catch/finally来捕获代码块异常。不同的是在Dart中发生异常的时候flutter APP并不会崩溃。在我的实践中，debug版中的Dart异常会表现为红屏加异常信息，而release版则是空白的白屏。下面我们就从源码追溯Flutter的异常和捕获Flutter捕获的异常Flutter为我们提供了部分异常捕获。在flutter开发中大家肯定遇到过屏幕编程红色并带有错误信息的情况，甚至在Widget宽度越界时也会出现这
2021-01-15 10:40:52
141
转载 捕获 flutter app的崩溃日志并上报
flutter 的崩溃日志收集主要有两个方面：flutter dart 代码的异常（包含app和framework代码两种情况，一般不会引起闪退，你猜为什么） flutter engine 的崩溃日志（一般会闪退）Flutter App 代码异常捕获人写的代码是无数异常交织起来的偶然产物，代码发生异常才是正常情况。除了在关键的地方加上try-catch让它们变成已知异常之外，抓到未知异常才是真本事。比如下面的一段代码中的try-catch是无效的： 12345..
2021-01-15 10:39:11
164
转载 React Native之原理浅析
一、JavaScriptCore讲React Native之前，了解JavaScriptCore会有帮助，也是必要的。React Native的核心驱动力就来自于JS Engine. 你写的所有JS和JSX代码都会被JS Engine来执行, 没有JS Engine的参与，你是无法享受ReactJS给原生应用开发带来的便利的。在iOS上，默认的就是JavaScriptCore， iOS 7之后的设备都支持. iOS 不允许用自己的JS Engine. JavaScriptCore来自于WebKit,
2021-01-12 11:20:02
74
转载 React Native 原理与实践
React Native 介绍什么是 React Native？React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架，它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。它既保留了 React 的开发效率，又同时拥有 Native 应用的良好体验，加上 Virtual DOM 跨平台的优势，实现了真正意义上的：Learn Once,Write Anywhere.注：非高清 logo，这不是原子
2021-01-12 10:59:47
70
转载 Flutter 最常出现的错误
哔哩哔哩漫画APP实践Flutter也有大半年时间了，我针对线上收集到的错误进行分析，挑选出了一些有一般代表性的错误，列在本文，可供实践 Flutter 的初学者们作为一点参考。典型错误一：无法掌握的Future典型错误信息：NoSuchMethodError: The method 'markNeedsBuild' was called on null.这个错误常出现在异步任务（Future）处理，比如某个页面请求一个网络API数据，根据数据刷新 Widget State。异步任务结束在页
2021-01-08 13:57:12
133
转载 Jenkins自动部署前端项目
一、前言1.1 传统网站部署的流程传统的网站部署，大家在运维过程中，网站部署是运维的工作之一，网站部署的流程大致分为：需求分析—原型设计—开发代码—提交测试—内网部署—确认上线—备份数据—外网更新-最终测试，如果发现外网部署的代码有异常，需要及时回滚。（如下图所示）1.2 目前主流网站部署的流程目前主流网站部署方法，通过Jenkins工具平台实现全自动部署+测试，是一个可扩展的持续集成引擎，是一个开源软件项目，旨在提供一个开放易用的软件平台，使软件的持续集成变成可能。Jenkins
2021-01-05 21:40:03
60
原创 Flutter状态管理
一、什么是状态管理？为什么要状态管理?一般开发一款应用程序，页面间极有可能需要互相进行数据传递，而这里的数据传递也就是指页面间的状态同步（管理）。页面内部的状态是可以用StatefulWidget维护其状态，当我们需要使用跨组件的状态时，StatefulWidget 将不再是一个好的选择。在多个 Widget 之间进行交流的时候，虽然你可以使用事件处理的方式解决（setState、callback、EventBus、Notification），但是当嵌套足够深的话，很容易就增大代码耦合度。状态管理就是
2021-01-04 11:06:29
76
转载 JavaScript算法&数据结构
写在前面计算机行业发展，前端亦或是后端，算法都是进阶道路的一个绊脚石，也是垫脚石，算法没有秘籍，唯有坚持，让我们一起坚持从 0 到 1 刷算法吧，每天刷过的算法题目会以 issues 的形式记录并给出题解，方便下次复习，题目会进行分类，前期按照数据结构分类规划系统学习，如果你刚刚加入，可以直接按照我们给出的题目顺序来每天刷一道题，直到养成独立解题思维即可自由不设限刷题相关的每种数据结构刷题前的小知识会陆续以文章+视频的方式补充，我们刷的每一题我也会补充上视频题解视频请看B站isboyjc/黑板.
2020-12-29 14:25:48
114
转载 深入理解Flutter的图形图像绘制原理——图形库skia剖析
Flutter是目前流行的高性能跨平台UI框架，图形库skia是其跨平台的基石。本文将深入分析skia的图形、字体、图片的渲染原理，如何挖掘硬件特性，为UI性能优化提供思路。1. 引言Flutter是目前非常流行的跨平台UI开发框架，不仅支持Android、iOS，还支持Windows、Linux等操作系统。Flutter的性能非常高，拥有120fps的刷新率。那么flutter是如何实现在不同平台上高性能绘制图形图像的呢？首先我们分析下Flutter App和原生Android App、原生iOS
2020-12-28 09:38:06
279
转载 前端性能监控
根据W3C性能小组引入的新的API(目前IE9以上的浏览器)--window.performance，实现前端性能监控以下是fast3G情况下数据展示使用方法：将下面函数引入到index.html文件 每次切换页面即可读取到信息，最好是放在打包上线后的文件中，这样可以读取dns,tcp解析时间。各个阶段图示以下是函数封装(function () { handleAddListener('load', getTiming) function handleA
2020-12-23 09:41:52
88
转载 阿里云ECS服务器前后端项目部署
最近自己写了一个小项目，想把它部署在服务器上以便实时查看，在此记录一下自己的部署过程以及在部署过程中遇到的问题，方便日后查看。参考：www.kovli.com/2017/09/19/…作者：Kovli一、购买云服务器目前国内占有率比较高的就是腾讯云和阿里云，这里本人选择的是阿里云的ECS云服务器。（吐槽一下，普通价格真的比学生价贵太多了） 如果在购买时没有设置ssh密码，可以进入ECS控制台-示例列表-重置密码中设置密码。把IP地址中的公网IP记录下来，后续会用到。 二、登录服务器选
2020-12-21 14:00:45
168
转载 前端技术：一文带你掌握Flutter插件开发新姿势
导语 |随着Flutter生态的快速发展，越来越多的Flutter插件涌现出来，那么如何开发一个Flutter插件呢？本文以具体的native_image_view插件为例，带你快速掌握Flutter插件的开发。文章作者：赵哲，腾讯游戏运营研发工程师一、概述随着开发技术的发展，几乎所有主流的开发语言都有自己的包管理工具。Node开发有npm、Android开发有Gradle，Flutter也有自己的Dart Packages仓库。插件的开发和复用能够提高开发效率，降低工程的耦合度，像网络请求...
2020-12-17 15:18:29
141
转载 Flutter混合开发时使用热重载Hot Reload
纯 Flutter 工程，我们用 Android Studio 打开，然后运行起来，Control + S，或者点击热重载按钮，就会直接刷新页面了。但是 Flutter 混合开发时，Control + S，显然是不行的，并且热重载按钮是不可点击的，因为工程项目是以Android项目打开的，而不是Flutter工程。实际具体操作也很简单，1，首先以Android项目，运行起整个工程；2，到命令行，打开 flutter_lib 目录（Flutter module工程）；3，输入命令：flutter
2020-12-16 20:03:13
82
转载 揭开Flutter工程编译的面纱（Android篇）
一、引言本文主要对Flutter工程编译时如何把Flutter生成的产物打包进入Android工程中进行分析。在Flutter工中打包过程中涉及到了local.properties、settings.gradle、build.gradle、flutter.gradle这几个脚本文件的参与，与传统的Android工程相比这几个脚本文件中的内容也不相同，接下来我们通过一层层解析，解开Flutter工程编译的面纱。 同时也建议大家看的时候搭配Flutter工程一起食用效果更佳。二、工程结构分析首先我们
2020-12-16 19:56:55
100
原创 Flutter 学习文档
flutter中文官网：https://flutter.cn/将 Flutter module 集成到 Android 项目：https://flutter.cn/docs/development/add-to-app/android/project-setupFlutter 混合工程持续集成实践：https://blog.csdn.net/u010960265/article/details/81533732Flutter完整开发实战详解(十四、混合开发打包 Android 篇)：https:.
2020-12-16 18:06:07
9
转载 【React Native进阶】React Native Gesture Handler的使用
背景说到React Navtive的性能优化，首先要了解React Native的运行机制。React Native程序主要运行在三个并行的线程上：JS Thread：我们写的JS代码逻辑都是在这个线程上执行； UI Thread：即原生线程，当我们需要调用原生的渲染或者能力时会运行到这个线程上； Shadow Thread：这个线程创建和管理着Shadow Tree，它类似于虚拟DOM。它通过Yoga引擎着Flexbox布局转化为原生的布局方式。这三个线程独立运行的情况下，性能良好，但如果存
2020-12-16 10:25:44
209
转载 flutter给滚动内容添加粘性header组件
前言Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇
2020-12-15 16:35:26
71
转载 lutter可定制的上下滑出抽屉
前言Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇
2020-12-15 16:32:25
69
转载 flutter圆形或线型进度条
前言Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇
2020-12-15 16:31:01
101
1
转载 Flutter: Update Widgets On Resume?
import 'package:flutter/foundation.dart';import 'package:flutter/widgets.dart';class LifecycleEventHandler extends WidgetsBindingObserver { LifecycleEventHandler({this.resumeCallBack, this.suspendingCallBack}); final AsyncCallback resumeCallBack;.
2020-12-09 16:44:49
53
转载 Flutter State生命周期 Flutter Widget生命周期 Flutter 应用程序生命周期
在 Flutter应用程序中，生命周期涉及两个，一个是 Widget 的生命周期，一个是应用程序的生命周期，本文章说明通过 flutter_life_state 依赖库实现在 Flutter 中类似 Android 中Activity的生命周期监听，类似 iOS UIViewController 的生命周期。import 'package:flutter/material.dart';import 'package:flutter_life_state/flutter_life_state.d.
2020-12-09 14:30:14
55
转载 Vue 递归组件
对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加，那么有没有一种方法来解决这个问题呢？答案是肯定的，我们可以通过 递归 方式来生成这个结构，当然在 Vue 模板中也是可以实现的，我们可以在 Vue 的组件中调用自己本身，这样就能达到目的。当然，在 Vue 中，组件可以递归的调用本身，但是有一些条件：该组件一定要有 name 属性 要确保递归的调用有终止条件，防止内存溢出为了方便理解递归组件，我写了一个小小的 Demo：
2020-12-09 10:48:47
99
转载 Flutter 监听应用程序路由堆栈变化
很多时候我们需要监听路由堆栈的变化，这样可以自定义路由堆栈、方便分析异常日志等。监听路由堆栈的变化使用RouteObserver，首先在MaterialApp组件中添加navigatorObservers：void main() { runApp(MyApp());}RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();class MyApp extends State...
2020-12-09 10:25:48
68
原创 Flutter安卓 Log plugin开发
基于Flutter Version:1.22.3, Dart Version:2.10.3FlutterPlugin提供了Android和ios的底层封装，在Flutter层提供组件功能，使得Flutter可以比较方便得调用Native得模块，对于Flutter实现比较复杂或者基于平台不能完成得部分，都可以封装成Plugin。本文都是android得样例。Flutter调用android原生实现，封装成Plugin基本流程Flutter端声明MethodChannel,并通过invokeM
2020-12-09 09:52:42
38
转载 requestAnimationFrame详解
为什么要说它，源于看到的一道面试题：问题是用js实现一个无限循环的动画。首先想到的是定时器<!doctype html><html lang="en"><head> <title>Document</title> <style> #e{ width: 100px; height: 100px; background.
2020-12-08 14:19:40
84
转载 使用Flutter重构斗鱼APP
flutter重构的斗鱼直播APP首页、娱乐为Material组件；直播间、鱼吧为纯自定义编写。另外整合各类优质的第三方开源库，打造出原生APP丝滑的用户体验尽可能接入更多功能，方法附带注释，帮助你在使用flutter进行开发新的应用提供实用的借鉴案例包含功能：启动页广告位 开播列表上拉加载、下拉刷新、返回顶部 列表图片缓存加载优化 渐进式头部动画 底部导航切换保存页面状态 HTTP缓存、IO缓存 直播间webSocket消息弹幕、礼物 页面路由传值 RxDart全局消息通信封
2020-12-08 09:30:17
91
转载 Bolt 的 Flutter 路由管理实践（页面解耦，流程控制、功能拓展等）
在各大移动开发框架（Android、iOS、Flutter、React Native…）中，路由管理始终是 UI 架构最具热议的话题之一。一大原因就是应用程序的页面会不可避免的多，我们可以使用 BLOC，MVP，MVI 等等模式将 UI 和业务逻辑合理分离实现良好的架构，但是如何将一个新页面合理地集成到现有的结构中还是一个比较大的难题。Android 中，除了传统的 Intent / Fragment 事务方式，Google 也在 Jetpack 中专门提供了用于管理复杂页面逻辑的 Navigat.
2020-12-08 09:09:30
51
转载 react-native bundle 到 bundle 生成到底发生了什么(metro 打包流程简析)
本文涉及react-native及metro版本react-native@0.63.2 metro@0.58.0先来看一波本文的实例代码:很简单吧，一个你好，世界// App.jsimport React from "react";import { StyleSheet, Text, View } from "react-native";export default class App extends React.Component { render() { retu...
2020-12-03 20:20:16
183
转载 ReactNative与iOS通信原理解析-通信篇
文章首发个人博客:ReactNative与iOS通信原理解析-通信篇导语：其实原本是想编写一篇react-native(下文简称 rn) 在iOS中如何实现jsbridge的文章;相信看过官方文档的同学都清楚 rn 和 iOS 通信使用了一个叫RCTBridgeModule的模块去实现；相信大家与我一样，不能知其然不知其所以然；所以决定去翻一番 rn 的源码，一探其 rn 与 iOS 通信的机制。结果随着分析的深入发现内容较多；于是编写了ReactNative 与 iOS 原生通信原理解...
2020-12-03 20:16:25
135
原创 Flutter 常用快捷键
AndroidStudio 插件安装位置/Applications/Android Studio.app/Contents/plugins清除Flutter 缓存文件清除该目录下文件flutter/bin/cache/lockfile断点调试在源码中设置断点，选中需要设置代码的那一行，在它的左侧点击一下会出现一个小红点； 点击"调试"图标或者调用Run -> Debug即可1.创建flutter工程Flutter Application（全新的APP）..
2020-12-03 19:53:30
65
转载 Flutter 插件的创建及使用
在 Flutter 项目的开发中，我们需要根据自己的业务需求来创建各种各样的插件，这里记录下关于 Flutter 插件的创建及使用的过程。官方文档这里主要记录如下几点：插件的创建 获取 Android 中的上下文 Context Dart 调用插件方法及传参 插件调用 Dart 的方法及传参 插件中监听 Activity 的生命周期及常用的回调方法 使用 Delegate 的方式来写插件 插件的几种依赖方式（pub、本地、git） 插件的上传及注意事项插件的创建我们可以通过两
2020-12-03 19:39:36
179
转载 【从源码分析】可能是全网最实用的React Native异常解决方案
前言在做React Native混合开发时，生产环境有时会遇到打开RN（即React Native简称）应用白屏、RN页面内操作闪退到native页面或者直接导致APP Crash的情况。通过分析APP日志，发现原因可以归类为一下两种：js 层编译运行时报错。一般是由于某些特殊的数据或情景导致js执行报错； js 转译 native UI 或与 native modules通信时出现异常.对于第一点，可以很快地通过log追踪到出现问题的js代码并解决，但是对于第二点，往往是框架底层代码执行报错阻
2020-12-03 15:54:36
176
转载 Flutter 中的组件绘制完成监听、组件生命周期和APP生命周期
Flutter 的 生命周期说到 Flutter 的生命周期，其实就是说 StatefulWidget 的生命周期，因为 StatelessWidget 是静态控件。StatefulWidget，通过借助于 State 对象，处理状态变化，并体现在 UI 上。这些阶段，就涵盖了一个组件从加载到卸载的全过程，即生命周期。而一个应用的生命周期，包括了页面组件的生命周期和整个 app 的生命周期。我们分别了解下。State 生命周期首先我们看下 State 里面的这几个方法： @over
2020-12-03 15:53:07
164
转载 Flutter NestedScrollView使用
题记—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，优美的应用体验 来自于细节的处理，更源自于码农的自我要求与努力Flutter是谷歌推出的最新的移动开发框架。【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注【x2】各种系列的视频教程 免费开源 关注 你不会迷路【x3】系列文章 百万 Demo 随时 复制粘贴 使用【x4】五分钟视频快速带你浏览构建【x5】一目了然的源码如下图所示，你的APP项目中一定会应用到这样的场景。 以小编的
2020-12-03 15:52:57
132
转载 Flutter widget目录
这是个Flutter教学系列的文章，会从Flutter基础入门开始讲解，带领大家从零开始学习Flutter，从基础组件一个一个的过，可以保证每个没有Flutter开发基础的同学看完都能快速上手，并且对基础知识一一讲解，打好基础，对于有经验的同学也可以更好的扎实基础功。过完基础后也就算是Flutter入门了，后期还会有进阶教程，深入教程。在这个过程中也希望大家能提出宝贵意见，指出文章中的不完善，谢谢！Github源代码（持续更新中）教学讲解Flutter（1）：Flutter Mac/Flutte
2020-12-02 16:48:31
55
转载 Flutter 页面中的异常处理ErrorWidget
Flutter中异常处理Dart是单进程机制，所以在这个进程中出现问题时仅仅会影响当前进程，在事件循环中，当某个任务发生异常并没有被捕获时，程序并不会退出，而直接导致的结果是当前任务的后续代码就不会被执行了，也就是说一个任务中的异常是不会影响其它任务执行的。Flutter 异常Flutter 异常指的是，Flutter 程序中 Dart 代码运行时意外发生的错误事件。我们可以通过与 Java 类似的 try-catch 机制来捕获它。但与 Java 不同的是，Dart 程序不强制要求我们必须处理
2020-12-02 15:53:54
181
空空如也
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人 TA的粉丝