原创
文章平均质量分 79
陈小聪-小虎Oni
无才可去补苍天,枉入红尘若许年。
知识才是一个程序员最虔诚的信仰。
展开
-
如何做性能优化
概况在前端开发中,最常面对的一个问题就是性能优化,所以这里整理了一部分的方法和工具,保证你的网站快速加载,以避免用户下载。当你构建现代Web网站时,包括pc端和移动H5,如果你要快速并保持快速,那么衡量,优化和监控是非常重要的。性能在任何在线网页能否成功中起着重要作用,因为高性能网站比表现不佳的网站更好地吸引和留住用户。网站应专注于优化用户体验。像Lighthouse这样的工具会突出显示这些...原创 2018-11-13 09:32:59 · 424 阅读 · 0 评论 -
Angular最新教程-第六节编写响应式导航栏
这节课我们讲解如何使用bootstrap 4 编写响应式布局。 参考图我们还是参照Angular中文社区http://www.angularjs.cn/ 图中标注红色的部分,我自己不是很喜欢,所以做了一点小改动。 他这里也没有做响应式布局,所以样式就不抄他的,我们自己重写。 首先我们先简要的分析一下这个navbar。 整体是一个黑色的navbar。 参考代码:<nav class="原创 2017-09-26 14:19:18 · 4792 阅读 · 1 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第二节小程序下拉刷新,上拉加载
今天就直入主题吧!调试技巧这里讲一个调试的技巧,因为这个页面是我们点击了首页的更多才进入的,并且他需要携带参数。 所以我们在左侧工具里面 注意点击的是图中红色框框标记的位置,这是一个自定义按钮。 写上路劲和参数就可以了,这样每次启动就是直接携带参数的进入这个页面了。这样也不用反复去修改json文件。上拉加载首先我们先编写一下moviemore的页面。 在头部引入搜索按钮,记得在wxs原创 2017-08-30 13:44:16 · 958 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第七节个人中心
今天我们接着编写个人中心页面。 首先我们编辑上半部分的内容。 部分内容在之前的课程中已经有涉及了, 所以这里有写部分直接上代码咯。 编写页面的基本元素user.wxml <view class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></原创 2017-08-24 14:57:19 · 578 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第一节页面跳转及参数传递,跳转到更多页面
继上次教程结束之后,我们的小程序已经完成到如下程度了。 如果你是一个零基础的开发,只要跟着这个教程一步一步完成的,你就能完成这样的界面优美是不是很容易啊。 但是,完成前两章,我们只涉及到页面的编写,很少涉及到页面的功能,那么这一章,我们的主要任务就是编写一些简单的页面逻辑。 我们要实现的是点击上图中的更多,跳转到查看更多页面。 首先我们还是先创建查看更多页面,在json文件中,直接添原创 2017-08-28 15:20:32 · 798 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第五节获取用户权限、下载文件、保存到相册、用户拒绝授权重新授权
继上一节课,我们已经简要说明了将图片保存到相册的流程和方法。 这节课我们围绕这个问题,展开讲解获取用户权限,将网络图片下载到临时文件,最后保存到相册。获取用户权限 wx.authorize 使用方法如下:// 可以通过 wx.getSetting 先查询一下用户是否授权了wx.getSetting({ success(res) { if (!res.aut原创 2017-09-06 10:13:30 · 5907 阅读 · 7 评论 -
Angular最新教程-第三节在谷歌浏览器中调试Angular
这节课,我们将要了解的是如何使用VS Code安装Chrome扩展对Angular进行调试。步骤一:确保环境确保将谷歌浏览器安装在其默认位置。 确保在VS Code中安装了插件:Debugger for Chrome 使用npm在全局范围内安装了angular/cli (我们第一节课中就讲过这个了,你也可以在确认一下。Windows用户快捷键win+r ,输入 ng -v) 使用angular原创 2017-09-13 11:56:52 · 10925 阅读 · 3 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第四节点击查看大图,保存壁纸
由于获取详情那些接口的豆瓣API,都有权限限制。 所以,电影详情页面和电影搜索页面我们就不做了。 接下来我们来看一些还蛮实用和有趣的小功能。点击查看大图wx.previewImage我们在moviecard模板中加入点击事件。 如图所示,详细的在前面的章节中已经讲解过了。 然后在index.js中加入点击查看大图的函数 保存预览,点击首页的电影的图片。 我们可以原创 2017-09-05 09:41:26 · 995 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第三节正在加载,loading状态
继前一篇文章,我们已经实现了小程序中的上拉加载和下拉刷新, 如果用户网络较差的情况下,或者服务端返回处理的情况下, 那么我们的页面在这段时间内没有等待提示。 或者服务端返回数据之后,我们的页面又好像突然之间出现的, 这整个过程中的用户体验并不是很好,不理解什么是用户体验的, 那可以换一种方式,就是说整个过程让使用者觉得并不是很舒服。 所以通常在请求发起到请求响应的这个过程中,我们会加入l原创 2017-09-04 10:25:29 · 3581 阅读 · 1 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第六节tabBar详细说明
首先我们新建一个界面,还记得新建界面的快捷方式吗? 在app.json的pages里面,新增”pages/user/user” 即 "pages":[ "pages/index/index", "pages/logs/logs", "pages/user/user" ], ctrl+s保存。小程序在检测到没有user目录的时候,就会自动创建相关的文件。原创 2017-08-21 10:58:42 · 462 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo
在网上好多人,喜欢找别人写好的一些线上的项目源码,比较完整的。想着学习的更加实用和全面一点。这无可厚非,但是,我发现有好多人并不是很在意官方提供的demo。比如ionic的tabs demo就没有什么人看。我个人觉得既然官方把这样的demo推到了入门的地位,那必然是有它的道理的。所以我很喜欢从官方的demo开始学习,因为它足够简单,足够让我明白它的用法和逻辑。上一节课,我们已经原创 2017-07-28 16:10:48 · 898 阅读 · 2 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第三节小程序豆瓣评分主页
今天我们来编写整个豆瓣评分的首页界面框架。我们今天主要讲解界面的编写,目的是再一次加强对模板的理解。原创 2017-08-04 09:41:38 · 972 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第二节小程序电影卡片模板
上一节课,有朋友反映我最后写的操作步骤太琐碎了。其实我只是想表达一下我自己的思想过程,从分析方法到关注点。我觉得这对于新手还是有点作用的。如果你不知道怎么入手解决一个问题,不放跟着我的节奏,进去试试。言归正传,我们接下来编写,电影卡片的模板。还是一样的先分析界面,这个界面是上下结构的,最上方一张图片,中间一行文字,下面一个stars模板(我们上一节课编写的内容)我们原创 2017-08-03 11:06:20 · 1184 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第一节小程序的模板-评分星星模板
本章我们将以一个实战项目为主要内容,穿插讲解小程序的各种概念。因为没有UI和后端,所以,我们这里使用豆瓣电影的API和小程序豆瓣评分作为学习材料。最终我们将会完成一个类似下图的小程序。(大家可以搜索小程序,豆瓣评分,线上已经有了。)首先我们来分析一下这个小程序,主要分为电影和个人中心(个人中心我们放后面讨论)。电影主要分为近期上映、热门电影、电视剧、综艺四个模块。(后续看公原创 2017-08-02 15:46:30 · 1427 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第五节小程序中的Promise
上一节课最后,我们遇到了一个警告。说我们太过频繁的调用serData了,因为我们这个页面的三部分数据是通过三个接口获取的。所以我们分别在三个接口返回的时候调用了数据绑定。但是过于频繁的调用setData很容易引起性能问题。要理解为什么会引发性能问题,我们要先看一下setData的工作原理。https://mp.weixin.qq.com/debug/wxadoc/dev原创 2017-08-09 11:37:34 · 871 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第四节小程序http请求与请求本地json文件
上一节课,我们已经基本完成了,首页的界面编写。逻辑暂时不理会。但是我们用于展示页面绑定的是我们本地的假数据。接下来我们就来获取真正的数据来展示页面。绑定假数据编写页面算是前段最早做的一件事情吧。特别是在前后端同步开发,联合测试的时候。服务端会先输出接口文档,然后前后端根据接口文档同步开发,最后联合测试。这就需要前段本地编写大量的假数据。如果我们每个页面的假数据的单独原创 2017-08-07 16:34:23 · 12480 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第一章第五节从px到rpx
这一小节作为第一章的最后一节,其实关于单位的文章,在博客上倒是挺多的。我一直在想,我是不是有必要再写这一节,还是给大家提供一些阅读链接。因为关于单位的定义都是比较官方的。没什么好讨论的,我这里做一个汇总和简单的说明吧。首先本文只以移动设备为例说明。本文摘要:设计师以iphone6为标准出设计稿的话,1rpx=0.5px=1物理像素。Photoshop里面量出来的尺寸为物理像素点。所原创 2017-07-31 10:42:34 · 1680 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第一章第四节从block盒式布局到Flex弹性布局
说明:为了便于理解和分析,此处我们全部使用块级元素div来进行说明。因为要将这个文档应用于博客,所以所有的样式写在style中。标题一二三不代表这些概念同级,仅仅代表本文提到的顺序。关于盒式布局的定义和说明,请自行搜索了解,此处不做详细说明。我这里引入几个概念,是我自己理解所得,不权威,但有利于学习和理解。一、块block我把页面中宽度占满屏幕,高度任意的元素(或者区域)成为块。不管是原创 2017-07-29 14:48:32 · 2019 阅读 · 0 评论 -
Angular最新教程-第七节HTTP get post 设置头部 跨域访问
和angular1一样angular4要是有http库,用来调用外包的API。 为了不使发起的请求,导致当前进入等待而没有响应,HTTP请求都是异步的。 这个之前我们聊过类似的,JavaScript中的异步处理方法。 1、callback回调的方式。 2、promise,这个可以参考我很早之前的一篇博客。http://blog.csdn.net/onil_chen/article/detai原创 2017-09-27 11:01:06 · 11702 阅读 · 0 评论 -
Angular最新教程-第一节环境搭建和新建项目
步骤一:安装开发环境在开始学习angular之前,我们要先设置好开发环境。 一般现在的的开发环境基本上都是nodejs, 因为基本上都有使用了nodejs的npm管理和安装依赖包。 如果你的电脑上已经安装过nodejs,那你可以现在命里行中输入node -v 和 npm -v查看他们的版本。 angular 要求node 6.9.x 和 npm 3.x.x 以上的版本。 如果你电脑上的原创 2017-09-11 16:33:37 · 2203 阅读 · 2 评论 -
ReactNative 最新教程
2018年8月 ReactNative 最新教程第一次尝试录制视频教程,希望大家会喜欢。还是希望大家多多支持,给我多提提意见。感谢感谢视频地址 https://i.youku.com/i/UNDQwODE3NTU3Ng==/playlists?spm=a2hzp.8244740.0.0...原创 2018-08-29 09:50:11 · 1620 阅读 · 0 评论 -
源码共读-UMI-4 test help
接上一个博客源码共读-UMI-3,接下来,我们来继续执行 umi test 从第一个博客中我们知道,执行umi test会执行lib/scripts/test.jslib/scripts/test.jsimport test from '../test';const args = process.argv.slice(2);const watch = args.indexOf(...原创 2018-05-21 17:27:19 · 1053 阅读 · 0 评论 -
源码共读-UMI-3
接上一个博客源码共读-UMI-2,接下来,我们来继续执行 umi generate 从第一个博客中我们知道,执行umi generate 会执行lib/scripts/ generate.jslib/scripts/generate.jsimport yParser from 'yargs-parser';import generate from '../generate';...原创 2018-05-07 18:35:10 · 1254 阅读 · 1 评论 -
源码共读-UMI-1
#!/usr/bin/env node声明文件执行环境 nodeconst spawn = require('cross-spawn');const chalk = require('chalk');chalk是一个颜色的插件const script = process.argv[2];const args = process.argv.slice(3);pr...原创 2018-04-28 18:38:48 · 1820 阅读 · 0 评论 -
源码共读-UMI-2
接上一个博客源码共读-UMI-1,接下来,我们来继续执行 umi build 从上一个博客中我们知道,执行umi build 会执行lib/scripts/ 下面对应的js文件,即此处为build.jslib/scripts/build.jsimport chalk from 'chalk';import yParser from 'yargs-parser';import bu...原创 2018-05-01 22:07:55 · 2289 阅读 · 0 评论 -
一个Angular的开发脚手架
Oniangular一个Angular开发的脚手架,前端UI框架使用NG-ZORRO,服务端用koa2。 相关技术:Angular2、Koa2、NG-ZORRO等。 项目使用的是Angular5,这里用Angular2代称是便于关联网友搜索。 github地址:https://github.com/xiaohuoni/angular 求星星实际解决问题Angular2 项目上线(常用的是编译原创 2017-12-12 22:16:06 · 1896 阅读 · 1 评论 -
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。组件组件就是拥有模板的指令,这个我们在第五节编写第一个组件中就已经牛刀小试过了。 入门的内容就那么多的,不了解的还是回去再简单的看看。结构型指令结构型指令就是通过添加和移除DOM元素改变DOM布局原创 2017-10-13 11:48:25 · 2162 阅读 · 0 评论 -
Angular最新教程-第十三节 管道Pipes 自定义管道
自定义管道运行ng generate pipe pipes/cny-currency 因为自定义管道使用的比较少,所以我们把管道都新建到pipes文件目录下。 打开\src\app\pipes\cny-currency.pipe.ts 这里我们编写了一个简单的管道,在输入的前面加上人民币符号,输出。 这里应该都很好理解,name是我们在html中使用的名字。 transform是原创 2017-10-09 14:59:02 · 680 阅读 · 0 评论 -
Angular最新教程-第十二节 管道Pipes 内置管道
管道就是将输入的数据->通过某种转换->输出期望的值。 最常见的就是把服务端下发的时间戳转化成前端需要的时间字符串。 比如服务器下发的时间是1507519139, 而我们需要展示的时间是2017/10/9 11:18:59, 或者2017-10-9 11:18:59类似这样子的字符串, 就可以使用管道。内置管道Angular中提供了一部分常见的内置管道。DatePip原创 2017-10-09 14:23:09 · 3974 阅读 · 1 评论 -
Angular最新教程-第五节编写第一个组件
讲了四节了,一行代码都没有敲,虽说磨刀不误砍柴工,但我们也是时候,上场砍点啥啦。 今天我们就来编写我们的第一个组件,效果图如下。 首先我们使用angular-cli的generate命令来帮我们自动化创建组件。 $ ng generate component site_status 通过分析效果图我们知道了我们有8个数据需要绑定到页面上。 我们先打开src\app\site-sta原创 2017-09-22 16:01:23 · 1378 阅读 · 0 评论 -
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)
我们在实际开发中,会有这样一种场景。 有些页面是允许访客登录的,有些页面是强制用户登录的。 后者,我们希望当用户没有登录的时候,无法直接进去页面, 而是先跳转到登录页面,或者先给出让用户登录的提示。路由守卫两种方法选一种就好了,文件名有冲突哦。推荐第二种。 方法一: 在src/app目录下新建guards文件夹 在src/app/guards目录下新建login.guard.t原创 2017-09-28 17:51:03 · 1916 阅读 · 0 评论 -
Angular最新教程-第十一节 路由四 (嵌套路由)
今天我们继续来看路由。 嵌套路由的使用还是蛮频繁的,使用场景场景一: 商城类应用会有大分区里面的小分区, 虽然也可以靠携带不同的路由参数来识别, 但是他们都在同一个视图里面,就会有一个很明显的问题。 有的分类内容比较多,列表很长,有些分类内容比较少,列表很短。 当从内容丰富的分类切换到内容很少的分类的时候, 会出现,内容很少的页面,下半部分会有一大片的空白。 滚动条也保留在原来的位置原创 2017-09-29 11:06:02 · 1992 阅读 · 0 评论 -
Angular最新教程-第九节 路由二(路由策略、base标签、路由参数)
路由策略我们上一节课中提到了{provide:LocationStrategy,useClass:HashLocationStrategy} 上一节课中我们说明了html中传统的锚标示路由。 这里我们再看新的路由的另一种实现方式了。 是HTML5的新规则,在不需要刷新页面的轻快下,允许在代码中创建新的浏览器记录并显示适当的URL。 简单的说,就是你可以用代码修改地址栏的URL而不刷新页原创 2017-09-28 15:30:37 · 1188 阅读 · 0 评论 -
Angular最新教程-第四节详细说明初始化项目
首先我们打开我们新建的项目。 我们先来看一下新建项目的目录结构。查看项目目录结构src文件夹你的应用代码位于src文件夹中。 所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。 根目录src/文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下,和src/平级。 运原创 2017-09-20 15:07:12 · 1532 阅读 · 0 评论 -
Angular最新教程-第二节使用git、svn和码云做版本控制
上一节课我们已经创建了一个新的项目, 这节课我们了解一下如何创建码云(https://git.oschina.net/)管理我们的代码。 在工作中,不管是自己一个人开发,还是团队开发,都会涉及到版本控制。 比较常用的版本控制软件有svn和git。 (如果你会使用git,会版本控制,那你就不需要在往下看了。git clone这个地址https://git.oschina.net/xiaohuO原创 2017-09-12 10:43:30 · 1483 阅读 · 0 评论 -
Angular最新教程-第八节 路由一(路由配置)
Angular之所以被称为单页面应用,就是因为我们在改变浏览器URL的时候, 不触发刷新当前页面的行为,我们看到的所有的界面,其实是在一个主URL中。 这个功能(功能?现象?表现?随便吧!)就是通过路由实现的。 下面我们先简单的看一个关于路由的例子。 当我们点击上面的导航栏时,当前页面的地址会变成类似http://localhost:63342/test.html#about 尾部带的原创 2017-09-28 12:11:23 · 1686 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第一章第二节注册小程序和开发工具讲解
这节课我们来说说微信提供的小程序开发工具。一、首先我们从官网下载微信开发者工具,注意,不要下到旧版本的公众号调试工具。之前安装过web开发工具的朋友,可能会遇到一个奇怪的问题,明明下载的安装包是最新的,安装完打开的却是旧版的界面。这时候只要把旧版的卸载之后,把所有的文件都删除重新安装就可以了。从微信公众平台技术文档进入的微信web开发者工具的下载地址是错误的,要从小程序的文档进入的才是正确的。原创 2017-05-13 20:36:38 · 1194 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-前言
我一直在考虑这个系列的第一个教程该从什么框架开始写起。是我自己入门时候学习的angularjs,还是大部分web前端入门的jquery?看过我的教程的朋友应该对我的学习方式有一点点的了解。我一直觉得学习前端没有那么多东西需要理解的,只要先记住用法,用的多了,慢慢的就能理解了。我不敢说自己的学习方式是最好的,但是如果此时你刚好没有更好的选择,不妨考虑一下我的方式。对于自学,我还是原创 2017-05-11 22:57:58 · 1891 阅读 · 0 评论 -
ionic入门教程第八课-(加更)从无到有说Ionic、画图说明MVC-U-S
这节课的内容,有些前面几节已经说过了。公司这次给我一个任务,让我带一个没有编程基础的同事学习ionic。今天是我跟他讲的第一课,晚上把讲的笔记整理了一下,觉得还是挺适合零基础的朋友学习的。有些前面讲过了,在这里重复一下就当是回顾内容了。直接上笔记了,字写的很丑,没有时间重新整理,将就一下。如果面试的时候有人问我,angularJs有什么有点,那我一定会回答。他使用了MVC架原创 2016-04-14 20:24:57 · 4144 阅读 · 4 评论 -
ionic入门教程第九课-开始动手做项目吧!ion-nav-bar、ion-nav-buttons、ion-tabs
前面说了八节课,又从框架上讨论ionic的,也有从代码结构上讨论的,但是我仔细看了看,对于新手并没有真正的开始做项目,反而对那些对ionic有一定了解的朋友有一定的帮助。所以我觉得从头开始带着大家完成一个比较完整的项目。由于这是一个前端的教程,所以我只讲前端的内容。UI是借用了福州知名的UI设计师唐力娜的设计,万分感谢。接口的话,这次课程,为了让大家能够理解或者更为熟悉如何从服原创 2016-04-18 16:54:14 · 7876 阅读 · 4 评论