https://github.com/xiaohuoni

之前公众号开发可能都是运维人员提供的appkey，所以不少的朋友，对微信的后台管理系统不熟悉。借由小程序提供个人账号申请，在这里专门写一篇图文教程。虽然微信对个人小程序做了诸多限制，但是作为入门的开发权限还是基本够用的。首先，要注册个人微信小程序1、你要准备一个邮箱，并且这个邮箱没有注册过个人微信，或者公众号和服务号（没有限制邮箱可以注册一个qq邮箱，但要注意，新注册的qq三天内没

继上次教程结束之后，我们的小程序已经完成到如下程度了。 如果你是一个零基础的开发，只要跟着这个教程一步一步完成的，你就能完成这样的界面优美是不是很容易啊。 但是，完成前两章，我们只涉及到页面的编写，很少涉及到页面的功能，那么这一章，我们的主要任务就是编写一些简单的页面逻辑。 我们要实现的是点击上图中的更多，跳转到查看更多页面。 首先我们还是先创建查看更多页面，在json文件中，直接添

今天我们接着编写个人中心页面。 首先我们编辑上半部分的内容。 部分内容在之前的课程中已经有涉及了， 所以这里有写部分直接上代码咯。 编写页面的基本元素user.wxml <view class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></

今天就直入主题吧！调试技巧这里讲一个调试的技巧，因为这个页面是我们点击了首页的更多才进入的，并且他需要携带参数。 所以我们在左侧工具里面 注意点击的是图中红色框框标记的位置，这是一个自定义按钮。 写上路劲和参数就可以了，这样每次启动就是直接携带参数的进入这个页面了。这样也不用反复去修改json文件。上拉加载首先我们先编写一下moviemore的页面。 在头部引入搜索按钮，记得在wxs

这节课我们讲解如何使用bootstrap 4 编写响应式布局。 参考图我们还是参照Angular中文社区http://www.angularjs.cn/ 图中标注红色的部分，我自己不是很喜欢，所以做了一点小改动。 他这里也没有做响应式布局，所以样式就不抄他的，我们自己重写。 首先我们先简要的分析一下这个navbar。 整体是一个黑色的navbar。 参考代码：<nav class="

和angular1一样angular4要是有http库，用来调用外包的API。 为了不使发起的请求，导致当前进入等待而没有响应，HTTP请求都是异步的。 这个之前我们聊过类似的，JavaScript中的异步处理方法。 1、callback回调的方式。 2、promise，这个可以参考我很早之前的一篇博客。http://blog.csdn.net/onil_chen/article/detai

步骤一：安装开发环境在开始学习angular之前，我们要先设置好开发环境。 一般现在的的开发环境基本上都是nodejs， 因为基本上都有使用了nodejs的npm管理和安装依赖包。 如果你的电脑上已经安装过nodejs，那你可以现在命里行中输入node -v 和 npm -v查看他们的版本。 angular 要求node 6.9.x 和 npm 3.x.x 以上的版本。 如果你电脑上的

Angular之所以被称为单页面应用，就是因为我们在改变浏览器URL的时候， 不触发刷新当前页面的行为，我们看到的所有的界面，其实是在一个主URL中。 这个功能（功能？现象？表现？随便吧！）就是通过路由实现的。 下面我们先简单的看一个关于路由的例子。 当我们点击上面的导航栏时，当前页面的地址会变成类似http://localhost:63342/test.html#about 尾部带的

首先我们打开我们新建的项目。 我们先来看一下新建项目的目录结构。查看项目目录结构src文件夹你的应用代码位于src文件夹中。 所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。 根目录src/文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和src/平级。 运

路由策略我们上一节课中提到了{provide:LocationStrategy,useClass:HashLocationStrategy} 上一节课中我们说明了html中传统的锚标示路由。 这里我们再看新的路由的另一种实现方式了。 是HTML5的新规则，在不需要刷新页面的轻快下，允许在代码中创建新的浏览器记录并显示适当的URL。 简单的说，就是你可以用代码修改地址栏的URL而不刷新页

今天我们继续来看路由。 嵌套路由的使用还是蛮频繁的，使用场景场景一： 商城类应用会有大分区里面的小分区， 虽然也可以靠携带不同的路由参数来识别， 但是他们都在同一个视图里面，就会有一个很明显的问题。 有的分类内容比较多，列表很长，有些分类内容比较少，列表很短。 当从内容丰富的分类切换到内容很少的分类的时候， 会出现，内容很少的页面，下半部分会有一大片的空白。 滚动条也保留在原来的位置

我们在实际开发中，会有这样一种场景。 有些页面是允许访客登录的，有些页面是强制用户登录的。 后者，我们希望当用户没有登录的时候，无法直接进去页面， 而是先跳转到登录页面，或者先给出让用户登录的提示。路由守卫两种方法选一种就好了，文件名有冲突哦。推荐第二种。 方法一： 在src/app目录下新建guards文件夹 在src/app/guards目录下新建login.guard.t

讲了四节了，一行代码都没有敲，虽说磨刀不误砍柴工，但我们也是时候，上场砍点啥啦。 今天我们就来编写我们的第一个组件，效果图如下。 首先我们使用angular-cli的generate命令来帮我们自动化创建组件。 $ ng generate component site_status 通过分析效果图我们知道了我们有8个数据需要绑定到页面上。 我们先打开src\app\site-sta

管道就是将输入的数据->通过某种转换->输出期望的值。 最常见的就是把服务端下发的时间戳转化成前端需要的时间字符串。 比如服务器下发的时间是1507519139， 而我们需要展示的时间是2017/10/9 11:18:59， 或者2017-10-9 11:18:59类似这样子的字符串， 就可以使用管道。内置管道Angular中提供了一部分常见的内置管道。DatePip

自定义管道运行ng generate pipe pipes/cny-currency 因为自定义管道使用的比较少，所以我们把管道都新建到pipes文件目录下。 打开\src\app\pipes\cny-currency.pipe.ts 这里我们编写了一个简单的管道，在输入的前面加上人民币符号，输出。 这里应该都很好理解，name是我们在html中使用的名字。 transform是

在 Angular 中有三种类型的指令： 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。组件组件就是拥有模板的指令，这个我们在第五节编写第一个组件中就已经牛刀小试过了。 入门的内容就那么多的，不了解的还是回去再简单的看看。结构型指令结构型指令就是通过添加和移除DOM元素改变DOM布局

用JavaScript进行系统思考每次我需要修复一个bug，我都遵循相同的工作流程：当QA团队中的某个人发现了一个bug，她/他就会给我发送一个bug报告，其中包含了重现问题的步骤。如果我不懂STR，我通常会去找她/他，这样她/他就可以在她/他的电脑上给我看bug。这种工作流在许多公司中似乎相当常见，我经常对自己说，在bug发生之前，它必须有更好的方法来获取应用程序的上下文。动态绑定

继上一节课，我们已经简要说明了将图片保存到相册的流程和方法。 这节课我们围绕这个问题，展开讲解获取用户权限，将网络图片下载到临时文件，最后保存到相册。获取用户权限 wx.authorize 使用方法如下：// 可以通过 wx.getSetting 先查询一下用户是否授权了wx.getSetting({ success(res) { if (!res.aut

这节课，我们将要了解的是如何使用VS Code安装Chrome扩展对Angular进行调试。步骤一：确保环境确保将谷歌浏览器安装在其默认位置。 确保在VS Code中安装了插件：Debugger for Chrome 使用npm在全局范围内安装了angular/cli （我们第一节课中就讲过这个了，你也可以在确认一下。Windows用户快捷键win+r ，输入 ng -v） 使用angular

最近由于公司项目需要，自学Ionic。在这里做个备忘，也希望能帮到想自学ionic的其他朋友。一、首先需要安装node.js环境，对于不了解node.js的同学也没有关系，因为我们有用到的只是node.js提供的npm服务。你可以把他理解成一个下载器吧！二、需要安装cordova和ionic使用命令符npm install -g cordova 和 npm install -g i

工欲善其事必先利其器，现在的node环境下，有太多好用的工具能够帮助我们更好的开发和维护管理项目。我本人不建议什么功能都自己写，我比较喜欢代码复用。只要能找到npm包来实现的功能，坚决不自己敲代码。本次编写程序的两个原则：1、尽量使用声明式的编程风格（声明式和命令式，不是很清楚的自己查查资料）2、能复用的决不自己编写。任何多余的繁琐的行为都是错误的本次编写架构的目的：简单好用易开发

相信大家看过不少项目，对这个文件的说明都很少。不知道是大家默认了都会，还是说默认都不去更改这个文件。反正我刚开始看总觉得很难看懂。这篇教程，我根据项目构建需求编写这个文件。将会对这个做一个比较详细的说明。里面用到的工具只保证满足需求，不保证是最好用的。后续也会对这个文件做持续的优化。一、首先我们先看看现在的gulpfile.js。var gulp = requi

上节课中我提到了，在gulpfile中编写task编译js和sass的task。然后在项目中使用时发现，当项目内容越写越多时，编译速度会越来越久。看了一下编译过程。上次gulpfile中的定义是当监听文件改变时就执行编译全部js文件。查阅资料--gulp编译加速在出来的结果中首条信息是博客园的如何在Gulp中提高Browserify的打包速度看了下教程没怎么明白，按照链接点击去

按我的个人理解，程序就是一个个约束条件的累加逻辑。目的只有一个，解决问题。在开始讲解如何解决问题之前，我觉得最重要的事情是，理解问题。首先你应该能够清楚的知道，你现在面临的是什么问题，才能根据问题提出解决方案。假设现在有一家小店的老板告诉你，我需要一个结算工资的软件。那你是不是就可以开始编写程序了呢？可能很多人都知道是不行的。我们还需要知道的更多。我们会向老板提出更

这节课我随便讲讲javascript中的循环语句。循环最应该注意的是写出死循环的代码，如果你在调试程序的时候，发现浏览器卡住了，点击关闭按钮都很难关掉，那就很有可能是执行了死循环的代码了。如果篇幅不长的话，我们就再做一道题目。对了，这个系列的正确阅读方式应该是先看题目，然后自己做，我的代码只是一个参考。好吧，开始吧！1、do-while先看代码do{//执行一些

今天比较晚，直接进入正题吧！题目：创建一个程序，生成从0到12的乘法表。示例输出0*0=00*1=0...12*11=13212*12=144条件：使用一个嵌套循环来完成该程序。这个没什么好说的，直接上代码吧！前面的输入输出都讲得很详细了，这里直接上主要函数吧。这个很初级，没什么好说的。 var htmlString = "";

妄图用一节课的内容讲完javascript的数据结构，其实还是有点勉强的。所以我只讲几个比较常用的数据类型。基本应用级开发中已经都够用的，想深入了解的朋友可以去查阅详细的API。之前我们的练习都是比较简单的程序，通过将数据保存在变量中就能够解决。其实我们新建的变量可以说成是一个全局变量的属性。如我们在全局定义一个 var a = 1;其实可以理解为window.a = 1;

我一直在考虑这个系列的第一个教程该从什么框架开始写起。是我自己入门时候学习的angularjs，还是大部分web前端入门的jquery？看过我的教程的朋友应该对我的学习方式有一点点的了解。我一直觉得学习前端没有那么多东西需要理解的，只要先记住用法，用的多了，慢慢的就能理解了。我不敢说自己的学习方式是最好的，但是如果此时你刚好没有更好的选择，不妨考虑一下我的方式。对于自学，我还是

这节课我们来说说微信提供的小程序开发工具。一、首先我们从官网下载微信开发者工具，注意，不要下到旧版本的公众号调试工具。之前安装过web开发工具的朋友，可能会遇到一个奇怪的问题，明明下载的安装包是最新的，安装完打开的却是旧版的界面。这时候只要把旧版的卸载之后，把所有的文件都删除重新安装就可以了。从微信公众平台技术文档进入的微信web开发者工具的下载地址是错误的，要从小程序的文档进入的才是正确的。

上一节课，我们已经基本完成了，首页的界面编写。逻辑暂时不理会。但是我们用于展示页面绑定的是我们本地的假数据。接下来我们就来获取真正的数据来展示页面。绑定假数据编写页面算是前段最早做的一件事情吧。特别是在前后端同步开发，联合测试的时候。服务端会先输出接口文档，然后前后端根据接口文档同步开发，最后联合测试。这就需要前段本地编写大量的假数据。如果我们每个页面的假数据的单独

上一节课最后，我们遇到了一个警告。说我们太过频繁的调用serData了，因为我们这个页面的三部分数据是通过三个接口获取的。所以我们分别在三个接口返回的时候调用了数据绑定。但是过于频繁的调用setData很容易引起性能问题。要理解为什么会引发性能问题，我们要先看一下setData的工作原理。https://mp.weixin.qq.com/debug/wxadoc/dev

本章我们将以一个实战项目为主要内容，穿插讲解小程序的各种概念。因为没有UI和后端，所以，我们这里使用豆瓣电影的API和小程序豆瓣评分作为学习材料。最终我们将会完成一个类似下图的小程序。（大家可以搜索小程序，豆瓣评分，线上已经有了。）首先我们来分析一下这个小程序，主要分为电影和个人中心（个人中心我们放后面讨论）。电影主要分为近期上映、热门电影、电视剧、综艺四个模块。（后续看公

在网上好多人，喜欢找别人写好的一些线上的项目源码，比较完整的。想着学习的更加实用和全面一点。这无可厚非，但是，我发现有好多人并不是很在意官方提供的demo。比如ionic的tabs demo就没有什么人看。我个人觉得既然官方把这样的demo推到了入门的地位，那必然是有它的道理的。所以我很喜欢从官方的demo开始学习，因为它足够简单，足够让我明白它的用法和逻辑。上一节课，我们已经

继前一篇文章，我们已经实现了小程序中的上拉加载和下拉刷新， 如果用户网络较差的情况下，或者服务端返回处理的情况下， 那么我们的页面在这段时间内没有等待提示。 或者服务端返回数据之后，我们的页面又好像突然之间出现的， 这整个过程中的用户体验并不是很好，不理解什么是用户体验的， 那可以换一种方式，就是说整个过程让使用者觉得并不是很舒服。 所以通常在请求发起到请求响应的这个过程中，我们会加入l

由于获取详情那些接口的豆瓣API，都有权限限制。 所以，电影详情页面和电影搜索页面我们就不做了。 接下来我们来看一些还蛮实用和有趣的小功能。点击查看大图wx.previewImage我们在moviecard模板中加入点击事件。 如图所示，详细的在前面的章节中已经讲解过了。 然后在index.js中加入点击查看大图的函数 保存预览，点击首页的电影的图片。 我们可以

Designing Systems设计系统在我的上一篇文章中，我解释说，作为一名开发人员，您并不创建应用程序，而是创建系统，即对其环境做出响应的活实体（浏览器、服务器、……）。在这篇文章中，我将描述一个为了创建系统您可以遵循的过程。这个过程是受到了Donella H.Meadows的出色工作的启发，B-Method是我在大学里学过的，并且是领域驱动设计。这个过程由5个步骤组成：