chenXming的个人技术网站

一. 概述React与Vue是我们熟悉的两大前端主流框架，来自官方的解释,Vue是一套用于构建用户界面的渐进式框架,React是一个用于构建用户界面的JavaScript库,两个框架都使用各自的语法，专注于用户UI界面的构建.那我们会有疑问，这两个框架都专注于UI界面的构建，但是随着JavaScript单页应用开发日趋复杂，我们如何进行更多数据的管理呢？比如网络请求的数据、缓存数据、本地生成尚未持久化到服务器的数据，UI状态数据，激活的路由，被选中的标签等等. 基于上面的疑问，两个框架都有各自的解决方案：React-Redux与Vuex. 二.使用1.Redux使用react-redux之前我们先来了解一下Redux。Redux是 JavaScript 状态容器，提供可预测化的状态管理，Redux由Flux演变而来,当然除了和React一起用外，还支持其它界面库，不过我们这里主要介绍它配合React进行使用.先来了解下它的几个核心概念： (1) 核心概念 State: 所谓的state就是React组件所依赖的状态对象。你可以在里面定义任何组件所依赖的状态。比如一个简单的todo...

一. 概述 进行iOS项目开发时，常用的布局方式有两种：Frame布局和AutoLayout，Frame布局没啥可说的，直接设置控件的横纵坐标，并指定宽高。AutoLayout是通过设置控件相对位置的约束进行布局。AutoLayout的本意是好的，但是由于他的语法实在不怎么友好，导致我们在实际项目开发中用的并不多，只能靠Masonry这样的第三方库来使用它。Masonry布局虽然容易理解，但是它的代码量太大，每一个控件都要对其进行block设置。 在前端开发中，Flex布局使用尤为普遍，那么iOS端有没有类似前端Flex布局的方案呢？答案是肯定的，除了在 Weex 以及 React Native 两个著名的跨平台项目里有用到 Flex布局外，AsyncDisplayKit 也同样引入了 Flex布局，它们都是基于 Facebook 的 Yoga 的二次开发。而今天我们要介绍的 FlexLib 同样如此。 二. Flex布局与相关属性介绍先来了解一下Flex布局：Flex布局又叫弹性布局,是一种为一维布局而设计的布局方法。一维的意思是你希望内容是按行或者列来布局。你可以使用...

一. 概述做客户端开发免不了要与WebView打交道，特别是对于Hybrid App，在H5所占比重越来越大的背景下，一套好的WebView 与原生交互的API显得尤为重要，当然目前两端都有比较成熟的三方库进行支持。比如Android端的JsBridge,iOS端的WebViewJavascriptBridge,但是对于其内部原理笔者一直一知半解，导致有时面对问题无从下手，最后决心分析WebViewJavascriptBridge的内部实现原理，一是提升自己的源码阅读水平，其次也希望对以后的工作有所帮助。 二. 基本原理下载WebViewJavascriptBridge的源码后可以看到其文件并不多，分别对几个文件做简单的介绍，后面详细分析其源码 WebViewJavascriptBridge_JS: JS桥接文件，通过它实现JS环境的初始化，里面就一个C函数，返回的是JS方法。原生调用的JS方法与对应的方法回调都需要先在这里面进行注册。 WKWebViewJavascriptBridge 与 WebViewJavascriptBridge: WKWebView与UIWebVie...

从客户端到前端研发经验总结一. 概述笔者是客户端研发出身，如果只有一门技术傍身，不足以胜任市场对客户端研发要求，于是想学习大前端技术栈。但苦于日常工作繁琐，一直没有机会学习（其实就是自身懒惰）。直到工作需要，需要写一个微信小程序，这才下决心学习前端技术。其实如果想入门前端，从微信小程序入手不失为一个好的方法。初次接触微信小程序的数据双向绑定机制，让写习惯了客户端的我叹为观止。目前我入门前端的技术路径是：客户端—微信小程序—360小程序—混合App—H5。一些我自己的经验总结出来，希望对你有所帮助。当然阅读这篇文章的前提是，你已经了解了基本的Html、CSS、JS语法。 二. 环境与工具1. 前端环境搭建 笔者使用的Mac电脑，所有的环境搭建工作都是基于Mac电脑来操作的。首先安装node.js与npm: node.jsnode 是一个基于 V8 引擎的 Javascript 运行环境，它使得 Javascript 可以运行在服务端，直接与操作系统进行交互，与文件控制、网络交互、进程控制等。简单的说node.js就是运行在服务端的 JavaScript。你可能会有疑问，我写前端页...

一、概述笔者做了多年的业务开发，以前对逆向知之甚少，好像我们做iOS的开发者对应用本身的安全问题总不是那么上心，总以为Apple自身的加密签名机制足够安全了，我们除了关心业务网络安全，对自身App包的安全重视度总是不够。然而一旦我们的包被有心人破解，那么无论是对自身业务还是用户数据都是致命的。真正开始研究逆向，才发现我们App是如此的不堪一击。所以研究逆向其实是研究Hacker是如何攻破我们的应用，从而更好地保护自身应用安全。 研究逆向，首当其冲的就是重签名，重签名就是用自己的证书签名别人的应用，从而进行分发。重签名说白了就是套壳别人的应用，挺火的微信双开，其实就是对微信进行了重签名。而重签名首先要做的就是对应用砸壳。 二、手机越狱与应用砸壳我们从App store 下载的应用是经过苹果加密签名过的，是无法进行重签名的。所以重签名首先要做的就是对应用进行砸壳，而砸壳需要你有一台越狱手机。 1. 手机越狱目前主流的越狱平台有PP助手、爱思助手做到比较好，提供一键越狱功能。我自己使用的爱思助手，下载爱思助手电脑版，选择【工具箱】-【一键越狱】，此时会匹配你当前手机版本的越狱工具，选择...

移动端H5开发布局方式总结一、基础知识1.视口// width=device-width ： 视图宽度为 当前设备宽度 // user-scalable=no : 不允许用户缩放 // maximun-scale=1,minimum-scale=1 最大最小缩放 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximun-scale=1,minimum-scale=1"> script 中去获取 console.log(window.innerWidth):获取视图宽度 console.log(docunment.documentElement.clientWidth):获取视图宽度 console.log(window.devicePixelRatio):获取物理像素比 逻辑像素的比例：一个逻辑像素等于多少物理像素 3.响应式布局对 不同的屏幕尺寸做出响应，并进行相应布局的一种移动web开发方式，一个...

概述：UIView是我们在做iOS开发时每天都会接触到的类，几乎所有跟页面显示相关的控件也都继承自它。但是关于UIView的布局、显示、以及绘制原理等方面笔者一直一知半解，只有真正了解了它的原理才能更好的服务我们的开发。并且在市场对iOS开发者要求越来越高的大环境下，对App页面流畅度的优化也是对高级及以上开发者必问的面试题，这就需要我们要对UIView有更深的认知。 一.UIView 与 CALayerUIView：一个视图（UIView）就是在屏幕上显示的一个矩形块（比如图片，文字或者视频），它能够拦截类似于鼠标点击或者触摸手势等用户输入。视图在层级关系中可以互相嵌套，一个视图可以管理它的所有子视图的位置,在iOS当中，所有的视图都从一个叫做UIView的基类派生而来，UIView可以处理触摸事件，可以支持基于Core Graphics绘图，可以做仿射变换（例如旋转或者缩放），或者简单的类似于滑动或者渐变的动画。 CALayer:CALayer类在概念上和UIView类似，同样也是一些被层级关系树管理的矩形块，同样也可以包含一些内容（像图片，文本或者背景色），管理子图层的位...

一. 概述笔者是客户端研发出身，如果只有一门技术傍身，不足以胜任市场对客户端研发的要求，于是想学习大前端技术栈。但苦于日常工作繁琐，一直没有机会学习（其实就是自身懒惰）。直到工作需要，需要写一个微信小程序，这才下决心学习前端技术。其实如果想入门前端，从微信小程序入手不失为一个好的方法。初次接触微信小程序，它的数据双向绑定机制，让写习惯了客户端的我叹为观止。目前我入门前端的技术路径是：客户端—微信小程序—混合App—H5。一些我自己的经验总结出来，希望对你有所帮助。当然阅读这篇文章的前提是，你已经了解了基本的Html、CSS、JS语法。 二. 环境与工具1. 前端环境搭建 笔者使用的Mac电脑，所有的环境搭建工作都是基于Mac电脑来操作的。首先安装node.js与npm: node.jsnode 是一个基于 V8 引擎的 Javascript 运行环境，它使得 Javascript 可以运行在服务端，直接与操作系统进行交互，与文件控制、网络交互、进程控制等。简单的说node.js就是运行在服务端的 JavaScript。你可能会有疑问，我写前端页面为甚么需要一个运行在服务端的的J...

三端把后台数据进行处理并且优雅的展示给用户混合 Naitive 跟 web 技术进行开发移动应用 一.目前主流的混合开发方案 faceBook :React、ReactNative 阿里： Week google：flutter 小程序开发 移动应用混合开发框架 PWA（Porgress Web App）本课程：使用Vue框架 配合 android + iOS 的跨语言通信原理项目效果：http://imooc.hybrid.lgdsunday.club/需要掌握内容：Scss Vue全家桶 vue-cli3 脚手架、Vue动画 webpack打包、组件化思想、混合开发原理 跨语言通信机制前端项目的部署 二.混合开发原理 混合开发又叫 Hybrid App,混合了Native 和 web技术进行开发的应用方案： 基于 WebView UI (JSBridge)的方案 主流方案：淘宝、微信、饿了么等，使用JSBridge进行与原生的通信,使用webView 进行页面渲染，本课程使用 基于 Native UI （ReactNative、weex）:赋予web原生能力基础上...

一.概述无论是前端还是客户端开发都离不开页面的展示，而页面是由布局和各种组件构成的。布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。比如Android开发者常用的布局方式有:线性布局(LinearLayout)、相对布局(RelativeLayout)、绝对布局(AbsoluteLayout)、网格布局(GridLayout)等，IOS开发者常用的布局方式：手写Frame、自动布局(AutoLayout)、xib、storyboard等方式，我们这里主要介绍前端的布局方式。虽然目前大多数网站的构建都是通过成熟的框架搭建的，但是作为前端开发的基础，学习了解一下布局还是很有必要的。 页面布局(Layout):就是对页面的文字、图形或表格进行排布、设计. — 知乎 研究布局的目的是让我们的页面尽可能的还原UI设计给我们的设计图，适配各种尺...