nw.js开发教程

嘿嘿，这里是 stot 冲进熏血录制的微信课程，在短短的七天时间中，我们来学习使用诺基 s 开发微信公众号以及相关的网站功能。为什么选择从微信下手呢？因为 这几年正是微信公众号如日中天的时候，微信开发是非常实用的技能，尤其对于互联网的新人来说，倘若把微信开发作为一个职业技能吧，那么就可以四两拨千斤。 注，这个闪光点切入到前端开发或者是 nogs 开发的生涯里面，因为许多的中小公司都有微信开发的需求， 分完这些课程以后，不仅会帮助你对微信公众号的交互流程有更准确的了解，也会对你的 logogs 使用技巧，架构项目的方式啊，甚至是更具体的知识，比如说 套啊，框架的使用， es 二零一五的一些新特性等等，都会有更多维度的接触。这些理论和操作，无论是对于你的编程思路，还是对于技术事业都会有很大的提升和拓展。 俗话说的好啊，百闻不如一见，光说不看瞎扯淡，到底这个课程做的项目长什么样呢？是骡子是马，我们来遛一下。那首先是公众号的演示， 我现在连上手机来扫一下公众测试号的这个二维码，我点击这个关注， 就会有一个自动回复，然后还会弹一个弹窗，问我是否同意这个公众号获取我的位置信息，我点一下这个同意，就可以看到一个上报的位置，就是用户的地理位置信息。 这个自动回复呢，不是后台配置的，而是我们的程序自动生成的。那我点击这个链接呢，就是这个语音查电影，就会进入到一个页面， 这个算是一个小彩蛋吧，其实就是 gssdk 的接入，按下这个标题就可以进行语音的搜索，来搜索一部电影，还可以进行分享，点击同意 黑客帝国，然后我点击标题来结束我们这个页面上所写的 gs， 就能拿到这个语音分析后，结果去豆瓣查询的电源信息， 有这些海报、导演等等。那我点击这个分享，比如发送给一个小号吧，那我点了这个剩的，然后就有一个分享成功这样的 一个弹窗提示，然后我们回到这个主面板，在前五天里面的接口都有对应的这个效果。比如说我回复一个一 啊，包括二和三，就能有一个设定好的回复文案，然后回复这个四就会返回一个图文，我回复一个五就会上传一个图片的素材， 我回复一个六会上传一个视频的素材，那这些图片和图文，包括视频的素材都会返回给用户，我回复一个七 会返回一个 mp 三，可以试听，那么素材也分临时的和永久的。我回复一个十会返回一个文章列表，还有什么用户列表啊， 分组列表啊，素材库列表啊等等，我就不再演示了，那这些一二三四五六七八啊，这些都是回复的规则，你可以自由来制定， 一定分的是阿伯数字，还有其他的功能，比如说扫二维码呀，打开相册啊，包括拍照功能等等，这些在后台都可以进行这个接口的这个对接。 那么我回复一个文字，回复一个黑科帝国，就会拿到一个电影的列表，这个就是集成了网站功能以后，增加了爬虫和数据库存储和查询的功能，也可以进行语音查询。 黑客帝国，那么微信就把这个语音的结果给解析了出来，我们后台拿到这个 解析的结果之后，又去查询了这个数据库，就拿到这一堆的这些电影列表，我点击一个进去是可以进行评论的，然后是这个菜 单，这里呢我简单放了三个菜单，我一次演示一下，我到这来首先是帮助会回复一段这个文案提示的文案，然后是分类，比如说按照犯罪这个类别来分， 拿到犯罪类别下的这个电影的列表，然后是这个排行榜，比如说一个最热的就会返回一个热度排行的电影的列表。另外呢就是提供了网站端访问的功能，网站和公众号公用一个后台，网站端的功能 就是注册啊，登录啊，我们可以在浏览器里面访问一下，我点击一部电影进去就能看到这个电影的详细的信息了，包括还有这个后台的功能， 这里就是录入电影的后台了，还有电影的列表啊，这些分类的列表啊，以及用户的列表啊 等等吧。这个网站灯的功能可以对网站的数据进行一个增强感察的编辑，那么这些大大小小的功能其实都是很基础的封装和使用，大家 想象力肯定是丰富无穷的，只要你跟着课程学会了技术层面的使用，那么就一定可以做出比这个案例更好玩一千倍的应用。那为了让本地调试环 与微信远端服务器之间可以通信，我们需要用到网络代理工具，这个呢推荐借助于 qq 浏览器来实现，当然也有其他的代理工具，比如 nglok 也可以做到。我在课程里面有演示， 既然是公众号开发，就需要与公众号后台有交互，里面有不少地方需要在后台的网页进行配置，比如通信的域名地址， s s， d k 的授权地址等等。然后我们这个 nojs 的项目会用到不少的框架，或者说是模块吧。为了更好的让新同学来适应，我并没有百分之百的用一 s 六的规范来开发，而是会用的一些一 s 六的特性，比如要的我们的外部层使用的框架是靠，就是常说的 k v， 主要用来处理服务器之间的应用，初始化接口的调用以数据的响应。而 pammis 尽管是在高版本的 gs 里面已经是原声提供了，我们还是要用到一个 pomes 酷，就是不露倍，用来处理和封装异步的请求，那网络请求我们使用就快速，他是对原声的 http 与快速的封装。 微信的数据包装方式是 xm， 所以我们会借助 egs 这个模板库，把数据作为变量替换到 sm 的字符串中，很容易上手。 最后是一些工具模块，比如捞的也是是常用的方法集，做数组的拆分，类型的判断等等。那么黑二道更像是一个黑科技吧，把函数题里面多行的注视作为字母串提取出来，这个主要用来降低拼接字母串的成本。 而绕包的用来获取一个 hdp 请求返回的可躲瘤里面的内容实体。对于加密，我们选用 s 选 a 一这个哈西算法库， 微信服务器返回的数据竟然是 sml 格式，我们就没法直接在 gs 函数里面使用，所以会借助于 smart gs 这个模块，把 xml 数据 以西为介绍对象，方便我们来使用。尽管模块用到的很多，但是大多数是很容易上手的基础模块，并且这些模块只是分布在课程的不同阶段，反而是很需要我们小心的地方是微信公众号，他的配置，肌肉流程，加密认证缓解 以及票据阿克萨斯图肯的获取有关这些操作。这一些呢，在课程里面有详细的讲解，学习这门课程对于不同技术背景的人门槛完全不同， 但是希望你可以通过预热或者是练习先具备如下的两个基础，第一个是能利用诺基亚斯开发一些网页或者是爬虫工具， 来对诺杰斯 a p a 和他的技术特点有一些基本的认知。第二个是要有一些其他的后端语言经验，比如 pgp、 加瓦如北都可以， 主要是弄明白一个网络 hdp 请求从开始到结束中间所经过的这些环节。最后呢，算是刚需吧，既然是 nots， 就要求你对加 xq 的 最起码会使用吧。这门弱力型的语言其实上手门槛并不高，市面上有很多相关的书籍，包括木克网，有很多视频来讲解。假如你的诺基亚斯的基础的确很薄弱，你可以先跟着 stod 学习另外几期免费的课程，比如竞技诺基亚斯基础， no 几 s 加盟购 db 见证攻略等等，然后再来学习这个课程会轻松很多，我们的课程按照章节类型总共分为七天， 前面五天针对微信常用接口进行一个一个单独的讲解和实现，并且有许多的小案例演示。最后两天用来开发电影公众号的这个网站项目，那么更多的会以口述和视频演示的方式来 详细的讲解微信公众号的接口，并且手写每一行代码，每个章节都会有一些功能的实现，并且通过模拟器或者是手机来进行效果的测试。 有的章节可以听一听就行了，重点是领会思路和开发的流程，如果时间充裕的话，可以在实际编码的章节之后进行二次的独立线下编程，再回头和视频来做比对。

搬砖啦，这节课我们继续来学习一下介词字符传中的方法。 上次和我们留了一个作业，关于加号连接服这一块，不知道有没有小伙伴能总结出来啊。 那我们一块来看一下。其实观察发现就是有数字跟字不串一块的对不对啊，字不串字不串，还有就是不尔行，再者就是 a 字不串不尔行，再者就是数字跟数字。那我们实际得到的结果是怎么样的呢？一块来看一下。 我这里是在控制台里面输出，所以要检查控制台里面可以看到。好，重新刷新一下。我们一块来对比看一下他的一个结果，这里当数字跟自负串一起的时候，直接原样输出对吧？还有就是自负串跟自负串，哎，他也是原样输出，这两个没有区别，没有 看出来对不对。好，那我们再来看出跟放那这一块他使劲是得到的一，哎，为什么是得到的一呢？在咱们借四里面，他实验代表的是一，而放肆的话，他实验代表的是零，就是真和假。 但是在这里他为什么就做运算了呢？可以思考一下是吧。再来看这里，哎，同样的也是出跟 fls， 为什么他就是输出的出跟 fls 呢？这个很好理解对吧。十一加上二十二等于三十三。我们疑问比较大的就是这两个， 以及 a 第一个跟第一个他们之间为什么数字这里他也不做运算呢？好，来说一下啊。总结 其实写了这么多很简单啊，就是两点，第一点你看一看里面有没有字串，如果有一个是字符串，那他就是连接，如果是当前两个都是数字，他就会直接去做运算。我们来看一下这里是不是有一个字符串，那他会直接连接，所以我们得到的是一哈喽，这个地方肯定是 四五串的连接，他不会做运算对吧？这里的话呢，出跟 fars， 他本身代表的一跟零，所以他会按照一加零的方式去 解析，他会直接给他转换之后，所以我们得到的结果是一。这个地方也很简单，他有一个是字无串，所以我们就是会得到是连接，就是处和 boss。 这里的话呢就很简单了， 当他们都是数字的时候，哎就会出现运算。那有小伙伴又脑洞大开了是不是？那我如果当前这一块呢，来给他换一下，在这里我给他来一个处，这个结果他又是多少呢？ 思考出来了没？我们一块来看一下结果啊，他的结果是二十三，所以在这个地方处他也会被直接转换之后， 也就是相当于是一加二十二，所以他的结果为二三。这个就是关于加号连接服。我们还有一些时候呢，会遇到一些页面中特殊的输出，比如说我要输出一个斜杠，我还要去输出一个引号， 看页面中我们再去输出的时候，这一些引号是不是直接会被屏蔽掉，不会直接带着输出对吧？但是有的时候页面中哎，我们展示给用户的时候，希望这里有引号，那这个时候我们怎么样去输 输出呢？这里就需要通过转易字符。那关于转易字符，我们先来看一个例子， 我们需要在浏览器里面说出这样的一句话。首先我们需要先给他存放在一个电量里面，把这一块给他拿过来， 浏览器里刷新 可以看到是吧？可以输出。但有些时候有小伙伴说，你不是说这个地方也可以用单双引号吗？对不对？ 你看在这里他直接就怎么样就爆错了是吧？所以这个方法是不允许。那有小伙伴说，哎，你不是说单双引号跟单引号一样去用吗？但这里我就想用双引号的啊。好，那这这里我们可以给他加 上一个反斜杠，你看这样他也是识别的对不对？浏览器里面查看一下 也可以输出对吧？这个就是转移字符的用法哎，这个就是当你遇到引号的时候，输出不了的时候，就在他前面添加一个反斜杠就可以了。那同样在咱们 你看像这样我们去写的话，他有些东西就没有办法去显示出来，那这个时候怎么办呢？我需要把当前这个 添加一个斜杠就可以了。也就说你要输出引号就给他前面添加。如果是输出单引号呢？同样的方式对不对啊？哎，也在他前面添加一个反斜杠，那你以此类推。如果当前我还需要把这个地方给他换成斜线， 这样去输出，那我们是不是就反斜杠就可以了？能明白吗？这个是被解析掉的啊，这个也是被解析掉，这个也是被解析掉。这三个我们每一个都写一个例子演示一下， 这是第一个输出看一下， 第三个是输出一个反斜杠。 关于转移字符，还有其他的一些，但这些不是太常用，了解一下就好。

我的很多前段学员呢，都经常问我一个问题，说，袁老师你是怎么学习的？你脑袋里面怎么装了这么多东西？关于这个学习方法吧，其实每个人都不太一样，我这里呢可以给大家分享一下我的学习方式。但是我要首先声明啊，我的学习方式呢，并不一定适合你，你可以做一个参考，比方这两天呢，我正在看这个 p 五 gs 玩，也不需要把它学到多精通的程度。那么我首先问同学们一个问题哈，当你要学习一门新知识的时候，你首先要给自己确定一个学习目标，对吧？那目标是啥？你有一个学习目标才有一个使劲的方向吗？可能每个同学呢，学习目标都不一样啊，可能有些同学呢，是为了把它做成一个项目，或者是做出来各种各样的效果。 而我的学习目标是什么呢？当我拿到一个新东西的时候，他在我的脑海里边是一团雾，我看不清楚，我甚至都不知道这个东西是干嘛用的。我整个的学习过程就做一件事，我把它看清楚，我看的越清楚，那我对这个东西的理解就越深刻。无论我是去读一些博客呀， 文章啊，读官网啊，还是去跟着他的提示敲代码呀，或者是看他的 api 啊，或者是分析他的原理啊，都只有一个目标，把那团误看清楚。随着学习的过程，这团误呢，会慢慢的变得棱角分明， 开始是一团雾，后来呢变成了一个三百六十 p 的图片，然后呢变成一个七百二十 p， 然后呢变成四 k 八 k， 当这团雾变成了一个有足够高的分辨率的时候，那么你就对这个东西认识就越来越准确和深刻。 所以说我并不在乎说我得用这个玩意去敲什么代码，实际上我学东西，我很少去敲代码，我基本上不动的，我就站在那里看，一边看一边想，我也不在乎它里面用到了哪些函数，每个函数要标，要传什么参数，这个函数的名字是啥，我完全不在乎。 代码对我而言，他不是目的，而是为了去看清那个东西到底是啥的手段。如果说我需要敲代码，我才能看清，那我就敲，我不敲代码我也能看清，我就不敲。一旦我把那个东西看清楚了过后，如果说达到了一个足够高的分辨率，那么这个东 东西的所有问题我全能解决，尽管我可能一行代码都没敲过。这就是平时我遇到了很多同学觉得神奇的现象。就是有些同学呢，在公司里边用到了一些奇奇怪怪的第三方库，我没有用过。然后这些库呢，他在开发过程中产生了一些 bug， 公司解决不了问题，跑到我这了，我说我没用过啊，那我看一下官网吧，我看能不能解决。很多时候，我只需要看他官网的描述性与 就一句话，他代码我完全不看，我都能知道他大概的错误发生在哪。因为你长期下去过后，你会练就这样的本事，比方说这个屁股有点结实。整个文档最重要的就是第一段话啊， 第二段话都没有那么重要了，第一段话看完了之后，他就不再是一团雾了，他就有了一定的清晰度了，这里边有很多的关键字，创意、艺术家、设计师、教育家、初学者。这段话就在大致的描述他在干什么？他在干什么？他在画图， 给谁画图，给那些搞艺术的，搞设计的，让他们使用一种编程语言来绘制出更丰富的图像，这就是他的作用。然后我就会进一步去想，那么如果说我要学习他，难度在哪呢？难度一定不在于这个库本身，难度 一定是我要对艺术有一定的了解，我要对设计有一定的了解，包括设计里边的什么滤镜啊，照声啊，纹理啊这些概念都一定要有了解，了解了这些东西过后，我们再来去用这个库，就可以做出非常丰富的效果。 然后接下来呢，我把这句话读完了之后呢，我发现了上面有这么一个东西，哎，他有几种形式，你看有 gs 的形式，有什么 py 就 pass 的形式，有安卓的形式，有 pad 形式， 然后在最前面加了一个 procession， 这就是典型的以一个工具为核心，然后呢应用到不同的编程环境。所以说 p 五点 js 啊，它背后是什么呢？背后是一个 procession， 那我就进去看一下 procession 到底是啥？哦，原来它是一个素描本儿，同时呢也是一个语言，目标都是为了绘图。 这段话里边也同时告诉你，他的应用范围是学生、艺术家、设计师、研究者和一些对艺术有兴趣爱好的人。那么看到这个时候 p 五点 j s 他是不是又变得清晰了一些？然后接下来我就可以去看他的各种入 门啊，代码啊这些乱七八糟的函数啊，无论是在 p 五点介是里边去看还是在 proc 里边去看，我都无所谓的，因为他们都在做同一件事，看哪一个都无所谓，都可以把那个模糊的影像变清晰。所以说我的脑袋里边装了多少东西呢？其实啥也没装，最终我脑袋里边存储的其实就是那个清晰的图案而已。 至于那些代码呀，函数啊，那些敲敲敲敲敲实现层面的东西，我一点都不 care， 是因为那些东西太容易了，你只要把图像变清晰了过后，哪怕你一行代码都没敲过，你都能实现各种复杂的功能，以及解决各种诡异的问题，因为整个这个技术，他的头脑都是清晰的 啊。但是呢，我这种方式呢，也不知道适不适合你啊，你可以去尝试一下，反正呢，挺适合我的，因为一直以来我学习任何东西都是使用这种方式，其实很多的搞科研工作的人都是用的这种思维模型， 思维模型的好处就在于，你长期这样训练下去以后，你看到任何一个新东西，你只需要看一下他到底是啥，你瞬间就可以联系起过往的经验，马上让这幅图像变得清晰，你甚至都不知道他里面代码怎么写，怎么去安装，啥都不知道，但是你都可以解决他里边很多很多的问题了啊，分享这么一个东西啊，也不知道对大伙有没有帮助。

今天给大家说一个简单实用的前端开发学习路径。首先是 a tm 毛和 c s s 这个不用学特别多，就是最常用的十几二十个 at 毛标签，加上十几二十个 c s s 属性就 ok 了，能做网页就够用了。第二个呢，就是学扎瓦斯 crab 的， 也不用学特别深奥的东西，就是常用的语法特性，加上一些盗墓的基本操作就 ok 了。那些进阶的语法呀，运行机制啊，还有很多不常用的 es 六特性啊，这些东西放到后面再学，那这 s 基础学完之后接着来学 no 的。 学 note 的目的是什么呀？就是咱们用 view 或瑞艾克特的时候会用到脚手架工具，那咱们用 note 这个环境搭建脚手架工具就够了，不要学那些后台的东西啊，框架啊， note 的 api 啊，不要看这些，就是会安装 note， 会用 npm 管理项目依赖就够了啊。 note 学完之后就该到框架了，瑞艾克特和 ville 二选一， 千万不要两个一起学。那框架怎么学呢？能看懂文档就照着文档把呆萌都实现了，基本就会用了。看不懂文档的小伙伴可以找一个教学视频，跟着教学视频来学一些常用的语法特性，但是像有一些圆码啊，原理啊这些也不着急学，咱们会用就 ok。 会用框架之后学什么呢？学习一些数据交互，就是 ajx， 那咱们基本上了解一下 http 协议，并且用 xu 实现一个数据交互就可以了，那这样的话，前端的一些基本知识大概都学了那么一点点，然后我们就可以开始做项目了。 做项目可以做一个电商系统啊，或者是内容管理系统啊，或者是博客系统啊，都可以。最好的话，大家有一个同学，俺同学是开发后台的，那你呢，可以和他做一个前后端分离的一个项目，这样你做前端，他做后台，这个项目就可以一起实现了。但是如果说没有同学做后台 的话，这个后台可能需要自己去写，那就得学习一些后台相关的东西，那会沙发是最好的了，如果不会的话，自己用 no 的搭一个后台的程序也行，当然这个也是需要学一段时间的，那我们在开发项目的过程中，就会发现，前面还有很多知识点是不太够的，欠缺的，不熟悉的怎么办呢？哪里不会补哪里？ 说到这呢，大家就发现了这个学习思路是什么呢？就是把一些基础的知识学完之后，然后通过项目去引导学习，去了解哪些知识常用的，去知道哪些是重点，哪些不是重点，这样学习才是最高效的。 那把这个项目做出来之后，最起码小伙伴们是可以用这个项目去找一个实习工作了，对吧？那如果还想接着学怎么学呢？那就要回头看看 zs 的运行机制与法特性进阶的一些知识，或者是一些框架的原理，框架的圆码，或者是培养一下自己的 逻辑思维，刷一刷算码题，这就是后续的工作了。所以总的来说就是大家先把这个项目做出来，然后再考虑其他的事。好，那这就是一个非常简洁的前端开发学习路径。最后呢，再给大家推荐一个适合小白学习的前端新手训练营，点击下方的链接就可以看到了。

搬砖啦，今天来共享一下 gs 相关的知识点，第一大 大块 gs 文件的创建，第二大块是 gs 的引入方式，这一块其实在咱们讲到 h 前面四 s 的时候，也似曾相识的见到过，是不是？好，只不过方式不太一啊，等一下我们来详细说一下。 在讲这一块内容之前，我们先来扩展一个知识点，就是前端的三大块，人家问你别不知道对吧？哎，实际前端三大块我们已经学完了两大块， htm 和四 s html， 它主要是 学到的标签对吧？各种各样的标签，它的作用就是用来去承载我们所需要展示给用户的一些内容，但是这些内容承载完之后，他会按照他自己的格式，对不对啊？从上往下去展示，但是 有些时候我们需要让他这个并排呀，或者是按照我们自己的一个方式让他去展示给用户去看，这时候我们就需要通过 css 去进行外观的一个修饰，对吧？ 那还有一点就是 gs， 比如说像我们在看到的轮播图，动态的，还有数据的提交啊，搜索功能啊等等，这些我们需要结合 gs 来实现啊，也就是前端三大块你学完之后，基本的咱们页面就可以写起来了啊。好，我们先来看第一大块 gs 文件的创建， 创建这一块呢，我们先来给他找一个位置，写上一个戒色圆码 啊，有需要的小伙伴后续也可以把这一块发给你啊。打开咱们自己的 vs 扣的，把这个 gs 文件托放进来，托放进 进来之后，在这个文件夹里面呢，我们就需要去创建三大块，对吧？浅断的三大块必不可少的，对不对？好，第一大块是我们需要去创建一个 htm 页面两种方式，第一种是你在这个地方直接去通过文本文档去创建，这个方式咱们讲过，对不对？好， 比如说我们来给他一个 ex 后缀名，一定要去，记得去改一下，这样我们就创建好了，这是第一种方式。第二种方式比较简单，就是直接在咱们 vs 扣的里面去创建，这是创建文件对不对？好，我们来去创建一个 ex 零一点 h 前面 啊，两种方式都给大家去讲到了啊，你用哪一种方式都可以？好， h 前面创建好之后，是不是我们还需要去创建一个 css 文件？同样呢，也有两种方式， 跟刚才的一样，你在这里呢，可以直接去这样去创建，也可以。怎么样去创建啊？ vs 扣的里面去创建，哎，建议大家啊，椰丝扣的里面去创建，好吧， 这样比较方便一些啊，那 vsk 的里面是不是我们要创建在这个文件夹里面？来给他一个 css 文件夹，对不对？好，创建好之后是不是我们也需要有一个 css 文件呀？文件 之前给大家去说过，对吧？名字最好跟你当前创建的这个文件相一致就好了。这个咱先去掉吧，不然太多看着容易太乱啊， 这块很清晰明了了，对不对？那来看一下，我们有了 h 前面页面和 cs 这块，咱们之前讲过的，对不对？ h 前面页面里面我们需要那 头文件怎么样？来办？快捷键吗？对吧？哎， shift 感叹号松开之后，然后按听不见，哎，这一块咱们就 ok 了，写好了是吧？好，写好了之后我们还需要把 cs 引入进来，这个引入跟咱们之前课堂里面讲到的引入是一模一样的， 直接另可四颜色就可以了，对不对？好，这个地方注意一下啊，很多小伙伴都说，哎，老师，我找不到他，对吧？你找的时候一定要看一下他跟他的一个等级关系，有小伙伴为什么找不到呢？是不是这里直接给他来一个 atm， 你把这个文件给他拖进来， 他跟他是同等级，对吧？你这样直接去找四 s 下面的四 s 文件，能不能 找到？找不到，对吧？这个是路径问题啊，好多小伙伴问过， 所以 h 前面你可以不用给他存放在文件夹里面，直接放在跟目录就可以了，能明白吗？跟 动作的时候他跟他同等级，对吧？同等级我们可以去找，也就是啊，哎，直接去找到 cs 的文件夹，对不对？他下面的哪一个文件啊？这个文件明白了吗？这是一个录件地址的一个问题啊。 这一块 ok 了之后我们来看一下 gs 引入的关系，有两种啊，第一种他也有一个自身的一个标签，就是 suv 的标签， 这个里面就是后续我们要写的一些 gs 代码，这是第一种引入方式， 但是这种方式呢，你了解一下就好啊，这个也有时候会用到，但是我们用的比较多的是第二种引入方式，这个引入方式是什么呢？他呢是通过 s plus src， 这个里面跟的就是我们所需要的一个 gs 文件，这个 gs 文件跟我们刚才说到的四 s 文件一样，你呢？最好把它放在文件夹里面， 紧接着在文件夹里面创建一个跟他名字相一致的英 x 零一点 js， 这能明白吗？ 看一下，都把它放开看一下啊。你看这个文件，比如说我这个文件里面，我需要更改一下他的 cs 外观，是不是通过名字可以直接找的到，对不对啊？哎，比如说我想去更改一下他相关的借字代码，哎，我也可以通过他的名字直接可以找到，能明白吗？啊？就是一个方式啊，当然你不按这个也可以。好，那这个里面我们怎么样去找？是不是跟这个方式跟这个路径一样去找就可以了？ 这样好，我们需要去找到借字文件夹下面的 ex 零一点借字，这是两种方式啊，借字的第二种引入方式， 推荐使用这种啊，这种用的也也比较多啊，你也要记一下，好吧。

二十个令你大开眼界的 js 开发小技巧，你掌握了几个？第一，替换字符串中第一个相同字符以及替换所有相同字符。使用 replace 方法可替换匹配的第一个相同字符。而替换所有相同的字符 可以使用 replace 方法配合政则来进行全局替换。当然，你也可以通过 replace 所有方法快速一键匹配所有相同的字符并进行替换。 第二个，获取字符串中的某个字符和判断字符串中是否存在某个字符。 通过字符串的 chart at 方法即可实现。传递的参数围绕获取字符的下标 q 方法用于判断某个字符是否存在于该字符串中。 第三个，反转字符串。 第四个，将数字形字符串转成 number 类型，并对小数优雅的取整。 第五个，利用条件判断给字符变量复值，也称作短路评估。我们先来写一段像屎一样的代码， 这样虽然是能实现了条件判断的复制 操作，但是不够优雅。我们可以这样改，采用逻辑或的方式来实现，其实就相当于一个简写了的三木运算。 第六个，条件判断增加对象属性。 第七个，检查对象是否包含某个属性。这里有四种方式可以实现 where is your love。 第八个，简单实现标准的 freeze on 深拷贝。至于什么是深拷贝和浅拷贝，大家可以去深入研究一下。 可以看到深考背后的对象与原始对象是相互独立， 不受影响的，彻底实现了内存上的分离。第九个，快速便利数组。如果你还在使用否尔循环便利数组，不妨试一下否尔啊，他还可实现数组对象的便利。 第十个统计一个数组中每个元素出现的次数。 这时候经过 reduce 处理的函数返回的是一个对象，对象中对所有元素出现的次数都进行了统计。

如何成为一个 model jays 大神，其实你真正需要学习的呀，是整个后端的基础体系，比如 seven lens 带我 offs， 数据库 api， clients 分布式服务， wifi， freemwork 每个体系后边呢，又可以细分为很多子向， 比如基于 seven last 的框架应用和云平台，带过 ops 的日制复载，均衡上要命令刀口，性能监控，带着服务器等等。 数据库呢，至少要掌握买三套航空 db radioaapx 的 ricep 接口， grindql 分布式服务的 rpc 认为调度，实时通信，消息管理等等。 vibe frameworks 的 express， kiwi， egg， next， 点儿 ds 等等能综合应用。这些才算是真正的那个这样的大神，年轻人不知天高地厚。

零基础用十二周的时间如何入门前端开发？今天说一下这个流程啊。第一周，用 sm 和 css 制作一个电脑端的网页效果。第二周呢，熟悉 css 三新特性啊，可以制作一些网页动画效果啊，还有呢移动端的页面。 第三周呢，熟悉 suv 的基础语法。第四周，学习 dom， bom 以及 es 二零一五的新特性。第五周呢，使用这 carry 实现常见的网页效果。第六周，使用基于 note 的跨框架以及模板引擎，制作一个动态的外外半站点 啊。第七周呢，熟悉一门潜能框架啊，这里推荐是 vivo 和 red 二选一啊。第八周，使用 vivo 或 red 啊，制作一个前后端分离的外部项目啊。第九周，学习基于 cora 的艾克项目啊，以及 呢买折扣数据库的基本操作啊，这里涉及到的其实就是后台的知识啊，目的呢，就是为了让大家可以独立完成一个啊，一整套应用的开发啊。第十周和第十一周，这 这里呢，就是做一个综合的项目了啊，可以用这个前端的 red 或者 vivo 结合这个爱的框架，还有买四扣数据库制作一个完整的外围应用 啊，例如是一个什么学生成绩管理系统或者是一个 cm s 之类的啊。第十二周呢，就是知识扩展了，知识扩展可以学这个 cst 预处理啊， toppre 啊，小程序啊啊， 但有了之前的基础呢，补充这些知识呢，是很容易就能掌握的啊，然后就可以准备简历去面试了啊，当然面试也是一个打磨技能的过程啊，通过面试呢，可以更直观的知道自己哪里不足啊，然后不断的巩固和完善自己的技能术啊，今天就说这些，希望能对大家有帮助。

我们现在呢其实已经知道了，就是当你通过浏览器去访问一个网址，那么浏览器最先接收到的是一个点 html 为结尾的这样的一个文件，这样的一个文档， 那这个文档里面的内容呢，就是用 h t m l 语言的这个语法来写的，那学习 h t m l 呢，我们要先来看看就是这个文档里面到底长什么样子。那我们这里呢打开了这样的一个网站，然后呢我随便用鼠标右键去点击它，然后我用这个 inspect 就检查， 然后你会发现就弹出了这个开发者工具啊，这个就是呃， chrome 浏览器的开发者工具，那这里呢这些东西都是可以拉伸的，那我们这里先去核心关注就是这样的一个内容啊，如果， 如果你看到的不是这个元素这样的一个面板的话，你可以呃把切换选中这个元素这个面板啊，那在元素这个面板的这个最核心的部分呢，你会看到这样的这些内容，那这些内容呢，其实就是我们接收到的这个 h t m l 文件点 htm 扩展名的这个文件里面的内容。如果你是第一次看到这样的内容的话呢，你肯定会被他这种密密麻麻的东西 有点吓到了啊，但是不用担心，其实你我们现在不去具体的关注它里面这个东西是什么意思，我们先来仔仔细的稍微观察一下它里面的这些内容有什么特点， 那只要你稍微仔细的观察一下呢，你会发现它里面的这个内容啊，有很多地方都出现了这种带着左右肩括号的这样的一种类 属于符号的这样的东西，我们先简称他叫做某某种符号吧。啊，然后这种符号呢，他一般都是成对出现的，只是说左边跟右边 这里，他这里右边这里多了一个这种斜杠啊，所以你会发现这些东西他都是成对出现的。然后呢他们这个这种符号啊，他的里面的具体这个英文的字符会不一样，但是他这个格式都是这样类似的格式啊，就左右肩括号这样的一个格式， 我们可以看一下这个 header means section diy， 是不是它有非常多的这不同的里面的这个文字， 好像他是某种符号，然后呢这些名字不一样的，这些英文不一样的，就是他这种具体的某种具体的一个型号。然后呢你会发现这些东西啊，他都是一层层可以欠套的，如果我们随便找 一个这种层级多一点的，你会发现你一直点一直点，其实它里面欠套了非常非常多的东西，欠套了非常非常多。 然后你再仔细观察的话呢，你会发现他这些符号啊，他的左边啊，我们看到他有些符号，他的左边这里就是这个，就左边这里，你看这里他会有很多这种 这种类似于给他这个符号去设置了一些东西的这样的一些啊写法，因为你看他这里有个等于号嘛，对吧？你相当于是给某给这个符号去给他设置了一些信息啊，一些 可能对他来说是有意义的一些内容吧。啊，这个东西呢也是很重要的，后面我们不会去讲。然后呢像这些东西， 你看啊，你可以用通过这个肩解左边的这个肩的这样一个三角形，你可以展开折叠啊，你会发现，你会发现啊，他这里其实 如果把它折折叠的最最折叠就全部叠起来的一个状态之后呢，你会发现最终的一个状态是一个 html 这样的一个符号，然后那里面包裹着包裹着两个，一个 head， 一个 body 这两个符号啊，然后其他的东西呢，好像都在这两个里面了， 然后这里最顶上，这里还有一个这样的一个，哎，单独的这样的一个符号啊，这是这样的一个单独的符号，然后呢我们如果多观察几个网站的话，我们随便再去点两个网站出来啊， 我们再一样右键去 inspect， 然后你会发现其实他们的结构都是这样的，我把这个收起来，哎，你会发现都是这样，有个什么 dog dog type 这个东西，然后接下来就是一个 h t m l， 然后就是里面包含着 包含着这个 head 和 body， 然后所有的这些其他的就是你在页面当中看到的这些东西，基本上都是在这个里面了啊，这两个里面了。那像这些这种用肩跨号，就左右肩跨号包裹起来的这种成对出现的这些 符号，就是 h t m 里面非常重要的，非常非常重要的一个概念，就叫做标 标签啊，比如说我们这里写一个最基本的就这样的一个符号， 这个是小写啊，像这种包括我们看到的其他的 其他的这个名字不一样的啊，这种英文字符不一样的，像这些东西在 html 里面就是统称为一个东西，叫做标签， 英文叫做 tag。 那学习 h t m l 呢？我们第一个核心的要去了解的就是这个东西标签。

好，接下来我们要研究一个组件里边非常经典的问题，页面上呢，有一个倒计时的组件，我把他时间给他调小一点啊，比方说五秒钟，好，然后倒计时 三二一，好，倒计时结束。那么这个时候呢，他会打印一这么一段话啊，倒计时结束了，然后呢他的实际的消耗时间。这个组件呢，是我自己封装的， 名字呢，叫做 clock kick， 就这么一个组件，这个组件里面代码呢，我们不用去细看，我们现在就考虑这么一件事，当倒计时结束的时候呢，打印语句，我是在组件里边自己做的。 好，接下来我们就要思考一个问题了，倒计时结束，我们到底应该做什么？应该做啥呀？不要说你不知道了，我也不知道，他有可能只是在控制台打印一句话，也有可能是要在页面上弹框，也有可能是要跳转页面，当然也有可能去做任何 其他的事情，是不都是有可能的。也就是说啊，我们在封装这个倒计时组件的时候，在这个组件里边，我们根本就不知道他倒计时结束过后要干什么，而谁知道啊？ 使用这个倒计时组件的这个 app 组件他知道，因为他就是具体的应用场景，比方说我这里就写上了一句话，五秒后跳转到首页，那么下面一个倒计时，在这个具体的应用场景里边，我是不是非常清楚，倒计时结束过后，我要跳转页面，也就是说现在遇到这么一个困境， 副组件呢，他知道倒计时结束过后我要干什么，但他不知道什么时候结束。子组件呢，他知道倒计时什么时候结束，但他不知道结束过后要干什么，两者是不是该结合一下？其实像这种问题不要说框架了，你们在刚刚学前端的时候早就遇到 这种场景的，以前写前端的时候，我们不是在用什么按钮吗？对吧？这个按钮是谁写的？按钮是浏览器帮我们写好的，我们直接用就完事了。浏览器他写这个按钮代码的时候，他是有能力监听到用户的鼠标什么时候点击了这个按钮，但他就是不知道到底要干什么， 而谁知道用这个按钮的人知道啊，他是具体的应用场景，比方我来用这个按钮，我就知道点了过后要干什么， 就是这个场景吗？那以前怎么处理的？是不是注册事件啊？那么在这里是一样的道理，对这一块的处理要分为两步， 现在呢，我们有个复组件，有个直组件，直组件就是倒计时，复组件呢，就是 app。 我们第一步要做一个试卷注册，我们需要用一种方式，把一个函数和直组件的某件事进行关联，看吧，啥意思啊？把一 个函数和某一件事进行关联，这就叫做事件注册。当以后不是说现在，以后发生这件事的时候来帮我运行这个函数， 就这个意思说，第一步要进行关联，那么如何关联呢？在 view 里边使用这样的语法进行关联，你看这是在使用直组件，对吧？这是在绑定一些属性， 那么我现在要进行关联了，用事件注册的语法即可。一样的把某件事什么事呢？由于是我们自己写的主见，这件事的名字呢，可以自定义的，你自己想一个名字想好，比方说 over， 当这件事发生的时候，跟一个函数进行关联，那么你需要写个函数 啊，函数的名字当然可以随便取啊，那么这里呢，就把函数给他写上，这种代码的同学们肯定写过，是吧？跟之前的没有什么区别，你可以直接写个函数，也可以写个 函数，调用表达式也可以啊啊，这是第一步。当然呢，跟过往的经验一样，这个函数现在运行吗？肯定是不运行的呀，怎么可能一开始运行，他只是告诉以后，如果说发生了这件事，那我就要运行这个函数。那什么时候发生这件事呢？副主见肯定不知道，但是子主见知道， 当执主件发生了某一件事的时候，就告诉副主件，我有一件事发生了，你去处理吧。那么对应到代码里边，就是当执主件发生的某一件事的时候，通过某一种方式 触发事件。怎么触发？通过一个函数叫 amaz， 第一个参数就是事件的名字，你不能随便乱写。那你这样写的话，就相当于是告诉副主见，我有一件事名字叫 a b c 发生了。副主见一看，这个 a b c 是啥事啊？我好像没有对应的处理，说这个名字呢，要对应哈， 要告诉副主见，我有一个 over， 这件事情发生的表示倒计时已经说结束了，我通知你一下。哎，副主见一收到这个通知吧，之前由于把这件事关联到一个函数里面去了，他就会自动触发这个函数的执行，你看对应事件发生触发关联，函数的运行刷新 三二一结束了，结束了，是谁打印的？是副组件打印的，哎，这就非常巧妙的完成了，关注点分离， 夫主见最清楚要做什么事情，那你去做子主见最清楚什么时候发生，那你去触发，这就是个通知，就相当于是子主见发生的这件事，给夫主见一个通知，夫主见触发相应函数的执行就这么简单。 而且有的时候呢，他在通知的时候可能还会带一些数据，比方说实际的倒计时时间，因为我们用 cs 调号，最终产生的时间间隔呢，可能跟实际的倒计时呢，有一些些许的差异。我把这个信息呢也告诉你，在 m 这里边，就可以作为第二个，第三个、第四个、第五个任意多个参数往后边传，你看用的是剩余参数，把一些相关的信息传过去，那么这边呢，就可以通过函数的参数来进行接收 啊，结束了可以打印一下子，点微信啊，刷新二一就结束了。拿到这个信息了，反正你要跳转就跳转，在这里写代码就完事了啊，那么这个玩意没什么好说的了，你想写什么代码就写什么代码啊，跳转就跳转了。 像这种事件啊，无论是将来我们去使用别人写的组件，还是我们自己封装组件，都是非常常见的啊。那么再来一个例子，这里呢，我们使用了一个星级评分组件，这个星级评分组件里边有一个问题，什么问题呢？就是当我们去点击改变这个分数 的时候，他会爆一个错误，这个错误的同学们肯定见过，表示这个组件呢，在直接修改属性看一下吧， 你看在点击事件里边再重新修改这个 value， 但是不好意思，这个 value 呢是一个属性属性，是不能被组件直接修改的， 那么这种情况怎么办呢？我们就可以利用事件，当你要做这个分值修改的时候呢，我告诉副主见一声啊，我亲爱的父亲，这是你的数据，我把新的值告诉你，到底要不要修改，怎么修改你说了算吧，谁的数据谁该处理，扔出事件自己不处理了。 那么对于副组件而言呢，在用这个组件的时候，我知道他有一个事件名字叫做了 change， 当词改变的时候呢，我对应到一个函数来处理，比方说我们写个函数啊， handle change， 好，在这里写个对应的函数，我知道他会给我传递一个 n， 是吧？然后呢， 我们把这个 n 呢复制给 z ct 示范保存，刷新。再来看点击是不是没问题了？点击没问题了，点击没问题了啊，当然了，我们发现这个代码比较简单，也可以省略这个函数， 直接在这里竖起，无非就是给他重新复制嘛，复为多少呢？复为那个事件参数 event， 再来点击，点击是不是也没问题？好，这就是逐渐事件的基本概念以及它的用法。

大家好，今天呢开始我将教大家利用我们这个互联网开关模块提供的二次开发接口，制作一个互联网应用来控制这个互联网开关。在开始之前呢，我们要把这个互联网开关模块的网络配置好， 确保可以通过手机或电脑控制端对这个模块进行远程控制。 这个模块呢我已经添加好并配置好网络了，那我们点击开关测试一下，看看是否可以远程控制好是没有问题的。好，接下来呢 我们要搭建一个运行环境，我们这个环境需要的工具呢就是这个 asps vip， 这个 软件。好，我们打开百度， 在搜索栏这里呢输入这个软件的名字， 第一个就是了， 点击本地下载，然后我们在普通下载地址这里呢，随便找一个连接下载，放到桌面就可以了。 好，下载完成，我们右键把它提取出来。 好，提取完成， 我们继续打开他的文件夹， 找到这个 asp 服务器，点 ex 一文件，这个呢就是需要运行的，我们直接双击运行 啊，运行成功之后呢，在右下呢，我们会看到他的一个图标，就说明这个服务器已经运行成功了。好，接下来我们测试一下我们的环境是否成功，我们右键新建一个文本， 打开这个文本输入，你好 保存 关闭，然后呢我们把这个文本呢的名称修改一下，改成 i n d， e， x 点 htnl。 好，修改成功。接着呢我们在浏览器这里输入幺二七点零点零点一，然后一个斜杠 index 点 htnl 回车，这样的话我们就可以打开我们刚刚新建的文件了，这里显示的是乱码，是因为他的编码没有对，那我们在空白处右键 把编码呢设置为 upf 杠八，这样我们就可以显示成功了啊，就说明我们这个运行环境呢，已经成功搭建好了。接下来 第二步生成一个接口，生成接口怎么生成呢？我们打开控制端，我们打开官方的控制端， 这个是我现在手上的这个模块，这个大图标下面呢是他的设备编码，也就是 uid， 我们把这个 uid 复制一下，因为等一下生成接口的时候需要用到。好，接着在左边这里呢，点击打开 api 测试，好 在接口类型这里呢，我们选择 pose， 接下来这这些 k 啊，这些东西呢就默认就可以了。 然后在 devuid 这里呢，输入设备的 uid， 也就是我刚刚复制到的那个设备 uid i o t i 这里呢输入 io 零二，如果需要其他的接口呢？我们这里问号，点击问号呢，这里会有提示的，有各种设备可以调用的接口，都在这里了， ok， 然后 io values 这里，我们输入一， 随便输入，我输入一个，一好提交请求， 拉下来，我们就可以看到生成了三 个代码，第一个是 tcp 代码，这个我们不用。然后第二个是 js 六乘一直接运行代码，这个也不需要。 历程二，点击按钮触发运行代码，这个就是我们需要的。我们把这些接口复制 回到我们的刚刚服务器的跟目录这里，服务器的跟目录这里也就是 sp 服务器这个跟目录， 这个是文件呢，刚刚我们测试生成的一个文件，我们现在需要把它修改一下， 右键打开方式，我们用记事本的方式打开，如果你们 这个列表没有记事本这个应用呢，就选择其他应用， 然后呢这里会有一个记事本， 把这个始终用此应用打开 html 文件，这个勾上，好确定，这样的话我们就可以用记事本来打开我们这个文件了，把这个你好删除，把刚刚 复制到的接口代码粘贴到这里来， 点击保存 关闭。好，这样呢我们第一个小应用呢就电力完成了，这里要注意 下，我们看一下代码，这里我们看一下代码，这里我们接口代码这里有一个提示，这要是运行的域名，必须要与用户中心域名绑定的域名一致啊，用户中心在哪里？在这里 我们点击，然后呢域名绑定是这个，那这里应该怎么写呢？我们是暂时先不管他， 好，我们打开浏览器，输入幺二七点零点零点一，斜杠 ind1s 点 htnl 啊，这是乱码的，我们把这个编码呢修改成 utf 杠八啊，这 这个呢就是我们这个接口运行的地址，幺二七点零点零点一，这个就是我们的域名，运行的域名我们复制，然后回到 互联网管理平台用户中心这里，我们把绑定的域名改成幺二七点零点零点一，为什么要写这个呢？因为我们这个接口呢是通过这个域名进行运行的， 所以我们要把这个域名呢告诉接口，告诉这个服务器接口说我们要通过这个域名来访问这个接口啊，是一个安全性的一个设置，如果你们，如果你 我们这个文件是放在其他的服务器上面去，因为这个是我们本地的服务器吗？如果你要放在一个实际的服务器上面有自己的域名，那我们就需要把这个域名 啊，同时也写在这里，把这个幺二七点零点零点一呢修改成一个正式的域名，这样就可以正常的运行了。那好，修改完成之后呢，提交保存 好，保持成功。接下来呢我们就来测试一下是否可以啊？控制这个模块，点击修改开关状态， 现在是一是关闭的，然后再点击一次零打开，这样我们第一个互联网 应用呢就这样建立完成了。好，下一期呢我会教大家获取这个模块的一些数据和进一步的深度开发。