10 2017 档案
摘要：今天我们继续来看路由。 这是我们关于路由的最后一节课。 嵌套路由的使用还是蛮频繁的，使用场景场景一： 商城类应用会有大分区里面的小分区， 虽然也可以靠携带不同的路由参数来识别， 但是他们都在同一个视图里面，就会有一个很明显的问题。 有的分类内容比较多，列表很长，有些分类内容比较少，列...
阅读全文
摘要：我们在实际开发中，会有这样一种场景。 有些页面是允许访客登录的，有些页面是强制用户登录的。 后者，我们希望当用户没有登录的时候，无法直接进去页面， 而是先跳转到登录页面，或者先给出让用户登录的提示。路由守卫两种方法选一种就好了，文件名有冲突哦。推荐第二种。 方法一： 在src/app...
阅读全文
摘要：路由策略我们上一节课中提到了{provide:LocationStrategy,useClass:HashLocationStrategy} 上一节课中我们说明了html中传统的锚标示路由。 这里我们再看新的路由的另一种实现方式了。 是HTML5的新规则，在不需要刷新页面的轻快下，允...
阅读全文
摘要：Angular之所以被称为单页面应用，就是因为我们在改变浏览器URL的时候， 不触发刷新当前页面的行为，我们看到的所有的界面，其实是在一个主URL中。 这个功能（功能？现象？表现？随便吧！）就是通过路由实现的。 下面我们先简单的看一个关于路由的例子。 当我们点击上面的导航栏时，当前...
阅读全文
摘要：在网上好多人，喜欢找别人写好的一些线上的项目源码，比较完整的。想着学习的更加实用和全面一点。这无可厚非，但是，我发现有好多人并不是很在意官方提供的demo。比如ionic的tabs demo就没有什么人看。我个人觉得既然官方把这样的demo推到了入门的地位，那必然是有它的道理的。所以我很喜欢从官方的...
阅读全文
摘要：这节课我们来说说微信提供的小程序开发工具。一、首先我们从官网下载微信开发者工具，注意，不要下到旧版本的公众号调试工具。之前安装过web开发工具的朋友，可能会遇到一个奇怪的问题，明明下载的安装包是最新的，安装完打开的却是旧版的界面。这时候只要把旧版的卸载之后，把所有的文件都删除重新安装就可以了。从微信...
阅读全文
摘要：之前公众号开发可能都是运维人员提供的appkey，所以不少的朋友，对微信的后台管理系统不熟悉。借由小程序提供个人账号申请，在这里专门写一篇图文教程。虽然微信对个人小程序做了诸多限制，但是作为入门的开发权限还是基本够用的。首先，要注册个人微信小程序1、你要准备一个邮箱，并且这个邮箱没有注册过个人微信，...
阅读全文
摘要：我一直在考虑这个系列的第一个教程该从什么框架开始写起。是我自己入门时候学习的angularjs，还是大部分web前端入门的jquery？看过我的教程的朋友应该对我的学习方式有一点点的了解。我一直觉得学习前端没有那么多东西需要理解的，只要先记住用法，用的多了，慢慢的就能理解了。我不敢说自己的学习方式是...
阅读全文
摘要：妄图用一节课的内容讲完javascript的数据结构，其实还是有点勉强的。所以我只讲几个比较常用的数据类型。基本应用级开发中已经都够用的，想深入了解的朋友可以去查阅详细的API。之前我们的练习都是比较简单的程序，通过将数据保存在变量中就能够解决。其实我们新建的变量可以说成是一个全局变量的属性。如我们...
阅读全文
摘要：今天比较晚，直接进入正题吧！题目：创建一个程序，生成从0到12的乘法表。示例输出0*0=00*1=0...12*11=13212*12=144条件：使用一个嵌套循环来完成该程序。这个没什么好说的，直接上代码吧！前面的输入输出都讲得很详细了，这里直接上主要函数吧。这个很初级，没什么好说的。挑战：创建一...
阅读全文
摘要：这节课我随便讲讲javascript中的循环语句。循环最应该注意的是写出死循环的代码，如果你在调试程序的时候，发现浏览器卡住了，点击关闭按钮都很难关掉，那就很有可能是执行了死循环的代码了。如果篇幅不长的话，我们就再做一道题目。对了，这个系列的正确阅读方式应该是先看题目，然后自己做，我的代码只是一个参...
阅读全文
摘要：函数可以帮助我们抽象掉负责操作，还可以帮助我们构建可复用的组件。开发一个程序，基于如下规则确定给定密码的强度。1、如果只包含数字，则为非常弱的密码。2、如果只包含字母，则为弱密码。3、如果包含字母，至少有一个数字，并且字数不少于8个字符，则为强密码。4、如果包含字母、数字和特殊字符，兵器字数不少于8...
阅读全文
摘要：函数作为javascript中的一等公民，不仅像别的语言中的函数一样简单的声明和调用，还可以作为对象和参数传递。如以下两种定义方式：function test(){}和var test = function(){}第一个函数像船用函数一样的使用方式，先声明函数，后面再调用函数。第二种定义方式是将函数...
阅读全文
摘要：前三节课我们，我们编写的程序都有点简单。就是根据输入计算然后输出结果。上一节课写了一些工具方法，其实jquery.js已经有了很好的封装。后面的demo中会开始使用，不了解的朋友可以查阅官网api。http://api.jquery.com/这里我不做过多的讲解哦。其实很好懂的，我的学习路线跟其他的...
阅读全文
摘要：一、问题：计算矩形房间的面积。二、要求：1、提供用户输入长和宽2、输出英尺和米的单位选择3、输出平方英尺和平方米的数值4、结果保留两位有效小数5、只能输入数值6、让计算与输出分离7、使用一个常量来保存转换因子。三、首先我们还是先确定元素。有两个输入，长和宽有一个单选控件选择单位英尺或者米有两个输出，...
阅读全文
摘要：问题：创建一个程序，提示用户输入字符串，然后输出这个字符串以及其中包含的字符数。要求：1、确保输出中包含原始的字符串。2、使用一个输出语句来构造输出。3、使用javascript内置函数来确定字符串长度。4、如果用户什么也没有输入，提示用户输入。首先提一下第二点的要求，尽量把所有独立的方法构造成单独...
阅读全文
摘要：继前一篇文章，我们已经实现了小程序中的上拉加载和下拉刷新， 如果用户网络较差的情况下，或者服务端返回处理较慢的情况下， 那么我们的页面在这段时间内没有等待提示。 或者服务端返回数据之后，我们的页面又好像突然之间出现的， 这整个过程中的用户体验并不是很好，不理解什么是用户体验的， 那可...
阅读全文
摘要：由于获取详情那些接口的豆瓣API，都有权限限制。 所以，电影详情页面和电影搜索页面我们就不做了。 接下来我们来看一些还蛮实用和有趣的小功能。点击查看大图wx.previewImage我们在moviecard模板中加入点击事件。 如图所示，详细的在前面的章节中已经讲解过了。 然后在i...
阅读全文
摘要：ES2016 规格包括数组数据结构的 includes() 方法。 Includes() 方法检查是否数组包含某些元素，返回 true 或 false 。 但在 ES5 我们习惯于执行操作 indexOf （） 方法。使用 includes()方法。const array = [1...
阅读全文
摘要：继上一节课，我们已经简要说明了将图片保存到相册的流程和方法。 这节课我们围绕这个问题，展开讲解获取用户权限，将网络图片下载到临时文件，最后保存到相册。获取用户权限 wx.authorize 使用方法如下：// 可以通过 wx.getSetting 先查询一下用户是否授权了wx.get...
阅读全文
摘要：首先，说说小程序开发的完结，基本上的东西，在我们前面的章节中，都已经提到过了。我觉得掌握这些内容，足够你开始开发小程序了。接下来，就要我们根据实际的项目需求去实现了，如果遇到教程中没有提到的东西，可以查阅官方的API，也可以在公众号后台联系我，或者联系我本人微信号，联系方式在左侧的侧...
阅读全文
摘要：步骤一：安装开发环境在开始学习angular之前，我们要先设置好开发环境。 一般现在的的开发环境基本上都是nodejs， 因为基本上都有使用了nodejs的npm管理和安装依赖包。 如果你的电脑上已经安装过nodejs，那你可以现在命里行中输入node -v 和 npm -v查看他们...
阅读全文
摘要：上一节课我们已经创建了一个新的项目， 这节课我们了解一下如何创建码云（https://git.oschina.net/）管理我们的代码。 在工作中，不管是自己一个人开发，还是团队开发，都会涉及到版本控制。 比较常用的版本控制软件有svn和git。 （如果你会使用git，会版本控制，那...
阅读全文
摘要：这节课，我们将要了解的是如何使用VS Code安装Chrome扩展对Angular进行调试。步骤一：确保环境确保将谷歌浏览器安装在其默认位置。 确保在VS Code中安装了插件：Debugger for Chrome 使用npm在全局范围内安装了angular/cli ，并且版本大于...
阅读全文
摘要：首先打开新建的项目。 我们先来看一下新建项目的目录结构。查看项目目录结构src文件夹你的应用代码位于src文件夹中。 所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。 根目录src/文件夹是项目的根文件夹...
阅读全文
摘要：讲了四节了，一行代码都没有敲，虽说磨刀不误砍柴工，但我们也是时候，上场砍点啥啦。 今天我们就来编写我们的第一个组件，效果图如下。 首先我们使用angular-cli的generate命令来帮我们自动化创建组件。 $ ng generate component site_status...
阅读全文
摘要：这节课我们讲解如何使用bootstrap 4 编写响应式布局。 参考图我们还是参照Angular中文社区http://www.angularjs.cn/ 图中标注红色的部分，我自己不是很喜欢，所以做了一点小改动。 他这里也没有做响应式布局，所以样式就不抄他的，我们自己重写。 首先我...
阅读全文
摘要：和angular1一样angular4也有http库，用来调用外包的API。 为了不使发起的请求，导致当前进入等待而没有响应，HTTP请求都是异步的。 这个之前我们聊过类似的，JavaScript中的异步处理方法。 1、callback回调的方式。 2、promise，这个可以参考我...
阅读全文
摘要：说明：为了便于理解和分析，此处我们全部使用块级元素div来进行说明。因为要将这个文档应用于博客，所以所有的样式写在style中。公众号不支持，博客样式支持不好，又重新上传了图片，替换了展示效果（泪目）。你们能懂用纯文本编辑器编辑了一天，发现不能用的心情嘛！标题一二三不代表这些概念同级，仅仅代表本文提...
阅读全文
摘要：这一小节作为第一章的最后一节，其实关于单位的文章，在博客上倒是挺多的。我一直在想，我是不是有必要再写这一节，还是给大家提供一些阅读链接。因为关于单位的定义都是比较官方的。没什么好讨论的，我这里做一个汇总和简单的说明吧。首先本文只以移动设备为例说明。本文摘要：设计师以iphone6为标准出设计稿的话，...
阅读全文
摘要：本章我们将以一个实战项目为主要内容，穿插讲解小程序的各种概念。因为没有UI和后端，所以，我们这里使用豆瓣电影的API和小程序豆瓣评分作为学习材料。最终我们将会完成一个类似下图的小程序。（大家可以搜索小程序，豆瓣评分，线上已经有了。）首先我们来分析一下这个小程序，主要分为电影和个人中心（个人中心我们放...
阅读全文
摘要：上一节课，有朋友反映我最后写的操作步骤太琐碎了。其实我只是想表达一下我自己的思想过程，从分析方法到关注点。我觉得这对于新手还是有点作用的。如果你不知道怎么入手解决一个问题，不放跟着我的节奏，进去试试。言归正传，我们接下来编写，电影卡片的模板。还是一样的先分析界面，这个界面是上下结构的，最上方一张图片...
阅读全文
摘要：今天我们来编写整个豆瓣评分的首页界面框架。效果图如下：我们今天主要讲解界面的编写，目的是再一次加强对模板的理解。我们还是拿index文件修改。先去掉原有的元素。修改app.wxss接下来进入今天你的主题。首先我们来修改一下标题和APP的主题色。修改整个app共同的都在app的相关文件中。我们修改ap...
阅读全文
摘要：上一节课，我们已经基本完成了，首页的界面编写。逻辑暂时不理会。但是我们用于展示页面绑定的是我们本地的假数据。接下来我们就来获取真正的数据来展示页面。请跳过划线部分。。。。。绑定假数据编写页面算是前段最早做的一件事情吧。特别是在前后端同步开发，联合测试的时候。服务端会先输出接口文档，然后前后端根据接口...
阅读全文
摘要：上一节课最后，我们遇到了一个警告。说我们太过频繁的调用serData了，因为我们这个页面的三部分数据是通过三个接口获取的。所以我们分别在三个接口返回的时候调用了数据绑定。但是过于频繁的调用setData很容易引起性能问题。要理解为什么会引发性能问题，我们要先看一下setData的工作原理。https...
阅读全文
摘要：首先我们新建一个界面，还记得新建界面的快捷方式吗？ 在app.json的pages里面，新增”pages/user/user” 即 "pages":[ "pages/index/index", "pages/logs/logs", "pages/user/us...
阅读全文
摘要：今天我们接着编写个人中心页面。 首先我们编辑上半部分的内容。 部分内容在之前的课程中已经有涉及了， 所以这里有写部分直接上代码咯。 编写页面的基本元素user.wxml {{userInfo.nickName}} 在user.js中加入获取用户信息的代码 app.getUser...
阅读全文
摘要：继上次教程结束之后，我们的小程序已经完成到如下程度了。 如果你是一个零基础的开发，只要跟着这个教程一步一步完成的，你就能完成这样的界面优美是不是很容易啊。 但是，完成前两章，我们只涉及到页面的编写，很少涉及到页面的功能，那么这一章，我们的主要任务就是编写一些简单的页面逻辑。 我们...
阅读全文
摘要：场景我是用querySelectorAll()查询了一些标记，并收到了一个NodeList响应。问题节点列表类似于数组。（比如：他们都有一个长度属性，它们都在括号中的索引访问它们的属性或者子元素：NodeList[0]）尝试使用.map,.filter或者.forEach中的任意一个...
阅读全文
摘要：今天就直入主题吧！调试技巧这里讲一个调试的技巧，因为这个页面是我们点击了首页的更多才进入的，并且他需要携带参数。 所以我们在左侧工具里面 注意点击的是图中红色框框标记的位置，这是一个自定义按钮。 写上路劲和参数就可以了，这样每次启动就是直接携带参数的进入这个页面了。这样也不用反复...
阅读全文
摘要：按我的个人理解，程序就是一个个约束条件的累加逻辑。目的只有一个，解决问题。在开始讲解如何解决问题之前，我觉得最重要的事情是，理解问题。首先你应该能够清楚的知道，你现在面临的是什么问题，才能根据问题提出解决方案。假设现在有一家小店的老板告诉你，我需要一个结算工资的软件。那你是不是就可以开始编写程序了呢...
阅读全文
摘要：上节课中我提到了，在gulpfile中编写task编译js和sass的task。然后在项目中使用时发现，当项目内容越写越多时，编译速度会越来越久。看了一下编译过程。上次gulpfile中的定义是当监听文件改变时就执行编译全部js文件。查阅资料--gulp编译加速在出来的结果中首条信息是博客园的如何在...
阅读全文
摘要：相信大家看过不少项目，对这个文件的说明都很少。不知道是大家默认了都会，还是说默认都不去更改这个文件。反正我刚开始看总觉得很难看懂。这篇教程，我根据项目构建需求编写这个文件。将会对这个文件的内容做一个比较详细的说明。里面用到的工具只保证满足需求，不保证是最好用的。后续也会对这个文件做持续的优化。一、首...
阅读全文
摘要：工欲善其事必先利其器，现在的node环境下，有太多好用的工具能够帮助我们更好的开发和维护管理项目。我本人不建议什么功能都自己写，我比较喜欢代码复用。只要能找到npm包来实现的功能，坚决不自己敲代码。本次编写程序的两个原则：1、尽量使用声明式的编程风格（声明式和命令式，不是很清楚的自己查查资料）2、能...
阅读全文
摘要：从2016年3月1号，我发的第一篇关于ionic的入门攻略到2016年6月28日。我共发布了20篇入门文章，累计访问人数45705.评论数35.我说过了，用到什么自学什么，发什么攻略。从8月份开始，我们公司就不再使用ionic了。ionic的混合开发我研究不多，我都是研究如何让ionic在微信上能有...
阅读全文
摘要：OniPlatform在ionic的基础上配置ocLazyLoad，使得项目满足微信应用-单页面表现的需求，使得单页面访问，不会因为项目的庞大而造成读取缓慢，加快启动项目的速度。拆分ionic视图控制器的绑定，使之底层的服务能够用于pc端，pc端的页面使用bootstrap编写，用ionic的控制器...
阅读全文
摘要：今天好好的跟大家讲讲ionic的路由配置。问到的朋友有点多，因为这个内容比较多，所以我一直想等我多了解一些再出关于路由的教程。但是有些很简单的也有朋友不理解，所以我就提前出了这篇教程。希望能对大家有点帮助，关于我遗漏的部分，后面再发教程补充吧。但是基本的内容，简单的应用，应该这篇教程里面都会提到了。...
阅读全文
摘要：经过这么长时间的学习，我想大家都有了一定的基础了。这节课尝试着给大家讲点更加深入的东西，能理解的就好好学学，还理解不来的朋友也不要紧，可以当做扩展阅读看看就好。学习切忌过于急躁。到目前为止，我教程里面提到的内容都是使用了ionic的内置指令和一些angularjs的内置指令来实现的。如ion-nva...
阅读全文
摘要：好久没有更新博客了，刚好最近对http这个服务有深入的研究，所以今天抽空给大家讲讲这个东西ionic与服务器的交互主要有两种一种是$http,另一种是$resourse。$resourse没研究，所以这个博客说的内容只有$http的相关内容。对于传统的阿贾克斯应用来说，与服务器的交互是通过XMLHt...
阅读全文
摘要：对于微信端来说，其实使用ionic是一个比较大的前端框架。有更多比较轻量化的前端框架可以选择。但是使用ionic有一个明显的优点就是，能够做到一端开发，三端同步上线。这个梗说了好多遍了，但确实是这样子的，ios和安卓都能跑了，为什么在公司的微信公众号，还要再重新开发呢。这就是我一开始研究这个解决方案...
阅读全文
摘要：周五的时候有个朋友让我写一个关于图片延时加载的教程，直到今天才有空编辑，这阶段真的是很忙，公众号都变成僵尸号了。实在是对不起大家。有人喜欢我的教程，可能我总习惯了用比较简单容易理解的方式去描述这些东西。别的就不多说了，大家遇到什么问题。可以直接联系我，不是一句话两句话能讲清楚的问题，我都会抽空写一个...
阅读全文
摘要：不少朋友对我在第十课中提到的slide-tabs比较感兴趣，http://blog.csdn.net/onil_chen/article/details/51191827第十课问的人，要Demo的人也多。所以今天花点时间，详细的讲解一下slide-tabs的实现和优化。首先我们先来看看最初的这个De...
阅读全文
摘要：本来好几个朋友跟我说，让我帮忙写防已上线APP的Demo，我正在考虑，可能后续才会开始。我觉得我还是应该先把这些比较基础的东西讲清楚了。十几年前的软件危机，现在依旧存在。13年的问题16年了还是有。只要有人使用ionic，那么不管什么时候，新手总会遇到类似的问题。因为我自己在学习的时候，百度上找的很...
阅读全文
摘要：发了十篇教程，现在向我问问题的朋友越来越少了。可能我接触到的学习ionic的就这么些人吧！可能大家已经觉得我写的东西都太过基础了，没什么值得参考借鉴的地方。开始有人叫我说直接防类似饿了吗，折八百这样的网站，做一个Demo。其实我也知道有些朋友就想要这种网上的免费劳动力。但是其实这个建议还是不错的。等...
阅读全文
摘要：这几天搬家，没空写,这是前几天写的，放在草稿箱中忘记发了。本节课紧跟上节课的内容，没看过的朋友可以先看一下上节课。http://blog.csdn.net/onil_chen/article/details/51180884太多的前言我就不写了，直接开始正题吧！我们要做的是一个这样的Banner。首...
阅读全文
摘要：前面说了八节课，有从框架上讨论ionic的，也有从代码结构上讨论的，但是我仔细看了看，对于新手并没有真正的开始做项目，反而对那些对ionic有一定了解的朋友有一定的帮助。所以我觉得从头开始带着大家完成一个比较完整的项目。由于这是一个前端的教程，所以我只讲前端的内容。UI是借用了福州知名的UI设计师唐...
阅读全文
摘要：这节课的内容，有些前面几节已经说过了。公司这次给我一个任务，让我带一个没有编程基础的同事学习ionic。今天是我跟他讲的第一课，晚上把讲的笔记整理了一下，觉得还是挺适合零基础的朋友学习的。有些前面讲过了，在这里重复一下就当是回顾内容了。直接上笔记了，字写的很丑，没有时间重新整理，将就一下。如果面试的...
阅读全文
摘要：截至2016年4月13日19点32分，我发布的ionic入门教程，已经发布6课了，总访问量将近6000，平均每节课能有1000的访问量。其中访客最多的是第三课有2700的访客。其实我开始的时候计划的挺好的，就按照我这阶段的安排，慢慢的带大家做一个比较完整的项目。但这几天发生了一些事情，让我不得不重新...
阅读全文
摘要：继上节课，我已经介绍了使用$q和callback的方式，从service服务获取数据。但是在真实的项目中，一般是用户使用控制器通过服务向服务端发起数据请求，由获取的数据传递给模型，再由模型更新视图展示给用户这样一个MVC过程，详细的可以查看我的第二课。（USER------use------>CON...
阅读全文
摘要：继上一节中我们使用到$q来辅助完成了按需加载文件。这节课我先简要的介绍一下$q先从功能上做简要介绍的话：我想通过一个故事来简要的介绍$q，就那最近比较普遍的叫餐服务举例吧今天我想吃牛肉炒饭，所以我打电话订餐跟老板说了，餐弄好了给我送到我公司来，我给了他一个明确的地址。这个过程就是$q.defer.因...
阅读全文
摘要：继上篇教程我们已经创建了一个使用requireJs启动和分离文件的Tabs类型的Ionic项目今天我将介绍一下，如何使用$controllerProvider按需加载controller文件其中将用到的$q有不明白的朋友，可以找我，我估计会在第五课的时候讲到这个内容首先在项目中编写路由的地方定义$c...
阅读全文
摘要：继上篇教程中提到的，我们新建一个简单的tabs类型的Ionic项目。根据目录文件我们知道，系统自动创建了一个controller文件和server文件，并且把所有的控制器和服务都写到这两个文件里面。这是一个简单的项目，业务逻辑代码也很少，这样子实现并没有什么问题，但是当我们的项目越写越多，业务逻辑越...
阅读全文
摘要：今天给大家讲一个很简单实用的多级分类列表，一样的也是今天一个朋友问我的问题。大概的需求是这个样子的，要做一个三级分类的页面。下面来说一下思路吧！先获取一级分类的数据，然后通过遍历得到头部的1级页面内容。然后取第一个数据，获取他的二级页面的数据，还是通过遍历得到左边2级页面的内容。再取2级页面的第一个...
阅读全文
摘要：首先使用上一节课提到的方法创建一个tabs的Demo。提示：有时候案例下载不下来，可以反复尝试或者使用淘宝镜像。建议在需要创建项目的地方，按住shift加鼠标右键选择在此处打开命令窗口，这样创建完的项目，就在当前的目录下，若使用系统cmd直接创建，则项目保存在当前用户的文件夹里，可能有些朋友会找不到...
阅读全文
摘要：最近由于公司项目需要，自学Ionic。在这里做个备忘，也希望能帮到想自学ionic的其他朋友。一、首先需要安装node.js环境，对于不了解node.js的同学也没有关系，因为我们有用到的只是node.js提供的npm服务。你可以把他理解成一个下载器吧！windows 下安装nodejshttp:/...
阅读全文