如何入门微信小程序开发,有哪些学习资料?？
夜雨的尾巴 优艾设计网_设计百科 2022-05-30 20:10 周末关于微信小程序的总结，原地址: 一张图看微信小程序
墨染曦 2022-05-30 20:12 来个如何深入理解框架好了《这【五篇】文章将带你深入了解「微信小程序」》
「微信小程序」剖析（一）：运行机制
本文从‘微信web开发者工具’ IDE 中的代码下手，对「微信小程序」如何与 IDE 之前进行交互做了详细的介绍。并介绍了 IDE 如何将 WXML 代码和 WXSS 转换为对应的 HTML 和 CSS ，以及如何打包的一些基本情况：日期命名的wx文件、1M 大小的文件限制、APP 上传地址。
「微信小程序」剖析（二）：框架原理
文章对 MINA 框架进行中的 APP 与函数间的关系进行了分析。从 WX 标签到 Virtual DOM 生成的方法，以及程序如何调用这个方法来生成 Virtual Dom 。并由其中的 exparser 部分来推理出，小程序由 WebView 和 Native 两部分组成的机制。以及在开发时、运行时，两种不同的 JavaScript 文件机制。
「微信小程序」剖析（三）：让小程序运行在Chrome浏览器上
文章展示了如优艾设计网_平面设计何在普通的浏览器上运行「微信小程序」应用。并使用 Gulp 结合‘微信web开发者工具’中的vendor文件 wcc 和 wcsc 来构建自动化的转化 WXML 和 WXSS 为 HTML 和 CSS，从而搭建独立于开发者工具的开发环境。
「微信小程序」剖析（四）：原生的实时DOM转Virtual DOM
本文介绍了‘微信web开发者工具’中所使用的 WCC 文件的一些技术原理。即它可以将 WXML 文件转化为基于 JSON 的 Virtual DOM。以及 Virtual DOM如何去解析这个 JSON 文件，并在这个过程中进行数据绑定和函数绑定。
「微信小程序」剖析（五）：创建一个兼容「微信小程序」的Web框架
本文介绍了如何创建一个可以兼容「微信小程序」的Web框架。这个框架可以将简单的 HTML 转为 Virtual DOM，并在 JSON 时将数据填充进去。还介绍了简单的函数绑定等等。
360U2856485857 2022-05-30 20:13 优艾设计网_设计圈 先学点基本的js，然后等着开始大规模公测吧，准备做点视频讲一下怎么做小程序
含笑的冰 2022-05-30 20:13 为了更好的服务开发者，腾讯云已经提供了几个小程序开发示例，有兴趣的可以看下。地址：https优艾设计网_在线设计://www.qcloud.com/act/event/yingyonghao.html
凤舞天涯-云 2022-05-30 20:14 1、小程序开发文档https://mp.weixin.qq.com/debug/wxadoc/dev/index.html2、小程序设计指南https://mp.weixin.qq.com/debug/wxadoc/design/index.html3、小程序开发者工具https://mp.wei优艾设计网_Photoshop交流xin.qq.com/debug/wxadoc/dev/devtools/download.html
杜文君 2022-05-30 20:15 10月16日更新Treehouse 35小时学习体验。/*********** What ************/前面的知友也提到了，小程序大部分和前端开发类似，所以，入门可以去学 前端开发入门： HTML, CSS和JavaScript的入门课程。因此本文不是小程序完整资源，更适合那些零基础，或者入门新手来自学，而非针对那些已有一定编程背景的。
很多微信小程序的文章分析指出，可能会让前端开发程序员更抢手。而不仅仅是程序员能从中受益，对于产品经理、营销运营和自媒体作者，学习前端开发也是非常有益的。（冯大辉的 如何把握「微信小程序」这一波红利？ 李笑来的 微信小程序是谁的“通往财富自由之路”？）
微信小程序大部分和前端开发类似或者通融，都是 HTML, CSS和JavaScript的入门课程。所以本文，也就对目前市面上，Web前端开发入门的公开课作为一个资源汇总吧。适合任何想入门前端开发的人，尤其是针对零基础小白，推荐理由中做了些解释和必要的删减。推荐中很多都是系列课程，并不需要学完全部，所以正文也在标出了HTML, CSS和JavaScript的入门 部分。本文咨询了南京大学计算机系的研究生，参考了知乎、Quora 的问答，以及过往学习者、资深程序员的点评，笔者查阅了相关课程的学生评论，尤其是差评，并且自己注册，初步体验部分课程，从而完成这篇总结评测的，但个人能力有限，若有疏漏错误，还望指正。文章太长，写完自己都没耐心看了，建议看“太长不看版”。/*********** 太长不看版 ************/注： 只能接受中文资源的，请直接拉倒结尾，抱歉只评测了一个中文资源。因为在我看来，有相当多的英文资源都非常优质好太多，仅从编程上说，是完全新手友好适合入门的。可以试着上treehouse的课，然后用中文参考着看，本身也是对英文的提高。所以对于那些不能使用英文资源的表示可惜，当然也十分建议打磨下自身英语技能，同样是非常有用有价值的投资学英语有什么用？ - FreeGrit潇洒毅行的回答。
所以对于英文不够的，此文提到的大部分，当然不能当做入门资料了。请直接跳转结尾。
非常推荐以下3个，可以按需选择一个，或者几个同时学习。1. Treehouse | Tracks 里面的 的 Front End Web Development 最推荐，非常适合零基础新手（所有课程之最），交互式有趣的学习体验，游戏化的点数、成就系统，甚至让我开始的时候学上瘾了。同时学习社区很活跃，提出的问题几小时内就收到答案。2. Udacity 的 前端工程师（英文）由Google等公司合作制作，高质量，以实战项目为导向的课程，基础课程免费，适合有一定编程基础的。但若要参与的实战项目，收费较高。3. Coursera 上 约翰霍普金斯大学的 HTML, CSS, and Javascript for Web Developershttps://www.coursera.org/learn/html-css-javascript-f优艾设计网_Photoshop论坛or-web-developers
课程和Quiz都免费，在Coursera同类课中，好评率第一，1700+的学生中，仅4个差评，很适合新手，并且会讲解一些实际项目的要求。
以上都是全英文授课，仅有英文字幕，但课程的质量非常优秀。必须要中文资源参考的，可以参考正文部分第三类，中文资源。对于有一定基础背景的，默认具有了科学上网、搜索技巧，可以在以下资源站按需搜索。1. Udemy 付费2. Udacity 基础免费3. Coursera 基础免费4. Edx 免费，但开课时间有限制5. Lynda 付费6. Treehouse, codeschool, codecademy月费/年费========其他可能有用的资源：1. 编程领域的知乎： Stack Overflow2. 开发工具（编辑代码和编译的工具）：WebStorm (凭借edu邮箱，可免费使用 https://www.jetbrains.com/student/ ），Sublime Text 3
3. 搜索类：一颗懂得搜索的心 + Google + 百度（中文，或者网盘资源）
4. Learn to Code and Help Nonprofits FreeCodeCamp （@LALH 推荐） 免费的课程，实战项目，很强的互动，顺带还能做公益。/*********** 完整评测版 ************/正文评测导航：（详细评测还在更新完善中...）第一类： 交互式，在线编程课程第二类：传统英文公开课第三类：中文资源================第一类： 交互式，在线编程课程评测的主要是Treehouse, codeschool 和 codecademy，这些相比于国内外公开课平台，有时在于都可以在线编程，及时反馈结果，对新手很友好的交互式指导，比如会提示你具体哪步错了。并且相比Coursera等理论型的公开课，这三家会加入实战项目，更强调实操训练。三家各有利弊，个人倾向Treehouse.1. Treehouse | Tracks里面的 Front End Web Development 10月16日止，共在这学了35小时。本身教学质量就很高，而且对零基础新手非常友好，相比Coursera，一开始省去了开发环境安装的过程。很多细节做得很棒，每个视频的提问，智能填充代码等，相比另外两个网站更便捷，学习体验更好。同时还有积分、排行榜、徽章等游戏化的系统，会让学习者觉得有趣，获得成就感、掌控感。除了学习体验比另外两家更好些，其课程的结构，是以职业职责划分的，成为Tracks，包含多种需要的语言，而其他两家是以语言划分的。每个Track，含有一系列1-8小时的小课程，比如下图第一个前端网页开发（也就是我们需要的入门课程），整个系列就需要70小时。视频下有课程的重点笔记，名词解释，额外的资源等。并且会给出windows和mac不同系统下的快捷键操作。每看完一个视频，就会出现前几天的学习记录，激励你趁热打铁。并且会增长相应的“技能点”，解锁一些成就。需要通过每个章节的Quiz，你才能拿到成就社区比较活跃，课程中不明白的地方，可以在下面提问，就像知乎一样，可以邀请同学，或者工作人员（moderator）,好几次，都是1小时内就给出答案了。可能的一些缺点是，Code Challenge 的答案比较唯一，而且只能按照规定的一步步来，不过后面习惯了就好，也能发现自己具体哪一步错了。这里code challenge 和 quiz 你是无法看答案的，自己做不出来，就去前个视频下面提问，其实已经存在很多和你一样的问题了，浏览这些问题和回复，也能学到很多。相比之下Codecademy的正确答案更多样化些。使用Treehouse每个月25美元，可以免费试用7天，不喜欢就退订。用这个链接，可以第一个月50%优惠：Plans & Sign Up2. Codeschool 其path 中的 HTML/CSS ， JaveScriptLearn HTML and CSSJavaScript programming: JavaScript for beginners只有极其少数的课程免费，29美元/月。界面颜值很高，但个人认为学习体验上不及treehouse，习题有些重复冗长。同样的，有积分、成就系统，每个测试满分250分，当你提交前使用答案会扣除一定的分数。有时候字幕会遮住视频中的操作。并且有人反应，国内上Codeschool的视频，一些会加载很慢。下图是Codeschool的小测试界面，每题满分250分，每次查看提示（答案），会扣除一定的分数。和另外两家一样，也给出了在线编程-及时反馈的功能。有些不方便的是，虽然直接提供了回看视频的链接，但需要整个页面回过去，无法一边回看一边编程。这点上，codeacademy就更好些。Treehouse由于编程窗口永远是新开的，可以一边看视频一边编程，但Quiz的时候同样不能直接返回。3. Codecademy, Learn to code其中的 HTML & CSS | Codecademy （就是默认推荐你学习的第一个课程），之后再学Introduction to JavaScript所有基础课程免费，附加服务20美元/月秉承练习是学习编程的最好方式的逻辑，所以哪怕是一个很小的知识点，Codecademy 也会给你一个个操作的指示，直接通过实际操作来学习。同样是交互式的学习方式，但是教学主要通过文字指示，而非视频那么直观，因此学起来可能更枯燥些。相比之下，优点是，练习题中的答案比较多样化，而treehouse会更严格。============第二类：传统英文公开课传统公开课，主要以视频教学为主，含有在线答题Quiz测验，但没有交互式学习那样对新手非常友好的指导。并且更多需要学生自行阅读课外材料，搜索来解决问题，对学生的自学能力有更高的要求。因此建议零基础的，可以至少参加一个交互式学习，然后可以依需求选择相应公开课。1. Udacity 的 前端工程师（英文）其中前2-3个项目的5-7个相关课程，属于入门类，多带带上这些课程是免费的，参与实战项目需要付费。付费服务还包括结业证书，一对一辅导等。注：视频在国内可能无法观看。课程是Google Amazon等企业联合制作的,并且是以实战项目为导向的，网上的评论都非常认可Udacity的质量。2. Coursera 上 约翰霍普金斯大学的 HTML, CSS, and Javascript for Web Developers
https://www.coursera.org/learn/html-css-javascript-for-web-developers
学生评分 4.
Quiz 小测验免费。
耗时：5周，4-6小时/周
1700+的学生评论，只有4篇差评，并且一些是学生自身的问题，比如有学生期待所有的都由老师解释，而不是自己去搜索。
好评大多集中在，课程的结构易于理解，上课方式非常棒，很有趣，非常适合新手，并且会和你讲解实际项目中的要求。另一个很大的优势是，相比于大多Coursera的付费Quiz测试来说，这门课的Quiz全免费。
Coursera上还有3门前端开发的入门课，但评价都不及上述约翰霍普金斯大学的。 a. 伦敦大学的Responsive Website Basics: Code with HTML, CSS, and JavaScript学生评分 4.
耗时，4周，2-4小时/周
Quiz小测验免费。
差评集中于，原本期待中级课程的学生，会失望的觉得太简单。对于完全新手来说的问题，主要是测试中的一些题超纲，并且因为不知道术语，难以用google搜索到。
b. 香港科技大学的HTML, CSS and JavaScript
学生评分 4.7 /5
Quiz 小测验需要付费。
耗时：3周，3-7小时/周
全英文，有英文字幕，是全栈工程师专项系列的第一课。综合评论来看，对于有一定编程基础的，会比较容易。相比伦敦大学的课，内容更多更详细些。
负面评论主要集中在，对于一些有背景的学生，这门课过于简单、重复，而对于完全的新手，感觉这门课上的有些快，并且会有些过于理论学术化。
c. 杜克大学的Programming Foundations with JavaScript, HTML and CSS
学生评分 4.
Quiz 小测验收费
耗时：4周，3-7小时/周
这门课评分最低。差评集中在，不适合新手，课程解释不清楚，简单问题复杂化，Quiz小测验和课程相关度低。并且差评中也出现了一个17年的码农，他也认为这门课对新手极其不友好，连他这样有编程背景的，每周耗时都需要10小时/周，是宣传上的2-3倍。
3. Udemy
Learn HTML: Web Design for Beginners
JavaScript programming: JavaScript for beginners
这两门都是人气和评分排名较高的，涵盖了HTML CSS和JS，也可以自行在Udemy上搜索综合课程。Udemy上的课都是付费的。
Udemy上 也有很多丰富的优秀资源。不过局限性在于：
所有课程收费，一套20 - 40+小时的课程，价格为100-200美元左右
那些学习人数多，评分高的，大多是一整套课程，因此对于初学者来说，在学人数多的高分的入门课程很少见。
由于教学视频大多数是个人制作，同一课程有很多教学视频，对于新手来说难以辨别好坏，基本只能根据评论数、评分来选择。所以相同价格，在Treehouse, codecademy, codeschool 这种更权威专业的平台，会有对新手更友好、高效、高质量的学习体验
4. 其他
edx上课程较少，并且有些课开课时间是固定的，无法立刻上。Lynda都是付费，一些学校是购买资源的，学生可以免费用。
========第三类：中文资源1. 慕课网 的 Web前端工程师 路径，前三块：HTML和CSS基础，JavaScript语言，jQuery2. 手册类自助查询学习： w3school 在线教程中文类搜集的比较少，因为英文类的做得非常出色了，而且大多英文课程并没有想象中那么难，并且有英文字幕，当然首先推荐英文资源了。同时也欢迎补充中文类学习资源。===特别鸣谢，南京大学计算机系的X同学，像开发工具的推荐，几大课程的推荐都有他的功劳。参考文献知乎-WebStorm 有哪些过人之处？ WebStorm 有哪些过人之处？ - 前端开发
wiki
百度百科
Treehouse, Codeacademy & Code School
相应课程下的学生评论
https://www.quora.com/What-do-professional-developers-think-of-online-programming-courses-such-as-Codecademy-or-Code-School
========这两天废寝忘食地搜集整理，体验评测，当然也是为了自己去学。写完这篇资源汇总贴后，已经组织了个学习社群，大家互相督促一起组团学。感兴趣的可以加个人公众号ID： FreeGrit , 回复“JS”。会定期清理打杂人员，10月16日，已剩18人。FreeGrit是一个关于效率习惯、英语、理性读书的原创公众号。FreeGrit的个人简介
加载中,请稍侯......
精彩评论