![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 81
陈小聪-小虎Oni
无才可去补苍天,枉入红尘若许年。
知识才是一个程序员最虔诚的信仰。
展开
-
全栈工程师之路-中级篇之小程序开发-第一章第一节注册小程序
之前公众号开发可能都是运维人员提供的appkey,所以不少的朋友,对微信的后台管理系统不熟悉。借由小程序提供个人账号申请,在这里专门写一篇图文教程。虽然微信对个人小程序做了诸多限制,但是作为入门的开发权限还是基本够用的。首先,要注册个人微信小程序1、你要准备一个邮箱,并且这个邮箱没有注册过个人微信,或者公众号和服务号(没有限制邮箱可以注册一个qq邮箱,但要注意,新注册的qq三天内没原创 2017-05-12 10:18:58 · 1141 阅读 · 2 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第五节获取用户权限、下载文件、保存到相册、用户拒绝授权重新授权
继上一节课,我们已经简要说明了将图片保存到相册的流程和方法。 这节课我们围绕这个问题,展开讲解获取用户权限,将网络图片下载到临时文件,最后保存到相册。获取用户权限 wx.authorize 使用方法如下:// 可以通过 wx.getSetting 先查询一下用户是否授权了wx.getSetting({ success(res) { if (!res.aut原创 2017-09-06 10:13:30 · 5913 阅读 · 7 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第一节页面跳转及参数传递,跳转到更多页面
继上次教程结束之后,我们的小程序已经完成到如下程度了。 如果你是一个零基础的开发,只要跟着这个教程一步一步完成的,你就能完成这样的界面优美是不是很容易啊。 但是,完成前两章,我们只涉及到页面的编写,很少涉及到页面的功能,那么这一章,我们的主要任务就是编写一些简单的页面逻辑。 我们要实现的是点击上图中的更多,跳转到查看更多页面。 首先我们还是先创建查看更多页面,在json文件中,直接添原创 2017-08-28 15:20:32 · 803 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第七节个人中心
今天我们接着编写个人中心页面。 首先我们编辑上半部分的内容。 部分内容在之前的课程中已经有涉及了, 所以这里有写部分直接上代码咯。 编写页面的基本元素user.wxml <view class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></原创 2017-08-24 14:57:19 · 579 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第二节小程序下拉刷新,上拉加载
今天就直入主题吧!调试技巧这里讲一个调试的技巧,因为这个页面是我们点击了首页的更多才进入的,并且他需要携带参数。 所以我们在左侧工具里面 注意点击的是图中红色框框标记的位置,这是一个自定义按钮。 写上路劲和参数就可以了,这样每次启动就是直接携带参数的进入这个页面了。这样也不用反复去修改json文件。上拉加载首先我们先编写一下moviemore的页面。 在头部引入搜索按钮,记得在wxs原创 2017-08-30 13:44:16 · 960 阅读 · 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 · 2208 阅读 · 2 评论 -
Angular最新教程-第二节使用git、svn和码云做版本控制
上一节课我们已经创建了一个新的项目, 这节课我们了解一下如何创建码云(https://git.oschina.net/)管理我们的代码。 在工作中,不管是自己一个人开发,还是团队开发,都会涉及到版本控制。 比较常用的版本控制软件有svn和git。 (如果你会使用git,会版本控制,那你就不需要在往下看了。git clone这个地址https://git.oschina.net/xiaohuO原创 2017-09-12 10:43:30 · 1486 阅读 · 0 评论 -
Angular最新教程-第四节详细说明初始化项目
首先我们打开我们新建的项目。 我们先来看一下新建项目的目录结构。查看项目目录结构src文件夹你的应用代码位于src文件夹中。 所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。 根目录src/文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下,和src/平级。 运原创 2017-09-20 15:07:12 · 1539 阅读 · 0 评论 -
Angular最新教程-第十一节 路由四 (嵌套路由)
今天我们继续来看路由。 嵌套路由的使用还是蛮频繁的,使用场景场景一: 商城类应用会有大分区里面的小分区, 虽然也可以靠携带不同的路由参数来识别, 但是他们都在同一个视图里面,就会有一个很明显的问题。 有的分类内容比较多,列表很长,有些分类内容比较少,列表很短。 当从内容丰富的分类切换到内容很少的分类的时候, 会出现,内容很少的页面,下半部分会有一大片的空白。 滚动条也保留在原来的位置原创 2017-09-29 11:06:02 · 1994 阅读 · 0 评论 -
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)
我们在实际开发中,会有这样一种场景。 有些页面是允许访客登录的,有些页面是强制用户登录的。 后者,我们希望当用户没有登录的时候,无法直接进去页面, 而是先跳转到登录页面,或者先给出让用户登录的提示。路由守卫两种方法选一种就好了,文件名有冲突哦。推荐第二种。 方法一: 在src/app目录下新建guards文件夹 在src/app/guards目录下新建login.guard.t原创 2017-09-28 17:51:03 · 1918 阅读 · 0 评论 -
Angular最新教程-第五节编写第一个组件
讲了四节了,一行代码都没有敲,虽说磨刀不误砍柴工,但我们也是时候,上场砍点啥啦。 今天我们就来编写我们的第一个组件,效果图如下。 首先我们使用angular-cli的generate命令来帮我们自动化创建组件。 $ ng generate component site_status 通过分析效果图我们知道了我们有8个数据需要绑定到页面上。 我们先打开src\app\site-sta原创 2017-09-22 16:01:23 · 1381 阅读 · 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 · 682 阅读 · 0 评论 -
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。组件组件就是拥有模板的指令,这个我们在第五节编写第一个组件中就已经牛刀小试过了。 入门的内容就那么多的,不了解的还是回去再简单的看看。结构型指令结构型指令就是通过添加和移除DOM元素改变DOM布局原创 2017-10-13 11:48:25 · 2165 阅读 · 0 评论 -
用JavaScript进行系统思考
用JavaScript进行系统思考每次我需要修复一个bug,我都遵循相同的工作流程:当QA团队中的某个人发现了一个bug,她/他就会给我发送一个bug报告,其中包含了重现问题的步骤。如果我不懂STR,我通常会去找她/他,这样她/他就可以在她/他的电脑上给我看bug。这种工作流在许多公司中似乎相当常见,我经常对自己说,在bug发生之前,它必须有更好的方法来获取应用程序的上下文。动态绑定翻译 2018-01-22 15:28:19 · 304 阅读 · 0 评论 -
设计系统
Designing Systems设计系统在我的上一篇文章中,我解释说,作为一名开发人员,您并不创建应用程序,而是创建系统,即对其环境做出响应的活实体(浏览器、服务器、……)。在这篇文章中,我将描述一个为了创建系统您可以遵循的过程。这个过程是受到了Donella H.Meadows的出色工作的启发,B-Method是我在大学里学过的,并且是领域驱动设计。这个过程由5个步骤组成:翻译 2018-01-23 15:48:22 · 449 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第四节点击查看大图,保存壁纸
由于获取详情那些接口的豆瓣API,都有权限限制。 所以,电影详情页面和电影搜索页面我们就不做了。 接下来我们来看一些还蛮实用和有趣的小功能。点击查看大图wx.previewImage我们在moviecard模板中加入点击事件。 如图所示,详细的在前面的章节中已经讲解过了。 然后在index.js中加入点击查看大图的函数 保存预览,点击首页的电影的图片。 我们可以原创 2017-09-05 09:41:26 · 996 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第三节正在加载,loading状态
继前一篇文章,我们已经实现了小程序中的上拉加载和下拉刷新, 如果用户网络较差的情况下,或者服务端返回处理的情况下, 那么我们的页面在这段时间内没有等待提示。 或者服务端返回数据之后,我们的页面又好像突然之间出现的, 这整个过程中的用户体验并不是很好,不理解什么是用户体验的, 那可以换一种方式,就是说整个过程让使用者觉得并不是很舒服。 所以通常在请求发起到请求响应的这个过程中,我们会加入l原创 2017-09-04 10:25:29 · 3588 阅读 · 1 评论 -
javascript挑战编程技能-第一题:将问题转变成代码
按我的个人理解,程序就是一个个约束条件的累加逻辑。目的只有一个,解决问题。在开始讲解如何解决问题之前,我觉得最重要的事情是,理解问题。首先你应该能够清楚的知道,你现在面临的是什么问题,才能根据问题提出解决方案。假设现在有一家小店的老板告诉你,我需要一个结算工资的软件。那你是不是就可以开始编写程序了呢?可能很多人都知道是不行的。我们还需要知道的更多。我们会向老板提出更原创 2017-03-12 14:34:18 · 702 阅读 · 0 评论 -
javascript挑战编程技能-第二题:计算字符数
问题:创建一个程序,提示用户输入字符串,然后输出这个字符串以及其中包含的字符数。要求:1、确保输出中包含原始的字符串。2、使用一个输出语句来构造输出。3、使用javascript内置函数来确定字符串长度。4、如果用户什么也没有输入,提示用户输入。首先提一下第二点的要求,尽量把所有独立的方法构造成单独的函数,有利于后续理解函数式编程。根据上一节课,我们知道了,在html中原创 2017-03-16 00:16:11 · 718 阅读 · 0 评论 -
javascript挑战编程技能-第三题:计算矩形房间面积
一、问题:计算矩形房间的面积。二、要求:1、提供用户输入长和宽2、输出英尺和米的单位选择3、输出平方英尺和平方米的数值4、结果保留两位有效小数5、只能输入数值6、让计算与输出分离7、使用一个常量来保存转换因子。三、首先我们还是先确定元素。有两个输入,长和宽有一个单选控件选择单位英尺或者米有两个输出,平方英尺和平方米有一个常量转换因子。平方英尺和平原创 2017-03-16 23:05:09 · 1324 阅读 · 0 评论 -
javascript挑战编程技能-第四题:谈个if讲点逻辑
前三节课我们,我们编写的程序都有点简单。就是根据输入计算然后输出结果。上一节课写了一些工具方法,其实jquery.js已经有了很好的封装。后面的demo中会开始使用,不了解的朋友可以查阅官网api。http://api.jquery.com/这里我不做过多的讲解哦。其实很好懂的,我的学习路线跟其他的前段不太一样,我是一开始就学习的angular.js,后面项目中有用到j原创 2017-03-19 00:44:35 · 584 阅读 · 0 评论 -
javascript挑战编程技能-第五题:函数作为javascript的一等公民
函数作为javascript中的一等公民,不仅像别的语言中的函数一样简单的声明和调用,还可以作为对象和参数传递。如以下两种定义方式:function test(){}和var test = function(){}第一个函数像船用函数一样的使用方式,先声明函数,后面再调用函数。第二种定义方式是将函数定义成一个对象,它不再是一个函数的声明,而更像是一个函数表达式,原创 2017-03-26 22:11:56 · 510 阅读 · 0 评论 -
javascript挑战编程技能-第六题:检查密码强度
函数可以帮助我们抽象掉负责操作,还可以帮助我们构建可复用的组件。开发一个程序,基于如下规则确定给定密码的强度。1、如果只包含数字,则为非常弱的密码。2、如果只包含字母,则为弱密码。3、如果包含字母,至少有一个数字,并且字数不少于8个字符,则为强密码。4、如果包含字母、数字和特殊字符,兵器字数不少于8字,则为非常强的密码。要求:1、创建passwordValidator函原创 2017-03-29 00:36:11 · 885 阅读 · 0 评论 -
javascript挑战编程技能-第七题:让代码做重复的事情
这节课我随便讲讲javascript中的循环语句。循环最应该注意的是写出死循环的代码,如果你在调试程序的时候,发现浏览器卡住了,点击关闭按钮都很难关掉,那就很有可能是执行了死循环的代码了。如果篇幅不长的话,我们就再做一道题目。对了,这个系列的正确阅读方式应该是先看题目,然后自己做,我的代码只是一个参考。好吧,开始吧!1、do-while先看代码do{//执行一些原创 2017-03-31 21:49:02 · 684 阅读 · 0 评论 -
javascript挑战编程技能-第八题:99乘法表
今天比较晚,直接进入正题吧!题目:创建一个程序,生成从0到12的乘法表。示例输出0*0=00*1=0...12*11=13212*12=144条件:使用一个嵌套循环来完成该程序。这个没什么好说的,直接上代码吧!前面的输入输出都讲得很详细了,这里直接上主要函数吧。这个很初级,没什么好说的。 var htmlString = "";原创 2017-04-06 02:17:58 · 711 阅读 · 0 评论 -
javascript挑战编程技能-第九题:数据结构
妄图用一节课的内容讲完javascript的数据结构,其实还是有点勉强的。所以我只讲几个比较常用的数据类型。基本应用级开发中已经都够用的,想深入了解的朋友可以去查阅详细的API。之前我们的练习都是比较简单的程序,通过将数据保存在变量中就能够解决。其实我们新建的变量可以说成是一个全局变量的属性。如我们在全局定义一个 var a = 1;其实可以理解为window.a = 1;原创 2017-04-17 00:04:37 · 471 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-前言
我一直在考虑这个系列的第一个教程该从什么框架开始写起。是我自己入门时候学习的angularjs,还是大部分web前端入门的jquery?看过我的教程的朋友应该对我的学习方式有一点点的了解。我一直觉得学习前端没有那么多东西需要理解的,只要先记住用法,用的多了,慢慢的就能理解了。我不敢说自己的学习方式是最好的,但是如果此时你刚好没有更好的选择,不妨考虑一下我的方式。对于自学,我还是原创 2017-05-11 22:57:58 · 1892 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第一章第二节注册小程序和开发工具讲解
这节课我们来说说微信提供的小程序开发工具。一、首先我们从官网下载微信开发者工具,注意,不要下到旧版本的公众号调试工具。之前安装过web开发工具的朋友,可能会遇到一个奇怪的问题,明明下载的安装包是最新的,安装完打开的却是旧版的界面。这时候只要把旧版的卸载之后,把所有的文件都删除重新安装就可以了。从微信公众平台技术文档进入的微信web开发者工具的下载地址是错误的,要从小程序的文档进入的才是正确的。原创 2017-05-13 20:36:38 · 1196 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第一章第四节从block盒式布局到Flex弹性布局
说明:为了便于理解和分析,此处我们全部使用块级元素div来进行说明。因为要将这个文档应用于博客,所以所有的样式写在style中。标题一二三不代表这些概念同级,仅仅代表本文提到的顺序。关于盒式布局的定义和说明,请自行搜索了解,此处不做详细说明。我这里引入几个概念,是我自己理解所得,不权威,但有利于学习和理解。一、块block我把页面中宽度占满屏幕,高度任意的元素(或者区域)成为块。不管是原创 2017-07-29 14:48:32 · 2027 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第二节小程序电影卡片模板
上一节课,有朋友反映我最后写的操作步骤太琐碎了。其实我只是想表达一下我自己的思想过程,从分析方法到关注点。我觉得这对于新手还是有点作用的。如果你不知道怎么入手解决一个问题,不放跟着我的节奏,进去试试。言归正传,我们接下来编写,电影卡片的模板。还是一样的先分析界面,这个界面是上下结构的,最上方一张图片,中间一行文字,下面一个stars模板(我们上一节课编写的内容)我们原创 2017-08-03 11:06:20 · 1189 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo
在网上好多人,喜欢找别人写好的一些线上的项目源码,比较完整的。想着学习的更加实用和全面一点。这无可厚非,但是,我发现有好多人并不是很在意官方提供的demo。比如ionic的tabs demo就没有什么人看。我个人觉得既然官方把这样的demo推到了入门的地位,那必然是有它的道理的。所以我很喜欢从官方的demo开始学习,因为它足够简单,足够让我明白它的用法和逻辑。上一节课,我们已经原创 2017-07-28 16:10:48 · 901 阅读 · 2 评论 -
源码共读-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 · 1066 阅读 · 0 评论