Codemagic 持续部署 Flutter 应用前言持续集成和持续部署能够自动化应用开发的测试，构建和部署过程，如果在应用开发初期解决了这个问题无疑提升应用的开发，交付效率。什么是CodemagicCodemagic是一个为Flutter项目以及其它移动端项目提供 CI/CD 服务的平台。可以使用 Github 账号注册登录，登录后它会要求获得你仓库的读/写权限，然后在apps页面显示你需要进行构建的项目。为什么使用Codemagic好的CI/CD有助于更快地构建，测试以及部署发布应用。在Flutter的官方文档Flutter 里的持续部署里介绍了使用fastlane工具进行本地部署以及如何将fastlane整合到Travis，Cirrus，Bitrise等持续交付的服务中，但是对于Flutter项目来说最方便的CI/CD服务应该还是Codemagic，它可以直接在网页上就配置出完整的应用交付流程。如何使用选择需要构建的Fluter项目，点击Start your first build按钮，创建一个工作流程Workflow。一个Workflow指的是每次构建要做的任务，如执行构建，测试以及发布任务。对于Flutter项目可以在网页上配置或使用codemagic.yaml配置文件，其它项目只能使用codemagic.yaml配置。一个Workflow由以下几个部分组成Build t ...继续阅读 (11)

使用SearchDelegate给 Flutter 应用添加搜索功能前言SearchDelegate是 Flutter 框架提供的一个实现搜索功能的类，使用它可以快速实现搜索功能，本文说明如何使用它来实现搜索功能。最终效果如下创建新项目，初始化代码如下123456789101112131415161718192021222324252627import'package:flutter/material.dart';voidmain() {runApp(MyApp());}classMyAppextendsStatelessWidget{@overrideWidget build(BuildContext context) {returnMaterialApp(title:'Search App',home: HomePage(),);}}classHomePageextendsStatelessWidget{@overrideWidget build(BuildContext context) {returnScaffold(appBar: AppBar(title: Text('Search App'),),);}}显示搜索页面showSearch方法是 Flutter 里用来显示 ...继续阅读 (23)

Flutter 应用进行路由跳转的时候有默认的过渡动画，但是自定义的跳转动画会让应用更具特色TL;DR使用PageRouteBuilder创建自定义路由在transitionsBuilder方法里创建过渡动画过渡动画示例定义全局路由过渡动画封装自定义路由前言在Flutter中使用Navigator.of(context).push(Route route);方法进行路由跳转时就需要传一个Route对象，通常使用MaterialPageRoute(builder: () {});创建，使用时会在路由跳转过程中添加默认的过渡动画。当需要自定义路由过渡动画时，就要使用PageRouteBuilder，它是Flutter提供的用来创建自定义的路由的一个类，实例化这个类会得到一个路由对象Route，要做的就是创建一个自定义的Route。PageRouteBuilder使用PageRouteBuilder创建自定义路由过渡动画时需要传入两个回调函数作为参数，一个必要参数pageBuilder，这个函数用来创建跳转的页面，另一个函数transitionsBuilder，这个函数就是实现过渡动画的地方。transitionsBuilder的child参数是pageBuilder函数返回的一个transitionsBuilder widget部件，pageBuilder方法仅会在第一次构建路由的时候 ...继续阅读 (20)

总结一下之前用 Egg.js 开发的文件上传接口的任务需求要在浏览器端将文件上传到阿里的 OSS 对象存储，需要用到阿里云提供的SDK，但是这样会在前端暴露 OSS 的accessKeyId和accessKeySecret，这是不安全的。所以需要一个文件上传接口把前端传过来的文件上传到对象存储里面，最初只支持阿里云，之后可能会支持其它的云服务商比如七牛云。开发后端框架用的是 Egg.js，因为比较熟悉。然后这只是一个文件上传的服务，一个路由就行。1router.post(`/${app.name}/v1/upload`, controller.oss.upload)然后实现对应的OssController的upload方法，一般的实践是在Controller层进行参数校验，这里用内置的是egg-validate插件进行校验。假如有两个参数folder和bucket代表文件上传的目录和bucket，那么验证代码如下12345678constbody = ctx.request.bodyconstrules = {folder: {type:'string',required:false,default:'/',trim:true},bucket: {type:'string',required:false,default:' ...继续阅读 (10)

走马灯是一种常见的效果，本文讲一下如何用PageView在Flutter里实现一个走马灯效果实现的效果如下，当前页面的高度比其它页面高，切换页面的时候有一个高度变化的动画。实现这样的效果主要用到的是PageView.builder部件。开发创建首页首先创建一个IndexPage部件，这个部件用来放PageView，因为需要使用setState方法更新 UI，所以它是 stateful 的。123456789101112131415161718192021import'package:flutter/material.dart';classIndexPageextendsStatefulWidget{@override_IndexPageState createState() => _IndexPageState();}class_IndexPageStateextendsState{@overrideWidget build(BuildContext context) {returnScaffold(appBar: AppBar(elevation:0.0,backgroundColor: Colors.white,),body: Column(children:[],),);}}然后在部件内申明一个_pageIndex变 ...继续阅读 (16)

前几天遇到两个前端面试题，要写代码的那种，然后我都没做对…记录一下前几天遇到两个前端面试题，要写代码的那种，然后我都没做对…记录一下第一题JavaScript 采用原型继承，即一个对象继承自另外一个对象，另外一个对象再继承自别的对象，依此往复。请写一个通用的 JavaScript 函数，来找出某个对象身上的某个属性继承自哪个对象。解答: 实际上是在考察如何判断一个对象上的属性是本身的还是通过继承来的，使用hasOwnProperty和getPrototypeOf方法即可get-prototype.jsview raw123456789101112131415161718192021functiongetPrototype(obj, key){if(obj.hasOwnProperty(key)) {returnobj}returngetPrototype(Object.getPrototypeOf(obj), key)}constobj = {a:'a'}consto1 =Object.create(obj)o1.b ='b'console.log(o1.a)// aconsole.log(o1.b)// bconsole.log(o1.hasOwnProperty('a'))// falseconsole.log(o1.hasOwnProperty('b'))// truecon ...继续阅读 (21)

用 B 站下载助手 下载下来的视频格式是flv，用 QuickTime 看不了也不能导入 iMovie 进行编辑，所以需要转换一下视频格式前言用 B 站下载助手 下载下来的视频格式是flv，用 QuickTime 看不了也不能导入 iMovie 进行编辑，所以需要转换一下视频格式。在搜索了很多视频格式转换工具后，发现它们大多底层是用FFmpeg这个开源工具进行转换的，所以为什么不直接用FFmpeg它本身呢。关于 FFmpeg官方描述：FFmpeg 是一种非常快速的视频和音频转换器，也可以从实时音频/视频源中获取。 它还可以在任意采样率之间转换，并使用高质量的多相滤波器即时调整视频大小。转换流程12345678910111213141516_______ ______________| | | || input | demuxer | encoded data | decoder| file | ---------> | packets | -----+|_______| |______________| |v_________| || decoded || frames ||_________|________ ...继续阅读 (16)

优秀的代码需要有单元测试进行质量保证，每个测试用例都给应用的稳定性提供了一层保障，本文说一下如何对使用 egg.js 写的接口进行单元测试前言优秀的代码需要有单元测试进行质量保证，每个测试用例都给应用的稳定性提供了一层保障。实践egg.js 工程的测试代码都是放在工程的 test 目录下，命名的方式为${filename}.test.js，比如我想测试项目的usercontroller就在test目录下新建一个controller/user.test.js，同理要测service就是创建一个service目录，然后就是写具体的测试代码了。假设现在需要对一个UserService进行测试，首先在user.test.js中引入egg-mock模块用来创建一个app实例以及一个ctx对象，一般在请求接口的时候会在ctx对象上携带这次请求的参数和是用户信息，需要在创建ctx的时候添加所要的数据，最好的方式是before函数中，将这些数据附加到ctx上。1234567891011const{ app, assert } =require('egg-mock/bootstrap')letctxbefore(()=>{ctx = app.mockContext({user: {name:'your-name'}})} ...继续阅读 (15)

构建 Docker 镜像的的时候有两种环境变量ARG和ENV, 一种是在运行 build 命令时通过--build-arg参数设置的 build-time variables 以及通过在dockerfile里面设置ENV指令配置的环境变量。前言构建 Docker 镜像的的时候有两种环境变量ARG和ENV, 一种是在运行 build 命令时通过--build-arg参数设置的 build-time variables 以及通过在dockerfile里面设置ENV指令配置的环境变量，本文说明它们之间的区别。ARGDockerfile 里面的 ARG 指令定义了一个变量，在运行docker build命令时使用--build-arg=参数将其传递给构建器。1ARG[=]这种变量只存在于镜像构建的时候，一旦镜像构建完成就失效了，不要使用构建时变量来传递诸如 github 密钥，用户凭据等机密数据，构建时变量值可以使用 docker history 命令查看。ENVDockerfile 里面的 ENV 指令将环境变量 设置为值 ，这个变量将在构建阶段中所有后续指令的环境中使用。12ENVENV=...使用 ENV 设置的环境变量将一直存在于构建镜像时以及镜像容器运行时，可以使用 docker inspect 查看设置打的变量。也可以使用docker run --env=来更改它们。结语如果 ...继续阅读 (24)

良好的代码规范有利于提高项目开发效率以及减少阅读代码的困难，本规范结合了(chaoxi)多个流行的代码规范以及前人的开发经验而成，参考规范进行开发提高代码质量前言良好的代码规范有利于提高项目开发效率以及减少阅读代码的困难，本规范结合了(chaoxi)多个流行的代码规范以及前人的开发经验而成，参考规范进行开发提高代码质量HTML 规范设置标准模式的文档类型1234设置页面语言1设置页面字符编码1使用语义化的标签准确地描述网页的内容1234567891011titlepublished:21st Feb, 2015content......确保页面可访问性给img标签添加正确的alt属性使用label标签对表单进行控制使用字符实体替代特殊字符123>©<使用两个空格缩进123按特定顺序书写标签属性classid,namedata-*src,for,type,href,valuetitle,altrole,aria-*123456示例link不对布尔属性赋值12345678示例1CSS 规范全局设置盒子模型123* {box-sizing: border-box;}使用简洁的 class 命名class 的命名应该尽量简洁、明确，以字母开头命名，且全部字母为小写，单词之间使用连字符 “-” 连接。每个模块使用一个模块命名，子元素使用模块名 + 元素作用名名 ...继续阅读 (23)

本文主要说明如何使用浏览器自带的 Intl 对象进行日期时间的格式化前言平时项目中要对日期时间格式化通常会使用如dayjs，date-fns，moment这些第三方库，但是我们可能只需要某几个方法，却安装了一整个库，大大增加了项目的体积，具体可以看这篇文章的数据You-Dont-Need-Momentjs。本文主要说明如何使用浏览器自带的 Intl 对象进行日期时间的格式化MDNIntl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。Collator，NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。本页文档内容包括了这些属性，以及国际化使用的构造器和其他语言的方法等常见的功能。日期时间格式化要对日期时间格式化就要使用Intl.DateTimeFormat对象，它是根据语言来格式化日期和时间的构造函数。语法第一个参数是语言代码，第二个参数是构造函数的选项，都是可选的1newIntl.DateTimeFormat([locales[, options]])简单使用123456789101112131415161718192021constdate =newDate()console.log(newIntl.DateTimeFormat('en-US').forma ...继续阅读 (22)

集合是一种包含不同元素的数据结构，集合中的元素称之为成员。集合有两个重要的特性，一是集合中的成员是无序的，其次集合中不存在相同的成员。前言集合是一种包含不同元素的数据结构，集合中的元素称之为成员。集合有两个重要的特性，一是集合中的成员是无序的，其次集合中不存在相同的成员。关于集合不包含任何成员的集合称为空集，全集则是包含可能一切成员的集合。如果两个集合的成员完全相等，则两个集合相等。如果一个集合的所有成员都属于另一个集合，则认为这个集合是另一个集合的子集。并集-将两个集合的成员合并的操作。交集-将两个集合共有的成员组成一个新的集合。补集-属于一个集合而不属于另一个集合的成员。实现集合123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596classMySet {data =[]getsize() {returnthis.data.length}add(element:any) {if(this.data.indexOf(element) ...继续阅读 (15)

为了存储数据可以将数据存到手机的存储里面或者存到远程服务器上，本文就实现如何使用 dio 将数据存到服务器前言紧接上篇，对于一个代办事项的新增，修改，删除功能都已经完成了，但是数据都是保存在内存中的，重新启动应用数据就重置了，为了存储数据可以将数据存到手机的存储里面或者存到远程服务器上，本文就实现如何使用dio将数据存到服务器源码地址开发准备在pubspec.yaml添加 dio 依赖；一个存储数据的服务，我用的是jsonbox12dependencies:dio:^3.0.1配置 dio由于这个应用只有一个服务地址，所以创建一个 dio 的单例来进行请求就很好了，新建一个 request.dart 文件配置 dio，使用一个函数返回创建的 dio 实例设置基础的请求地址设置请求超时时间设置在调试控制台输出请求响应体方便查看请求基本设置下就可以用了，其它设置可以查看 dio 的文档1234567891011121314151617181920212223import'package:dio/dio.dart';constDB_URL ='https://jsonbox.io/box_7ea9df49e805cf99509b';Dio craeteDio() {BaseOptions options = BaseOptions(baseUrl: DB_URL,connect ...继续阅读 (23)

本文说明如何使用 Provider 来管理这种应用的全局性的数据前言一个应用内通常会有两种数据，部件内部的使用的临时性数据以及很多部件使用的全局性数据，部件内部使用的数据可以通过 StatefulWidget 来管理，但是全局性的数据如果通过从上到下传递的方式会使代码写的十分繁琐，这时就需要一个状态管理工具来进行管理了，本文说明如何使用 Provider 来管理这种应用的全局性的数据什么是 Provider官方的定义是： A mixture between dependency injection (DI) and state management, built with widgets for widgets. 翻译过来大意是一种依赖注入和状态管理的混合方案，使用部件创建，作用于部件 😅官方文档为什么要使用 Provider应用中通常会有一些很多部件都需要的数据，如用户的登录信息，用户设置，地理位置等，如果只是使用 StatefullWeight 的话就需要将状态提升到一个父部件中然后向下进行传递，会很繁琐，使用 provider 的话可以将对一种状态数据的操作放到一个文件内，然后使用到这个数据的部件只需要使用就可以了，当数据有变化时，部件会自动的重新构建，使界面更新。一个例子 🌰使用一个 todo 应用来说明如何在 Flutter 应用中使用 Provider，最终的完成的应用 ...继续阅读 (20)

哈希表是一种常用的数据结构，可以快速的插入和取用，但是查询数据效率低下前言哈希表是一种常用的数据结构，可以快速的插入和取用，但是查询数据效率低下。实现基于数组实现哈希表，数组的长度是预先设定的，有需要是增加。最常见的是将数组的长度设为一个质数123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657classHashTable {table =[]constructor() {this.table =Array.from({length:137})}// 将字符串的 ASCLL 码相加对数组长度求余hash(data:string) {lettotal =0for(letindex =0; index < data.length; index++) {total += data.charCodeAt(index)}returntotal %this.table.length}// 更优的 hash 方法betterHash(data:string) {constH =37lettotal =0for(letindex =0; inde ...继续阅读 (24)

Redis 是一款开源的，基于 BSD 许可的，高级键值缓存和存储系统前言Redis 是一款开源的，基于 BSD 许可的，高级键值缓存和存储系统。Redis 的键包括 string，hash，list，set，sorted set，bitmap 和 hyperloglog。你可以在这些类型上面运行原子操作，例如，追加字符串，增加哈希中的值，加入一个元素到列表，计算集合的交集、并集和差集，或者是从有序集合中获取最高排名的元素。要在 Egg.js 中使用 redis，只需要执行npm i redis命令即可。通过一个例子来验证一下，创建一个可以返回开源仓库在 Github 上的 star 数量的数据接口，来测试使用 Redis 后带来的提升，代码地址:https://github.com/xrr2016/egg-redis-test开发首先使用 Egg.js 创建一个项目12345mkdir egg-redis-test &&cdegg-redis-testnpm; init egg --type=simplenpm i安装 redis1npm i redis启动项目123npm run devopen http://localhost:7001先创建 controller 和 service 目录，用来放处理请求和返回数据的方法，完成后的项目目录为修改 router.js 文件，添加 ...继续阅读 (19)

字典是一种以键值对形式存储数据的数据结构，键用来查找，值用来保存数据前言字典是一种以键值对形式存储数据的数据结构，键用来查找，值用来保存数据实现1234567891011121314151617181920212223242526272829303132333435363738394041classDictionary {data:any[] = []// 添加元素add(key:any, value:any) {this.data[key] = value}// 查找元素find(key:any) {returnthis.data[key]}// 删除元素remove(key:any) {deletethis.data[key]}// 显示元素show() {Object.entries(this.data).forEach(item=>{console.log('key:', item[0],' value:', item[1])})}// 元素个数count() {letn =0Object.keys(this.data).forEach(_ => {n +=1})returnn}// 清空元素clear() {Obj ...继续阅读 (27)

链表是一组节点组成的集合，每个节点都使用一个对象的引用指向它的下一个节点，指向节点的引用叫做链前言链表是一组节点组成的集合，每个节点都使用一个对象的引用指向它的下一个节点，指向节点的引用叫做链。实现使用 LinkedListNode 类来表示节点，使用 LinkedList 来表示链表1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768classLinkedListNode {element:anynext: LinkedListNodeconstructor(element:any) {this.element = elementthis.next =null}}classLinkedList {// 头节点head: LinkedListNodeconstructor() {this.head =newLinkedListNode('head')}// 查找find(element:any) {letcurrentNode: LinkedListNode =this.headwhile(current ...继续阅读 (21)

Egg.js 框架中使用事务前言在查了几遍Sequelize关于Transactions的文档，看了大佬同事的代码后，我终于弄懂怎么在 egg.js 框架里面使用事务了 😓实践Sequelize 关于事务的示例代码是这样滴，首先通过sequelize.transaction方法创建了一个事务后，把这个事务传给需要进行操作的函数，如新增用户，给用户加属性等，但是看上去代码比较难懂123456789101112131415161718192021222324returnsequelize.transaction().then(t=>{returnUser.create({firstName:'Bart',lastName:'Simpson'},{transaction: t }).then(user=>{returnuser.addSibling({firstName:'Lisa',lastName:'Simpson'},{transaction: t })}).then(()=>{returnt.commit()}).catch(err=>{returnt.rollback()})})实际使用的话需要用async/await语 ...继续阅读 (20)

队列是一种列表，只能在队尾插入元素，在队首删除元素。队列用于存储按顺序排列的的数据，先进先出，可以将队列想象成在饭店排队取餐的人群，在队伍前面的先取餐，后来的人后取餐前言队列是一种列表，只能在队尾插入元素，在队首删除元素。队列用于存储按顺序排列的的数据，先进先出，可以将队列想象成在饭店排队取餐的人群，在队伍前面的先取餐，后来的人后取餐。实现用 TypeScript 实现队列123456789101112131415161718192021222324252627282930313233343536classQueue {data:Array= []// 入队enqueue(element:any) {this.data.push(element)}// 出队dequeue() {returnthis.data.shift()}// 返回第一个元素front() {returnthis.data[0]}// 返回最后一个元素back() {returnthis.data[this.data.length -1]}// 显示队列中所有元素toString() {returnthis.data.map(ele=>`${ele}`).toString()}// ...继续阅读 (27)

Flutter 在打包安卓应用时有两种方式flutter build apk和flutter build appbundle，本文说下这两种方式有什么区别前言Flutter 在打包安卓应用时有两种方式flutter build apk和flutter build appbundle，本文说下这两种方式有什么区别。AppbundleAndroid App Bundle 是上传到 Google Play 用以支持 Dynamic Delivery 的文件，扩展名为 .aab，一个 bundle 包含所有应用的已编译代码和资源，但是还没有生成 apk 和 Google Play 的签名。Google Play 的新应用服务模式称为 Dynamic Delivery（动态传送），使用你的应用包为每个用户的设备配置生成并提供优化的 APK，因此用户只下载运行应用所需的代码和资源。开发者不再需要构建，签名和管理多个 APK 来支持不同的设备，用户可以获得更小，更优化的下载。官方文档Apk如果应用不发布到 Google Play，则需要发布多个 apk，但必须自己构建，签名和管理每个 apk。通常构建一个 apk 用以支持所有目标设备，但由于需要支持多个屏幕密度或应用程序二进制接口（ABI）的文件，这可能会导致非常大的 apk，减少 apk 大小的一种方法是创建多个 apk，在执行flutter ...继续阅读 (23)

栈是一种高效的数据结构，因为它只能在栈顶添加或删除，这样的操作很快，它是被称之为后入先出（LIFO，last in first out）的数据结构。可以将栈想象成一叠装菜的盘子，用的时候先拿最上面的，洗好的盘子又会放到最上面前言栈是一种高效的数据结构，因为它只能在栈顶添加或删除，这样的操作很快，它是被称之为后入先出（LIFO，last in first out）的数据结构。可以将栈想象成一叠装菜的盘子，用的时候先拿最上面的，洗好的盘子又会放到最上面。实现用 TypeScript 实现栈12345678910111213141516171819202122232425262728293031323334classStack {top:number=0data:Array= []getlength() {returnthis.top}// 向栈中压入一个新元素push(element:any) {this.data.push(element)this.top +=1}// 返回栈顶元素, 同时将 top 值减 1pop() {this.top -=1returnthis.data.pop()}// 返回栈顶元素peek() {if(!this.data.length) {returnfalse&# ...继续阅读 (24)

列表是一种常用的数据结构，如代办事项，十佳榜单等。当不需要在一个很长的序列中查找元素，或者对其排序时，列表显得尤其有用前言列表是一种常用的数据结构，如代办事项，十佳榜单等。当不需要在一个很长的序列中查找元素，或者对其排序时，列表显得尤其有用实现使用 TypeScript 实现列表类，要实现的的列表类是123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657classList {pos:number// 列表当前位置listSize:number// 列表的元素个数data: []// 列表的数据存储位置constructor() {this.pos =0this.listSize =0this.data = []}getlength() {returnthis.listSize}// 清空列表中的所有元素clear() {}// 返回列表的字符串形式toString() {}// 返回当前位置的元素getElement() {}// 在现有元素后插入新元素insert() {}// 在列表的末尾添加新元 ...继续阅读 (22)

部门需要建一个 npm 私服，我查了一下发现有一个很好用的开源工具 Verdaccio，有 3 中方式可以在自己的服务器上搭建，以 Centos 为例前言部门需要建一个 npm 私服，我查了一下发现有一个很好用的开源工具Verdaccio，有 3 中方式可以在自己的服务器上搭建，以 Centos 为例使用 Node.js 环境首先需要在服务器上安装 node 环境1curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash -1sudo yum install nodejs安装后检查 node 是否正确安装1node -v然后安装 Verdaccio1npm install -g verdaccio安装完成就可以使用了， 如果使用的是 root 用户会提示你不要使用 root 账户1verdaccio但是这样退出后服务就停止了，所以需要 pm2 进行启动全局安装 pm21npm install -g pm2使用 pm2 启动 Verdaccio1pm2 start verdaccio使用 Docker首先需要在服务器上安装 Docker，有了 Docker 之后就很简单了拉取镜像1docker pull verdaccio/verdaccio运行容器1docker run -d --rm --name verdaccio - ...继续阅读 (20)

由于要在服务器上安装 Jenkins 所以首先要安装 java前言由于要在服务器上安装Jenkins所以首先要安装 java。更新安装之前最好更新下1yum -y update安装 Java81yum install java-1.8.0-openjdk查看版本1java -version设置环境变量 JAVA_HOME首先找到安装 java 的位置1update-alternatives --config java编辑 .bash_profile 文件1vim .bash_profile添加这一行1exportJAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.191.b12-1.el7_6.x86_64/jre/bin/java重新执行刚修改的 .bash_profile1source.bash_profile验证一下1echo$JAVA_HOME ...继续阅读 (18)

在 Flutter 里面部件以及应用本身都有自己的生命周期，本文分别说明它们的生命周期前言在 Flutter 里面部件以及应用本身都有自己的生命周期，本文分别说明它们的生命周期部件在 Flutter 里面有两种部件 StatefulWidget 和 StatelessWidget，它们的生命周期分别是StatelessWidget无状态部件的生命周期很简单，首先执行构造函数然后就执行 build 方法了123Constructor Functionbuild()StatefulWidget有状态部件的生命周期会复杂一些，因为是多了状态变化。首先是构造函数，然后会初始化 State 在执行 build 方法，如果执行了 setState 方法，就要检查部件是否更新，在执行 build，最后部件销毁的时候执行 dispose 方法12345678910111213Constructor FunctioninitState()build()setState()didUpdateWidget()build()dispose()应用Flutter 应用本身也有自己的生命周期，要观察到这些状态的变化需要让一个有状态部件混入WidgetsBindingObserver，然后在initState方法中创建一个观察者，当然部件销毁的时候需要把创建的观察者实现清除inactive 应用处于非活动状态， ...继续阅读 (23)

要将自己的网站支持 PWA，需要注册一个 serviceWorker 到浏览器中，通常使用 Google 的 Workbox 工具，Workbox 可以在浏览器请求资源的时候提供了几种不同的策略对请求响应，本文对几种策略进行说明要将自己的网站支持 PWA，需要注册一个 serviceWorker 到浏览器中，通常使用 Google 的Workbox工具，Workbox 可以在浏览器请求资源的时候提供了几种不同的策略对请求响应，本文对几种策略进行说明。StaleWhileRevalidateStaleWhileRevalidate 模式允许您使用缓存的响应尽快响应请求，如果未缓存，则返回到网络请求，然后，用网络请求更新缓存。123456workbox.routing.registerRoute(/\.(?:js|css)$/,newworkbox.strategies.StaleWhileRevalidate({cacheName:'static'}))CacheFirst如果缓存中存在响应，则将使用缓存的响应来完成请求，并且根本不会使用网络。 如果没有缓存的响应，则将通过网络请求来满足请求，并且将缓存响应，以便直接从缓存提供下一个请求。123456workbox.routing.registerRoute(/\.(?:js|css)$/,newworkbox.s ...继续阅读 (11)

原本使用的是 Netlify 去部署博客的，域名解析也是通过 Netlify 的 DNS 服务器，但是发现博客在别人的电脑上打不开…原本使用的是 Netlify 去部署博客的，域名解析也是通过 Netlify 的 DNS 服务器，但是发现博客在别人的电脑上打不开…发现是域名解析的问题，所以就把博客放到 Github Pages 上了，但是这样就失去了 Netlify 提供的自动构建和部署的能力，需要自己去配置 Travis CI 实现自动部署了。预先要求本地安装了Hugo一个Github账号使用 Github 账号登录Travis创建博客使用 Hugo 命令行工具新建自己的博客，将代码推送到自己的 Github 仓库123hugo new site my-blog...git push新建一个 Github Personal access token在https://github.com/settings/tokens新建一个 Personal access token 用来发布博客到 Github Pages 时进行验证，复制生成的 token，不要刷新或离开当前页面，否则 token 就看不见了，只能重新生成登录到Travis CI对项目进行关联https://travis-ci.org/account/repositories完成后进入设置界面https://travis-c ...继续阅读 (17)

网站要支持 PWA，需要一个manifest.json文件，W3C Web App Manifest 的草案上定义了以下的字段，解释一下每个字段是什么意思。网站要支持 PWA，需要一个manifest.json文件，W3C Web App Manifest 的草案上定义了以下的字段，解释一下每个字段是什么意思。12345678910111213141516171819202122232425262728293031323334353637383940414243dictionary WebAppManifest {TextDirectionType dir ="auto";DOMString lang;USVString name;USVString short_name;USVString description;sequenceicons;sequencescreenshots;sequencecategories;DOMString iarc_rating_id;USVString start_url;DisplayModeType display ="browser";OrientationLockType orientation;USVString theme_color;USVString background_color;USVString scope;Se ...继续阅读 (24)

让用 Hugo 搭建的博客支持 PWA 很简单，只需 2 个步骤即可让用 Hugo 搭建的博客支持 PWA 很简单，只需 2 个步骤即可：添加一个 manifest.json 文件使用https://app-manifest.firebaseapp.com来生成博客的 manifest.json 文件，然后将生成出来的文件和图片放到博客的 static 目录，然后在 layout/index.html 的 标签内引用这个文件12345......这样你的博客就可以安装到桌面了使用 Workbox 工具注册 ServiceWorker在 static 新建一个sw.js文件，在文件添加以下内容用来为网络请求添加缓存；主要是缓存静态资源 js，css，图片以及字体等文件，详细文档可以查看Workbox 文档1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950importScripts('https://cdn.jsdelivr.net/npm/workbox-cdn/workbox/workbox-sw.js')if(workbox) {console.log(`Yay! Workbox is loaded 🎉`)workbox.routing. ...继续阅读 (23)