Nealyang
## 前言 鉴于首页功能都已经完成了 80% 了，所以我们在这就先把detail页面写完了吧，这里detail页面我们主要采用webView的形式加载。 ## flutter_webview_plugin 同样的，我们在 flutter package 中搜索一个webView的package,这里，当然我们要选择“star”数最多的啦  使用起来非常的简单，直接可以看 flutter_webView_plugin 的文档即可。 通过文档我们可以看到此webView具有的一些功能 ``` Future launch(String url, {Map headers: null, bool withJavascript: true, bool clearCache: false, bool...
网络请求
## 前言 无论对于一个什么app或者项目、应用来说，网络请求都是必不可少的，从前端的角度而言，有很多的网络请求库，比如 axios，fetch等，当然，也有ajax等等。对于flutter、dart而言，也是同样，下面，就让我们来看下在flutter中，我们如何进行网络请求。 ## Dart中的网络请求 ### http.dart 包 从dart原生的角度而言，它是提供了请求包的，```package:http/http.dart``` 当然，也是非常的好用，我们完全可以将它封装下get和post然后使用 ``` import 'dart:async'; import 'package:http/http.dart' as http; class NetUtils { // 参数拼接到url后面 static Future get(String url, {Map params}) async...
> 个人文章集：[Nealyang/PersonalBlog](https://github.com/Nealyang/PersonalBlog) > > 主笔公众号：全栈前端精选 ## 背景 性能优化，减少页面加载等待时间一直是前端领域永恒的话题。如今大部分业务合作模式都是前后端分离方案，便利性的同时也带来了非常多的弊端，比如 FCP 时间显著增加（多了更多的 HTTP 请求往返的时间消耗），这也就造成了我们所说的白屏时间较长，用户体验较差的情况。 当然，对此我们可以有很多种优化手段，即便是此文介绍的骨架屏也只是用户体验的优化而已，对性能优化的数据没有任何提升，但是其必要性，依然是不言而喻的。 本文主要介绍应用在拍卖源码工作台BeeMa 架构中的骨架屏自动生成方案。有一定的定制型，但是基本原理是相通的。 ## 骨架屏 Skeleton  骨架屏其实就是在页面加载内容之前，先给用户展示出页面的大致结构，再等拿到接口数据后在将内容替换，较传统的菊花 `loading` 效果会给用户一种“已经渲染一部分出来了”的错觉，在效果上可以一定程度的提升用户体验。本质上就是视觉过渡的一个效果，以此来降低用户在等待时候的焦灼情绪。 ## 方案调研 骨架屏技术方案上从实现上来说大致可以三类： - 手动维护骨架屏的代码（`HTML`、`css or vue` 、`React`）...
## 前言 的确，有些标题党了。起因是微信群里，有哥们问我，你是怎么学习前端的呢？能不能共享一下学习方法。一句话也挺触动我的，我真的不算是什么大佬，对于学习前端知识，我也不能说是掌握了什么捷径。当然，我个人的学习方法这篇文章已经在写了，预计这周末会在我个人公众号发布。而在此之前，我想展(gong)示(xiang)一下，我平时浏览各个技术网站，所记录下来的文章。如果你能做到每日消化一篇，或许，你只要一年，就能拿下各个大厂 offer！ 不由感慨，好文太多！吾等岂能浪费，还整日怨天尤人。  ## 个人好文收藏 > 收藏截止时间：2019-07-24 11:50:49 ## typescript - [ ] [TypeScript，初次见面，请多指教](https://zhuanlan.zhihu.com/p/57958328) - [x] [可能是你需要的react + typescript 50条规范和经验](https://juejin.im/post/5ce24f8ae51d45106477bd45) - 一些使用规范 ## CSS - [ ]...
## 前言 关于Flutter入门的文章非常多，常用Widget总结文章也非常多，之前写过相关入门文章，欢迎大家查看：[flutter从入门到能寄几玩儿](https://github.com/Nealyang/PersonalBlog/issues/11),这里我们还是以上面文章为主，先把项目跑起来，然后走马观花常用布局、常用Widget。 ## 相关文章推荐 [Flutter 中文网](https://flutterchina.club/) [Flutter 环境搭建](https://flutter.io/get-started/install/) [Flutter widget](https://docs.flutter.io/index.html) ## Flutter走马观花 > 关于Flutter环境问题可以查阅上方链接，步骤都非常详细。 此后~大量代码来袭 ### 基础Widget之material版Hello world 国际惯例，hello world ``` import 'package:flutter/material.dart'; class MyAppBar extends StatelessWidget{ MyAppBar({this.title});// final...
> 原文地址：[Nealyang/PersonalBlog](https://github.com/Nealyang/PersonalBlog) ## 前言 > 无论`lowcode`再怎么🐂x，都避免不了对于复杂页面或者说特定页面的源码开发 之前也有写过相关文章总计:[一张页面引起的前端架构思考](https://mp.weixin.qq.com/s/EuHtI_5NmVZLmQVSg9fi5w),但是更多的是介绍How，并没有介绍到 Way，经过了一年的使用（rax 1.x 体系也在完善），必然也会伴随着一部分的调整。此篇作为阶段性总结以及对 [BeeMa 架构开发辅助插件](https://marketplace.visualstudio.com/items?itemName=nealyang.devworks-beema&ssr=false#review-details)的铺垫。 > 以下介绍，主要是针对使用[Rax](https://github.com/alibaba/rax) 、TypeScript 的 `H5 MPA` 开发总结。 ## 丐版  通常编码`MPA` 应用，都是在 `pages` 下新增相应`page`，然后在里面堆`components`。对于ajax 接口联调一般都是在 `componentDidMount` 或者 `useEffect`...
> 原文地址：[robinwieruch](https://www.robinwieruch.de/react-hooks-fetch-data/) 全文使用意译，不是重要的我就没有翻译了 在本教程中，我想向你展示如何使用 state 和 effect 钩子在React中获取数据。 你还将实现自定义的 hooks 来获取数据，可以在应用程序的任何位置重用，也可以作为独立节点包在npm上发布。 如果你对 React 的新功能一无所知，可以查看 [React hooks](https://www.robinwieruch.de/react-hooks/) 的相关 api 介绍。如果你想查看完整的如何使用 React Hooks 获取数据的项目代码，可以查看 [github 的仓库](https://github.com/the-road-to-learn-react/react-hooks-introduction) 如果你只是想用 React Hooks 进行数据的获取，直接 ```npm i...
## 前言 GithubBlog：[https://github.com/Nealyang/PersonalBlog/issues/99](https://github.com/Nealyang/PersonalBlog/issues/99) 背景如是： - [pmlci 源码脚手架：https://mp.weixin.qq.com/s/JRF4GjYqXw1f6jGqcYofnQ](https://mp.weixin.qq.com/s/JRF4GjYqXw1f6jGqcYofnQ) 随着脚手架的提供，以及新增页面和模块的功能封装。 毕竟 **多提供一层规范，就多了一层约束。** 而架构的本质是为了让开发者能够将精力更加的focus 到业务的开发中，无需关心其他。比如上述脚手架初始化出来的一些模块配置、异步加载甚至一些已定义并且保留在初始化架构中的一些业务 `hooks` 等。 如上原因，我希望能够提供一套可视化的操作（创建项目、选择依赖、添加页面，选择所需物料、配置物料属性等），一言以蔽之就是让用户对于源码开发而言，只需要编写对应的业务模块组件，而不需管理架构是如何组织模块和状态分发的，**除了业务模块编码，其他都是可视化操作**。 因为团队里 100%的同学都是以 `vscode` 作为饭碗，所以自然而然的 `vscode extinction` 就是我的第一选择了。计划中会提供创建项目、新增页面、模块配置、页面配置、新增模块等一系列插件。后续阶段性进展，再发文总结。咳咳，是的，这将是一个**源码工作台**的赶脚~ 截止目前，已经将项目的脚手架基本搭建了个 90% ，此处作为第一阶段性总结。 ## 成果展示   `extensions`...
## 前言 对于前端工程构建，很多公司、BU 都有自己的一套构建体系,比如我们正在使用的 def，或者 vue-cli 或者 create-react-app，由于笔者最近一直想搭建一个个人网站，秉持着呼吸不停，折腾不止的原则，编码的过程中，还是不想太过于枯燥。在 coding 之前，搭建自己的项目架构的时候，突然想，为什么之前搭建过很多的项目架构不能直接拿来用，却还是要从 0 到 1 的去写 webpack 去下载相关配置呢？遂！学习下 create-react-app 源码，然后自己搞一套吧~ ## create-react-app 源码 代码的入口在 ```packages/create-react-app/index.js```下，核心代码在```createReactApp.js```中，虽然有大概 900+行代码，但是删除注释和一些友好提示啥的大概核心代码也就六百多行吧，我们直接来看 ### index.js  index.js 的代码非常的简单，其实就是对 node...
## 前言 脚手架其实是大多数前端都不陌生的东西，基于前面写过的两篇文章： - [前端源码架构在拍卖详情页上的探索](https://mp.weixin.qq.com/s/yNLaCVBhBmKTbB9_2m0pcA) - [一张页面引起的项目架构思考（rax+Typescript+hooks）](https://mp.weixin.qq.com/s/EuHtI_5NmVZLmQVSg9fi5w) 大概呢，就是介绍下，目前我的几个项目页面的代码组织形式。 用了几个项目后，发现也挺顺手，遂想着要不搞个 `cli` 工具，统一下源码的目录结构吧。 这样不仅可以减少一个机械的工作同时也能够统一源码架构。同学间维护项目的陌生感也会有所降低。的确是有一部分提效的不是。虽然我们大多数页面都走的大黄蜂搭建🥺。。。  > `cli` 工具其实就一些基本的命令运行、`CV` 大法，没有什么技术深度。 ## bin ### 效果  ### 工程目录  ### 代码实现 - bin/index.js ```js...