2016-11-06 18:20发布
「微信小程序」剖析（一）：运行机制
本文从‘微信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 时将数据填充进去。还介绍了简单的函数绑定等等。
很多微信小程序的文章分析指出，可能会让前端开发程序员更抢手。而不仅仅是程序员能从中受益，对于产品经理、营销运营和自媒体作者，学习前端开发也是非常有益的。（冯大辉的 如何把握「微信小程序」这一波红利？ 李笑来的 微信小程序是谁的“通往财富自由之路”？）
所以对于那些不能使用英文资源的表示可惜，当然也十分建议打磨下自身英语技能，同样是非常有用有价值的投资学英语有什么用？ - FreeGrit潇洒毅行的回答。
所以对于英文不够的，此文提到的大部分，当然不能当做入门资料了。请直接跳转结尾。
https://www.coursera.org/learn/html-css-javascript-for-web-developers
课程和Quiz都免费，在Coursera同类课中，好评率第一，1700+的学生中，仅4个差评，很适合新手，并且会讲解一些实际项目的要求。
2. 开发工具（编辑代码和编译的工具）：WebStorm (凭借edu邮箱，可免费使用 https://www.jetbrains.com/student/ ），Sublime Text 3
3. 搜索类：一颗懂得搜索的心 + Google + 百度（中文，或者网盘资源）
2. Coursera 上 约翰霍普金斯大学的 HTML, CSS, and Javascript for Web Developers
学生评分 4.9/5
Quiz 小测验免费。
耗时：5周，4-6小时/周
1700+的学生评论，只有4篇差评，并且一些是学生自身的问题，比如有学生期待所有的都由老师解释，而不是自己去搜索。
好评大多集中在，课程的结构易于理解，上课方式非常棒，很有趣，非常适合新手，并且会和你讲解实际项目中的要求。另一个很大的优势是，相比于大多Coursera的付费Quiz测试来说，这门课的Quiz全免费。
学生评分 4.5/5
耗时，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.4/5
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都是付费，一些学校是购买资源的，学生可以免费用。
知乎-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
笔者注：本文来自于迅雷首席工程师刘智聪的个人分享，他毕业于南昌大学化学系，加入迅雷后设计开发了多款迅雷核心产品，凭借“大规模网络流媒体服务关键支撑技术”项目获得2015年国家科学技术进步奖二等奖，同时也是第四代UI交互技术-----BOLT 界面引擎的发明人，目前担任WebApp解决方案商--火速移动的首席技术顾问。
21号晚上正和朋友一起打牌，难得的小七对刚刚定口，突然间手机传来了“叮咚”的消消息提示音，随后就是“叮叮，咚咚”的连续震动。打开手机一看，微信上一堆人发信息给我，先是一篇《微信应用号来了》，然后就是：“你怎么看？”
虽然之前曾经得到过消息说“微信应用号”会在年底发布，但没想到居然来的这么快，而且还改名叫“微信小程序了”（简称小程序）。已经无心打牌，赶紧完成一吃三后速度回到电脑前开始了持续几天的研究。而且这几天里各种相关资料都开始相继出现，内测用的开发工具也有破解版漏出了。
身边已经有不少朋友已经根据资料开始干活了，差不多有如下几类：
1）好好释放想象力，要是能在公测的时候做个有趣的小程序出来一炮而红那就赚大了
2）公司有一打的服务号，其实改成小程序会更合适（管它合不合适，改了再说！）
3）又是一轮洗牌的机会！那个公众号的功能是我先想到的但被别人抢了，这次我要在小程序里第一个做出来并做到第一名！
4）微信果然是互联网的“国务院”，新政策草案刚出立刻引起全行业的连夜研究。这么重要的关头，变革的前夜，我认为正确的做法是“战术上立刻响应，站略上不必着急”。不学习，不了解微信小程序是万万不行的，但立刻根据现在的资料，调整公司的方向，也有点为时过早。毕竟现在还在内测阶段，万一内测结果是“回炉重造”或则“大幅调整”（目前泄漏的资料已经处于正式发布的状态，应该不会大改了），那花在这里的时间都赔进去了还没地哭。所以我觉得对公司来说比较合理的做法是在立刻成立一个短期的临时小组，鼓励对小程序有兴趣的同学加入，一起开发几个有趣的小程序，主要目的就是学习。如果做出来的结果好还能赚一波眼球。等微信小程序正式公测了，再决策要不要把这个临时小组升级成一个正式的产品团队。
这几天通过目前公开的资料我已经对小程序的整体架构有了个初步的认识。我的风格一向是从架构和系统设计的视角做一些深度的，有观点的分析。现在终于可以回应朋友们的问题，谈谈我怎么看了。
微信小程序是什么？
官方这么说：
“我们提供了一种新的开放能力，让开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验”。
听起来非常美好，咱们具体一点，结合目前公开的信息和微信目前其它的开放形式对比一下吧
可以看到，腾讯还是非常有诚意的，这次在微信小程序上新开放的能力很多，不再是渐进式的演变而有一点像革命了。
小程序的入口在哪？
目前公开的资料里对大家最关系的入口问题只提到了小程序可以扫二维码打开，于是业界对小程序的入口有了这么几种流行的假设：
假设零：朋友圈，朋友可以把自己喜欢的小程序分享在朋友圈，看到了可以点击打开直接使用。
[配图1]
可能性:99%。小程序不能出现在朋友圈，流量从哪来？
假设一：出现在发现tab页面中，游戏下面（每个小程序占用一列），同时摇一摇也可以得到附近的小程序
[配图2]
可能性:80%。和一把腾讯的游戏挤在一起，不亏待你吧。
假设二：和当前的公众号、服务号类似，安装出现在会话列表
[配图3]
可能性:90%。新的开放能力和旧的开放能力用一样的入口不奇怪吧。
假设三：安装后和native app一样，直接出现在桌面
可能性:10%。和微信在同一级入口，腾讯同意Apple都不一定同意。
假设四：微信多一个小程序的tab
[配图4]
可能性:1%。多一个tab太丑了，而且小程序刚发布，不可能立刻就对微信的整体结构产生影响。
假设五：出现在一些内置流程中（比如和好友的聊天界面内，发朋友圈的界面（拍照后处理）
[配图 5]
可能性:1%。小程序和微信本体使用不同的框架技术开发，互相嵌套有困难。
微信小程序框架浅析
官方已经正式公开了小程序的开发资料（https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474887501556），小程序的开发框架包含两大块内容，分别是：API 与 组件。官方的资料在组织和内容上都写的还不错，阅读体验也很顺畅，没看过的话推荐先简单的通读一遍。基本上有一定经验的前端开发都可以没有什么障碍的掌握目前资料里的内容，我就不去做入门性的介绍了，直接浅析吧。
先看框架的底层API部分。微信一直有一个贯穿的"JS-SDK"在不断演进。对比一下小程序的底层API的功能范围，和JS-SDK还是有很多相似的感觉，相信未来会在形式上达到统一(JS-SDK这名字也足够霸气，塞进去什么都不会觉得奇怪。不过JS-SDK的很多接口设计的实在不敢恭维，希望这次统一的进程也能重新修正下)。小程序的API部分由于可以跳出浏览器的框架，理论上肯定可以是JS-SDK的超集。
这里面我觉得比较有意思的地方有：
>>网络通信
只要目标服务器的域名在小程序配置的安全列表之类，就可以直接通信。不用考虑js的跨域问题了。
既然跨域都支持了，没准以后能像nodejs一样，直接在小程序里使用tcp,udp协议，并基于buffer有一定的二进制协议的开发能力。跳出HTTP协议的框架，对于IoT方向是很有想象空间的。
>>数据缓存
数据缓存接口的设计看起来和 HTML5里的localStorage基本上一样，本来没什么好说的。但文档里的一句话引起了我的兴趣：
“注意： localStorage 是永久存储的，但是我们不建议将关键信息全部存在 localStorage，以防用户换设备的情况。”
难道微信提供的数据缓存能力虽然不是永久的存储，但可以做到跟随用户账号而不是当前设备？ 也就是说，不管用户怎么换手机，已安装使用过的小程序都能使用同一份缓存（不存在不登陆使用小程序的场景）？虽然微信自己的聊天记录跨设备漫游都没做，但这种app personal file cloud的支持，还是能在不增加开发的工作量的情况下，大幅提升用户体验的（作为一个steam的重度用户我已经完全离不开游戏存档的自动同步功能）。这也让我对小程序在云端的能力，开始有了一些初步的想象。
>>并不兼容一些常见js底层框架
小程序的官方QA里有一段话：
“zepto/jquery 会使用到window对象和document对象，所以无法使用”
这意味着所有基于HTML5的已有底层代码资产，并不能完全无缝的迁移过来。不过连jQuery这么常用的库都不能兼容还是有一点伤的。当然，现在用裁剪或兼容的方法，提供能在小程序平台运行的常见js底层库，短期内会很有市场。
MINA框架剖析
接下来我要解读微信小程序提供的界面部分功能，也是最令人兴奋的部分。一个小程序，必须基于MINA框架（从泄漏的资料里得知这个框架叫MINA,正式的资料里删除了这个名字，但为了后面行文方便，我会一直把小程序的应用框架称之为MINA）构建。一个典型的小程序的结构如下：
[配图7]
app.json 小程序配置：
小程序里一共包含哪些页面。
页面套在一个怎么样的 window里显示。
window是否需要支持多tab,支持的话每个tab的默认page是什么。
一些底层组件的默认参数。
app.js（可以理解为入口函数）
处理app的几个关键事件:onLaunch,onShow
定义了app级（可以在不同的页面之间共享）的数据的格式
app.wxss 公用样式表
每个页面的样式表，都是从这个应用级公有样式表继承下来的。
MINA一个最主要的核心概念是Page，一个Page是应用内可以导航到的最小粒度的界面。而如何构建Page是与大家过去猜测差别最大的地方。微信并没有使用HTML5，而是提供了一套新的设计。新的设计要求每个 Page由3个文件构成：
index.js :包含Page的逻辑处理代码
其中比较重要的就是定义Page的数据（wxml可以通过数据绑定机制直接访问）
index.wxml : Page的布局文件
随便从demo中选一个布局文件来看，其整体结构非常简介清晰，即使没有提供任何资料也大概能看出来表达了一个什么样的页面。
.wxml不算是完全的静态布局文件，还支持条件渲染和列表渲染。
.wxml使用{{}}语法来简单直接的支持数据绑定。
可以通过template的方法进行复用
index.wxss: 样式表
决定了在wxml中定义的各种组件最终应该如何显示。官方文档并没有列出wxss的selector语法和支持的style，只是说“具有CSS的大部分特性”，wxss样式表里也扩展了一些微信小程序专用的样式是属性。
Page的整体设计上有比较明显的“反应式”编程风格，相信有vue.js,angularJS，reactive.js开发经验的同学可以很快上手。由于没有内测资格所以没法在手机上测试性能，不清楚小程序的这套框架有没有反应式编程常见的性能问题。这个等公测后写个有10万条数据的列表，看看滚动流不流畅就知道了。
目前demo没有使用ES6，所以看起来没那么“现代化”，这也可能是因为小程序这个项目立项比较早的缘故吧。不过ES6是大势所趋，相信未来小程序会支持使用ES6开发。
一个基于MINA的小程序最后是如何跑起来的呢？
“开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。”
网上已经有不少人通过琢磨开发工具的实现的方法，做了比较深度的研究了，推荐阅读：
(微信小程序「官方示例代码」剖析【下】：运行机制 微信小程序「官方示例代码」剖析【下】：运行机制)
简单的总结一下：
wxml文件通过编译会得到html，wxss 文件通过编译会得到css，分离的各个页面的JS和App的主JS文件最终会打包在一起得到App Service。 开发状态下运行小程序，基于blink内核，每个html会加载一些moko js用来支持框架功能。生产环境在手机上估计是运行在一个专用，定制的浏览器内核中。
为什么是MINA?
业界对目前微信使用的UI框架，有两种截然相反的观点：
微信“小程序”带动HTML5发展 数据波来助力 微信“小程序”带动HTML5发展 数据波来助力-CSDN.NET
“微信小程序的本质说来就是一个HTML5应用”
“以后互联网的发展方向可能更偏重于HTML5”
而有的人又认为
我们真的需要“小程序”么？| HTML5老兵如是说 我们真的需要“小程序”么？
“微信虽然用了 HTML5 技术来做应用号（正式名称：小程序），但是它并没有真正用到 HTML5 的精髓——开放、互联，也就决定了它可能无法实现“微信OS”的最终野心。”
这两个观点是矛盾的，那么，到底那种观点是正确的呢？首先简化一下问题，微信小程序是基于HTML5开发的么？
通过分析小程序的运行原理，这个答案是明确的：小程序的开发过程会用到大量HTML5相关的技术,但并不是使用HTML5开发。有 HTML5经验的前端工程师学习微信小程序的开发相对会更容易一些。微信小程序的运行并不需要一个完整支持HTML5特性的标准浏览器内核，但也可以通过添加一些辅助设施，让小程序在个完整支持HTML5标准的浏览器上运行起来。
“由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。” 也就是说，一个已存在的HTML5页面，并不能通过自动转换工具变成一个合法的Page，而需要有工程师根据HTML5页面的功能，使用MINA框架再实现一次。
[配图 HTML5与MINA在功能上有交集，但并不相等]
搞清楚MINA和 HTML5的关系后，我们还是没有搞清楚为什么微信要提供一个新的MINA框架 。事实上这个问题是一个讨论设计的问题，所以要回答这个问题，需要具备一定的设计能力，而不是只是停留在研究MINA实现的层面。而设计能力，是一种比较稀缺的能力。
想要系统的提升自己的设计能力，简单的来说就是“多看+多想”，那么如何多想呢？我有一套还算完整的方法的，简单来说有如下几步：
首先，在研究一个新东西以前，先想想这个新东西，是为了解决什么样的问题出现的。问题要多提，往深了提，反复提炼，最后得到几个好问题。或则从一个问题，引申出一些子问题。很多时候只要问题提对了，设计就明白了大半。
下一步就是试着自己解决一下，回答一下自己提的问题，并比较不同的解决思路的优劣，形成一个对问题解的标准。比如说问题是“如何在一个超长文本中查找子串？” 那么对问题的评价标准就可以是查找速度，以及查找过程中的内存占用。
接下里就是看别人是如何解决这些问题的了。如果和自己的设计差不多，一边窃喜一边开始按自己预先设计的评价标准对别人的设计的好坏进行判断。如果是自己完全没想到过的解法（这通常会出现在第一次接触某个领域问题），可以按图索骥的补充一些基础知识，再回来看。如果这个领域或解法非主流到不是常见范式，那么可以安下心来好好搞清楚，想明白。 这样带着问题研究设计，才能有效的提高自己的设计能力。
介绍完套路后咱们回到正题：我们如何来评价微信小程序选择MINA框架？让我来持续提问吧。
第一个问题：“为什么微信小程序不使用HTML5而是使用MINA来构建Page？”
不用HTML5我可以提供一个非技术答案：微信需要通过这种方法来转化开发者，这些开发者未来会逐渐演变成“微信OS平台”的忠实开发者。其实开发者通常都有患有“斯德哥尔摩综合症”，一旦在一个平台上投入了智力资源进行学习，就会开始下意识的维护这个平台（比如看不到平台的缺点，只看到平台的优点）。如果使用HTML5作为开发方式，那么现在小程序聚拢的开发者都是为了流量来的，并没有投入额外的学习成本，对平台不够忠诚。而微信要成为OS是一个长期的演变过程，那么现在就要通过要求学习一个新的开发框架的方法开始多转化一些忠诚的开发者。
当然是不是这个原因也只有张小龙自己知道了，这是一个揣摩动机的答案，所以没有评价标准。问题终结。
为什么不用HTML5的技术答案可以是非常庸俗的。毕竟业界对于HTML5技术的优劣讨论已经持续了一段很长的时间了。但基本上，大家认为HTML5的主要缺点集中在性能上：同样的交互，用HTML5实现需要更多的系统资源，也可能会不够流畅。同时，应用还需要集成一个非常巨大的浏览器内核。
这个答案尽管能让大部分人满意，但实际上是非建设性的（这些对HTML5性能的结论，是别人告诉你的）。大家一边相信HTML5的美好前景，一边把对性能问题的解决寄托于几家传统的浏览器厂商。按我们的套路，这个性能问题再往深了问是这样的：“渲染指定页面最少需要多少资源？”，“在当前硬件水平下，渲染指定页面最快需要多少时间？”，“实现一个完整支持HTML5标准的浏览器内核，需要大概多少代码？”。要回答这些问题就需要了解浏览器的实现了，这不会是一件容易的事情，在阅读浏览器的实现的时候，肯定会持续提出针对HTML的设计问题。最终你会对浏览器厂商什么时候能解决性能问题，得到一个更合理的预期：至少在5年内，HTML5的性能是不够的。
虽然SAY NO的理由，有一条就够了。但如能从其它角度思考一下为什么不是HTML5,可以得到一些更有建设性的答案。
第二个问题：“MINA作为一个新框架，为什么会设计成现在的样子？”
可以肯定的是，这是MINA的架构师在综合了多个因素后，拿出来的一个自己最满意的答案。所以这是一个非常有建设性的问题，思考这个问题的时候，就开始逐步代入MINA的架构师视角了。
让我们一起进入MINA架构师的角色，首先在否决了HTML5后，要设计一个什么样的框架来支持小程序的交互开发？第一步就是要给这个新框架提一些基础性的目标与需求。
这是一个现代化的框架，在最终表现力上要足够好。
小程序跑在微信里，所以必然是和android,iOS的具体平台特性无关的。
要面向更多的非专业开发者，所以学习门槛要低。
大规模的专业团队进行团队开发时，能有足够的工程支持。工程支持包括：模块化代码易于长期维护和修改。这意味着基于框架的实现具体需求的结果要足够清晰，好读。
可复用性设计。
小程序不需要安装就可以快速开始使用，只需要加载必要的资源就可以尽快展现用户需要的页面。
进一步思考这些需求该如何解决，并对不同的解决方案进行评价需要的领域知识非常多，已经超过了本文的讨论范围。我在这里要做的只是带你入门，让你开始思考设计问题就够了。这也是本文的核心目的：学会对新技术，新设计进行独立的分析和判断。至于结果么，现在小程序还处于一个早期的状态，等公测了之后在下结论也不迟。
微信小程序的未来？
虽然现在小程序开放的功能并不丰富，处于一个早期的状态，但结合上面的观点去看微信小程序的设计，还是能从中读到许多远大的理想。而微信的核心愿景之一是“连接一切”，没准小程序是腾讯实现这个愿景道路上的重要一步。有超过7亿用户的微信如果成为一个新的平台，具有不可忽视的能量，下面让我来对小程序的下一步动作做一些无责任的预测吧。
假设一、微信小程序未来会解决应用内搜索的问题
目前小程序规范的页面结构很方便实现应用内搜索。以后使用微信的搜索功能可以直达小程序内部的某个特点内容页面。
这种规范的设计也方便实现小程序之间的互相访问，可以通过一个类似wxapp://appid/pageid/的URL直接导航到另一个小程序的某个特定页面。这是App时代的超连接系统，App的信息孤岛也许就此打破。
假设二、微信小程序会从本地数据读取开始，进化出一定的云端API.
现在小程序只提供了前端的开发功能，但从整体逻辑上已经包含了应用的上传，审核，发布流程。
以后腾讯也许会为小程序提供托管服务（https://www.qcloud.com/act/event/yingyonghao.html），让应用开发者可以用更少的精力完成一个完整小程序的开发，而不需要去管服务器申请，后台开发，服务器运维等反繁琐的工作，进一步降低一个真正小程序的开发门槛。我相信微信一定有团队在为这个方向努力，但最终实现目标需要更有创造力的云端API设计，这是需要有大智慧的工作。
假设三、使用小程序连接一切
我并不认为小程序只是一个体验更好的服务号。张小龙说小程序是“触手可及”，“用完即走”，“无处不在”的。那么什么场景会需要这种能力? 我觉得“有复杂程序的低频商业行为”会有这种需求。举两个实际的例子：
例1：有一间智能会议室，入口处有一个二维码。会议室的使用者扫描后可以打开一个小程序，通过这个小程序可以更好的访问、控制会议室的各种设备，比如灯光，窗帘，幕布等。
例2：去体检，体检表上有个二维码，扫描后打开一个小程序，通过这个小程序可以更好的引导用户自助完成自己的体检项目。
这两个场景的需求能通过小程序解决，意味着小程序的种类极大丰富，硬件厂商对微信生态的极大支持。我们可以通过小程序简单方便的进入各种陌生的环境，让生活更加智能。未来已经悄悄敞开了大门。
而如何更好更快的探索小程序的可能性，也将是我接下来创业的方向。我将以火速移动技术顾问的身份，和小伙伴们一起从微信小程序开始，去探索移动Web的可能性。
感谢各位关心。
「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只发放了 200 个内测资格（泪流满面）。本以为没有 AppID 这个月就与小程序无缘了，庆幸的是微信这两天发布了正式版开发者工具，无需内测邀请也可以尝鲜了。
因此也就有了我与「小程序」的初体验，而我的感受只有一个字——爽！
在知名同性交友网站 Github 上，「小程序」的 Demo 不少，但是大多只是简单的 API 演示，有的甚至直接把页面数据写在了 json 文件里（分明有网络请求 API）。我想体验的是能够将服务端和小程序端无缝连接起来（体验够爽）的项目。最终，我选择了腾讯云官方推出的「小相册」Demo。
「小相册」主要实现了以下功能：
效果演示图（受开发工具的限制，部分功能尚未实现）
COS对象存储服务（Cloud Object Service）是腾讯云推出的面向企业和个人开发者提供的高可用，高稳定，强安全的云端存储服务。可以将任意数量和形式的非结构化数据放入COS，并在其中实现数据的管理和处理。
之所以选择腾讯云的 Demo，一是因为它是腾讯自家推出的，项目的质量有保障；二是因为它是少有的既讲小程序开发，又介绍云端部署的项目。
稍微有点经验的程序员都知道，架构要动静分离，静态文件最好不要放在自己的服务器上，要放在专门用来存储的对象存储服务器COS上，并且用CDN 加速。「小相册」后端采用的是 Node.js，Nginx作为反向代理。
首先，我们需要在本地搭建好微信「小程序」的开发环境。即下载开发者工具。微信官方已经推出了正式版 IDE，大家没有必要再去下载破解版了。打开「官方下载地址」，根据自己的操作系统选择。我使用的是 Mac 版。
安装好之后打开运行，会要求微信扫码登陆。之后，就可以看到创建项目的页面了。
选择添加项目，没有 AppID 就选无（如果乱写会报错，到时可能无法进入项目）。如果你选择的项目目录为空，请如图所示勾选在“当前目录中创建quick start项目”。
点击“添加项目”之后，我们会进入开发工具的调试页面。
接下来，我们下载「小相册」的源码。可以选择直接从http://imgcache.qq.com/qcloud/la/demo-source/qcloud-applet-album.zip下载，也可以从腾讯云团队的 Github 仓库拉取。我推荐从 Github 仓库拉取，这样可以及时获取最新的代码。
git clone https://github.com/CFETeam/weapp-demo-album.git
最终，我们会得到类似这样的文件目录。
简单解释下目录结构：
源码下载完成之后，我们打开微信 web 开发者工具，新建项目「小相册」，选择目录applet（或app）。
在进行部署之前，我们来简单分析一下「小相册」的具体代码。毕竟只看效果不是我们的目的，我们的目的是以「小相册」为例，了解如何开发小程序并与服务端进行交互。
「小相册」包含一个描述整体程序的 app 和多个描述各自页面的 page。主程序 app 主要由三个文件组成，分别是 app.js（小程序逻辑）、app.json（小程序公共设置）和 app.wxss（小程序公共样式表），其中前两个为必备文件。config.js 文件中包含了一些部署域名的设置，现在不用管。
在 pages 目录下，有两个 page 页面，分别是 index 和 album。页面结构算是比较简单的，其中 index 是小程序启动时默认进入的页面。每个页面下，至少要有 .js（页面逻辑）和 .wxml（页面结构）两个文件，.wxss（页面样式表）和 .json（页面配置）文件为选填。你可能注意到了，这些文件的文件名与父目录的名称相同。这是微信官方的规定，目的是减少配置项，方便开发者。
接下来我们以 index 页面为例做简单的解释。index.wxml 是这个页面的表现层文件，其中的代码非常简单，可以分为上下两大部分。
<view> <view class="page-top"> <text class="username">恭喜你</text> <text class="text-info">成功地搭建了一个微信小程序</text> <view class="page-btn-wrap"> <button class="page-btn" bindtap="gotoAlbum">进入相册</button> </view> </view> <view class="page-bottom"> <text class="qr-txt">分享二维码邀请好友结伴一起写小程序！</text> <image src="../../images/qr.png" class="qr-img"></image> <image src="../../images/logo.png" class="page-logo"></image> </view> </view>
页面的演示效果如下：
我们看到，页面上有一个“进入相册”的按钮。正常理解，点击后该按钮后我们就可以进入相册了（这不废话嘛）。那小程序背后是怎样实现该操作的呢？
在 index.wxml 中，我们发现对应的 button 标签上定义了一个 bindtap 属性，绑定了一个叫做gotoAlbum 的方法。而这个方法可以在 index.js 文件中找到。事实上，文件中也只定义了这一个方法，执行的具体动作就是跳转到 album 页面。
Page({ // 前往相册页 gotoAlbum() { wx.navigateTo({ url: ../album/album }); }, });
album.js 页面中编写了程序的主要逻辑，包括选择或拍摄图片、图片预览、图片下载和图片删除；album.wxml 中三种视图容器 view、scroll-view、swiper均有使用，还提供了消息提示框 toast。具体方法和视图的实现请查看项目源码。所有的这些功能都写在 Page 类中。
lib 目录下提供了小程序会用的一些辅助函数，包括异步访问和对象存储 COS 的 API。
总的来说，和微信官方宣传的一样，在开发者工具下进行小程序的开发，效率确实提高了很多，而且有很多微信提高的组件和 API。所以，在开发速度这点上的体验还是非常爽的。
另外，由于「小相册」需要使用诸多云端能力，如图片的上传和下载，我们还需要进行服务器端的部署和设置。具体请看接下来的步骤。
虽然服务端的开发不是本文的重点，但是为了全面地体验「小相册」的整个开发部署流程，我们还是有必要了解服务端的部署，这里我们使用的是腾讯云。
如果你想更爽一点，那么可以选择腾讯云官方提供的小程序云端镜像。「小相册」的服务器运行代码和配置已经打包成腾讯云 CVM 镜像，可以直接使用。可谓是一键部署好云端。
如果你以前没有使用过腾讯云，可以选择免费试用（我已经领取了 8 天的个人版服务器），或者领取礼包以优惠的价格购买所需的服务。
你也可以选择将「小相册」源码中的server文件夹上传到自己的服务器。
如果你已经有腾讯云的服务器和域名，并配置好了 https，那么可以跳过第 4-6 步。
在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。简单来说，就是你的域名必须走 https 协议。所以你还需要为你的域名申请一个证书。如果没有域名，请先注册一个。由于我们没有收到内测，也就暂时不用登录微信公众平台配置通信域名了。
微信小程序云端示例镜像中，已经部署好了 Nginx，但是还需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。
请将红框部分换成自己的域名和证书，并且将 proxy_pass 设置为 Node.js 监听的端口，我的是 9993。
配置完成后，重新加载配置文件并且重启 Nginx。
sudo service nginx reload sudo service nginx restart
我们还需要添加域名记录，将域名解析到我们的云服务器上，这样才可以使用域名进行 https 服务。在腾讯云注册的域名，可以直接使用云解析控制台来添加主机记录，直接选择上面购买的 CVM。
解析生效后，我们的域名就支持 https 访问了。
由于我们希望实现动静分离的架构，所以选择把「小相册」的图片资源是存储在 COS 上的。要使用 COS 服务，需要登录 COS 管理控制台，然后在其中完成以下操作。
在官方提供的镜像中，小相册示例的 Node 服务代码已部署在目录 /data/release/qcloud-applet-album下。进入该目录，如果是你自己的服务器，请进入相应的文件夹。
cd /data/release/qcloud-applet-album
在该目录下，有一个名为 config.js 的配置文件（如下所示），按注释修改对应的 COS 配置：
module.exports = { // Node 监听的端口号 port: 9993, ROUTE_BASE_PATH: /applet, cosAppId: 填写开通 COS 时分配的 APP ID, cosSecretId: 填写密钥 SecretID, cosSecretKey: 填写密钥 SecretKey, cosFileBucket: 填写创建的公有读私有写的bucket名称, };
另外，cd ./routes/album/handlers，修改 list.js，将 const listPath 的值修改为你的Bucket 下的图片存储路径。如果是根目录，则修改为 /。当前服务端的代码中将该值设置为了 /photos ，如果你在第七步中没有创建该目录，则无法调试成功。
小相册示例使用 pm2 管理 Node 进程，执行以下命令启动 node 服务：
pm2 start process.json
接下来，在微信 web 开发者工具打开「小相册」项目，并把源文件config.js中的通讯域名 host 修改成你自己申请的域名。
将蓝色框内的内容修改为自己的域名
然后点击调试，即可打开小相册Demo开始体验。
最后提示一点，截止目前为止，微信小程序提供的上传和下载 API 无法在调试工具中正常工作，需要用手机微信扫码预览体验。但是由于没有内测资格，我们暂时是没办法体验了。
嗯，就这点不够爽，没有内测邀请。
我的同事还写了另外3个demo的「小程序教程」，大家也可以看看。
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://wenda.whatsns.com/data/attach/logo/logo.png', '推荐 mishen 的问题《如何入门微信小程序开发,有哪些学习资料?》','https://wenda.whatsns.com/q-305232.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
付费偷看金额在0.1-10元之间
「微信小程序」剖析（一）：运行机制
本文从‘微信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 时将数据填充进去。还介绍了简单的函数绑定等等。
/*********** 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 Developers
https://www.coursera.org/learn/html-css-javascript-for-web-developers
课程和Quiz都免费，在Coursera同类课中，好评率第一，1700+的学生中，仅4个差评，很适合新手，并且会讲解一些实际项目的要求。
以上都是全英文授课，仅有英文字幕，但课程的质量非常优秀。必须要中文资源参考的，可以参考正文部分第三类，中文资源。
对于有一定基础背景的，默认具有了科学上网、搜索技巧，可以在以下资源站按需搜索。
1. Udemy 付费
2. Udacity 基础免费
3. Coursera 基础免费
4. Edx 免费，但开课时间有限制
5. Lynda 付费
6. Treehouse, codeschool, codecademy月费/年费
========
其他可能有用的资源：
1. 编程领域的知乎： Stack Overflow
2. 开发工具（编辑代码和编译的工具）：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 Up
2. Codeschool
其path 中的 HTML/CSS ， JaveScript
Learn HTML and CSS
JavaScript 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.9/5
Quiz 小测验免费。
耗时：5周，4-6小时/周
1700+的学生评论，只有4篇差评，并且一些是学生自身的问题，比如有学生期待所有的都由老师解释，而不是自己去搜索。
好评大多集中在，课程的结构易于理解，上课方式非常棒，很有趣，非常适合新手，并且会和你讲解实际项目中的要求。另一个很大的优势是，相比于大多Coursera的付费Quiz测试来说，这门课的Quiz全免费。
Coursera上还有3门前端开发的入门课，但评价都不及上述约翰霍普金斯大学的。
a. 伦敦大学的Responsive Website Basics: Code with HTML, CSS, and JavaScript
学生评分 4.5/5
耗时，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.4/5
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语言，jQuery
2. 手册类自助查询学习： 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的个人简介
链接：如何评价 9 月 21 日开始内测的「微信小程序」？ - 赵九州的回答
来源：知乎
著作权归作者所有，转载请联系作者获得授权。
笔者注：本文来自于迅雷首席工程师刘智聪的个人分享，他毕业于南昌大学化学系，加入迅雷后设计开发了多款迅雷核心产品，凭借“大规模网络流媒体服务关键支撑技术”项目获得2015年国家科学技术进步奖二等奖，同时也是第四代UI交互技术-----BOLT 界面引擎的发明人，目前担任WebApp解决方案商--火速移动的首席技术顾问。
21号晚上正和朋友一起打牌，难得的小七对刚刚定口，突然间手机传来了“叮咚”的消消息提示音，随后就是“叮叮，咚咚”的连续震动。打开手机一看，微信上一堆人发信息给我，先是一篇《微信应用号来了》，然后就是：“你怎么看？”
虽然之前曾经得到过消息说“微信应用号”会在年底发布，但没想到居然来的这么快，而且还改名叫“微信小程序了”（简称小程序）。已经无心打牌，赶紧完成一吃三后速度回到电脑前开始了持续几天的研究。而且这几天里各种相关资料都开始相继出现，内测用的开发工具也有破解版漏出了。
身边已经有不少朋友已经根据资料开始干活了，差不多有如下几类：
1）好好释放想象力，要是能在公测的时候做个有趣的小程序出来一炮而红那就赚大了
2）公司有一打的服务号，其实改成小程序会更合适（管它合不合适，改了再说！）
3）又是一轮洗牌的机会！那个公众号的功能是我先想到的但被别人抢了，这次我要在小程序里第一个做出来并做到第一名！
4）微信果然是互联网的“国务院”，新政策草案刚出立刻引起全行业的连夜研究。这么重要的关头，变革的前夜，我认为正确的做法是“战术上立刻响应，站略上不必着急”。不学习，不了解微信小程序是万万不行的，但立刻根据现在的资料，调整公司的方向，也有点为时过早。毕竟现在还在内测阶段，万一内测结果是“回炉重造”或则“大幅调整”（目前泄漏的资料已经处于正式发布的状态，应该不会大改了），那花在这里的时间都赔进去了还没地哭。所以我觉得对公司来说比较合理的做法是在立刻成立一个短期的临时小组，鼓励对小程序有兴趣的同学加入，一起开发几个有趣的小程序，主要目的就是学习。如果做出来的结果好还能赚一波眼球。等微信小程序正式公测了，再决策要不要把这个临时小组升级成一个正式的产品团队。
这几天通过目前公开的资料我已经对小程序的整体架构有了个初步的认识。我的风格一向是从架构和系统设计的视角做一些深度的，有观点的分析。现在终于可以回应朋友们的问题，谈谈我怎么看了。
微信小程序是什么？
官方这么说：
“我们提供了一种新的开放能力，让开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验”。
听起来非常美好，咱们具体一点，结合目前公开的信息和微信目前其它的开放形式对比一下吧
可以看到，腾讯还是非常有诚意的，这次在微信小程序上新开放的能力很多，不再是渐进式的演变而有一点像革命了。
小程序的入口在哪？
目前公开的资料里对大家最关系的入口问题只提到了小程序可以扫二维码打开，于是业界对小程序的入口有了这么几种流行的假设：
假设零：朋友圈，朋友可以把自己喜欢的小程序分享在朋友圈，看到了可以点击打开直接使用。
[配图1]
可能性:99%。小程序不能出现在朋友圈，流量从哪来？
假设一：出现在发现tab页面中，游戏下面（每个小程序占用一列），同时摇一摇也可以得到附近的小程序
[配图2]
可能性:80%。和一把腾讯的游戏挤在一起，不亏待你吧。
假设二：和当前的公众号、服务号类似，安装出现在会话列表
[配图3]
可能性:90%。新的开放能力和旧的开放能力用一样的入口不奇怪吧。
假设三：安装后和native app一样，直接出现在桌面
可能性:10%。和微信在同一级入口，腾讯同意Apple都不一定同意。
假设四：微信多一个小程序的tab
[配图4]
可能性:1%。多一个tab太丑了，而且小程序刚发布，不可能立刻就对微信的整体结构产生影响。
假设五：出现在一些内置流程中（比如和好友的聊天界面内，发朋友圈的界面（拍照后处理）
[配图 5]
可能性:1%。小程序和微信本体使用不同的框架技术开发，互相嵌套有困难。
微信小程序框架浅析
官方已经正式公开了小程序的开发资料（https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474887501556），小程序的开发框架包含两大块内容，分别是：API 与 组件。官方的资料在组织和内容上都写的还不错，阅读体验也很顺畅，没看过的话推荐先简单的通读一遍。基本上有一定经验的前端开发都可以没有什么障碍的掌握目前资料里的内容，我就不去做入门性的介绍了，直接浅析吧。
先看框架的底层API部分。微信一直有一个贯穿的"JS-SDK"在不断演进。对比一下小程序的底层API的功能范围，和JS-SDK还是有很多相似的感觉，相信未来会在形式上达到统一(JS-SDK这名字也足够霸气，塞进去什么都不会觉得奇怪。不过JS-SDK的很多接口设计的实在不敢恭维，希望这次统一的进程也能重新修正下)。小程序的API部分由于可以跳出浏览器的框架，理论上肯定可以是JS-SDK的超集。
这里面我觉得比较有意思的地方有：
>>网络通信
只要目标服务器的域名在小程序配置的安全列表之类，就可以直接通信。不用考虑js的跨域问题了。
既然跨域都支持了，没准以后能像nodejs一样，直接在小程序里使用tcp,udp协议，并基于buffer有一定的二进制协议的开发能力。跳出HTTP协议的框架，对于IoT方向是很有想象空间的。
>>数据缓存
数据缓存接口的设计看起来和 HTML5里的localStorage基本上一样，本来没什么好说的。但文档里的一句话引起了我的兴趣：
“注意： localStorage 是永久存储的，但是我们不建议将关键信息全部存在 localStorage，以防用户换设备的情况。”
难道微信提供的数据缓存能力虽然不是永久的存储，但可以做到跟随用户账号而不是当前设备？ 也就是说，不管用户怎么换手机，已安装使用过的小程序都能使用同一份缓存（不存在不登陆使用小程序的场景）？虽然微信自己的聊天记录跨设备漫游都没做，但这种app personal file cloud的支持，还是能在不增加开发的工作量的情况下，大幅提升用户体验的（作为一个steam的重度用户我已经完全离不开游戏存档的自动同步功能）。这也让我对小程序在云端的能力，开始有了一些初步的想象。
>>并不兼容一些常见js底层框架
小程序的官方QA里有一段话：
“zepto/jquery 会使用到window对象和document对象，所以无法使用”
这意味着所有基于HTML5的已有底层代码资产，并不能完全无缝的迁移过来。不过连jQuery这么常用的库都不能兼容还是有一点伤的。当然，现在用裁剪或兼容的方法，提供能在小程序平台运行的常见js底层库，短期内会很有市场。
MINA框架剖析
接下来我要解读微信小程序提供的界面部分功能，也是最令人兴奋的部分。一个小程序，必须基于MINA框架（从泄漏的资料里得知这个框架叫MINA,正式的资料里删除了这个名字，但为了后面行文方便，我会一直把小程序的应用框架称之为MINA）构建。一个典型的小程序的结构如下：
[配图7]
app.json 小程序配置：
小程序里一共包含哪些页面。
页面套在一个怎么样的 window里显示。
window是否需要支持多tab,支持的话每个tab的默认page是什么。
一些底层组件的默认参数。
app.js（可以理解为入口函数）
处理app的几个关键事件:onLaunch,onShow
定义了app级（可以在不同的页面之间共享）的数据的格式
app.wxss 公用样式表
每个页面的样式表，都是从这个应用级公有样式表继承下来的。
MINA一个最主要的核心概念是Page，一个Page是应用内可以导航到的最小粒度的界面。而如何构建Page是与大家过去猜测差别最大的地方。微信并没有使用HTML5，而是提供了一套新的设计。新的设计要求每个 Page由3个文件构成：
index.js :包含Page的逻辑处理代码
其中比较重要的就是定义Page的数据（wxml可以通过数据绑定机制直接访问）
index.wxml : Page的布局文件
随便从demo中选一个布局文件来看，其整体结构非常简介清晰，即使没有提供任何资料也大概能看出来表达了一个什么样的页面。
.wxml不算是完全的静态布局文件，还支持条件渲染和列表渲染。
.wxml使用{{}}语法来简单直接的支持数据绑定。
可以通过template的方法进行复用
index.wxss: 样式表
决定了在wxml中定义的各种组件最终应该如何显示。官方文档并没有列出wxss的selector语法和支持的style，只是说“具有CSS的大部分特性”，wxss样式表里也扩展了一些微信小程序专用的样式是属性。
Page的整体设计上有比较明显的“反应式”编程风格，相信有vue.js,angularJS，reactive.js开发经验的同学可以很快上手。由于没有内测资格所以没法在手机上测试性能，不清楚小程序的这套框架有没有反应式编程常见的性能问题。这个等公测后写个有10万条数据的列表，看看滚动流不流畅就知道了。
目前demo没有使用ES6，所以看起来没那么“现代化”，这也可能是因为小程序这个项目立项比较早的缘故吧。不过ES6是大势所趋，相信未来小程序会支持使用ES6开发。
一个基于MINA的小程序最后是如何跑起来的呢？
官方这么说：
“开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。”
网上已经有不少人通过琢磨开发工具的实现的方法，做了比较深度的研究了，推荐阅读：
(微信小程序「官方示例代码」剖析【下】：运行机制 微信小程序「官方示例代码」剖析【下】：运行机制)
简单的总结一下：
wxml文件通过编译会得到html，wxss 文件通过编译会得到css，分离的各个页面的JS和App的主JS文件最终会打包在一起得到App Service。 开发状态下运行小程序，基于blink内核，每个html会加载一些moko js用来支持框架功能。生产环境在手机上估计是运行在一个专用，定制的浏览器内核中。
为什么是MINA?
业界对目前微信使用的UI框架，有两种截然相反的观点：
微信“小程序”带动HTML5发展 数据波来助力 微信“小程序”带动HTML5发展 数据波来助力-CSDN.NET
“微信小程序的本质说来就是一个HTML5应用”
“以后互联网的发展方向可能更偏重于HTML5”
而有的人又认为
我们真的需要“小程序”么？| HTML5老兵如是说 我们真的需要“小程序”么？
“微信虽然用了 HTML5 技术来做应用号（正式名称：小程序），但是它并没有真正用到 HTML5 的精髓——开放、互联，也就决定了它可能无法实现“微信OS”的最终野心。”
这两个观点是矛盾的，那么，到底那种观点是正确的呢？首先简化一下问题，微信小程序是基于HTML5开发的么？
通过分析小程序的运行原理，这个答案是明确的：小程序的开发过程会用到大量HTML5相关的技术,但并不是使用HTML5开发。有 HTML5经验的前端工程师学习微信小程序的开发相对会更容易一些。微信小程序的运行并不需要一个完整支持HTML5特性的标准浏览器内核，但也可以通过添加一些辅助设施，让小程序在个完整支持HTML5标准的浏览器上运行起来。
“由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。” 也就是说，一个已存在的HTML5页面，并不能通过自动转换工具变成一个合法的Page，而需要有工程师根据HTML5页面的功能，使用MINA框架再实现一次。
[配图 HTML5与MINA在功能上有交集，但并不相等]
搞清楚MINA和 HTML5的关系后，我们还是没有搞清楚为什么微信要提供一个新的MINA框架 。事实上这个问题是一个讨论设计的问题，所以要回答这个问题，需要具备一定的设计能力，而不是只是停留在研究MINA实现的层面。而设计能力，是一种比较稀缺的能力。
想要系统的提升自己的设计能力，简单的来说就是“多看+多想”，那么如何多想呢？我有一套还算完整的方法的，简单来说有如下几步：
首先，在研究一个新东西以前，先想想这个新东西，是为了解决什么样的问题出现的。问题要多提，往深了提，反复提炼，最后得到几个好问题。或则从一个问题，引申出一些子问题。很多时候只要问题提对了，设计就明白了大半。
下一步就是试着自己解决一下，回答一下自己提的问题，并比较不同的解决思路的优劣，形成一个对问题解的标准。比如说问题是“如何在一个超长文本中查找子串？” 那么对问题的评价标准就可以是查找速度，以及查找过程中的内存占用。
接下里就是看别人是如何解决这些问题的了。如果和自己的设计差不多，一边窃喜一边开始按自己预先设计的评价标准对别人的设计的好坏进行判断。如果是自己完全没想到过的解法（这通常会出现在第一次接触某个领域问题），可以按图索骥的补充一些基础知识，再回来看。如果这个领域或解法非主流到不是常见范式，那么可以安下心来好好搞清楚，想明白。 这样带着问题研究设计，才能有效的提高自己的设计能力。
介绍完套路后咱们回到正题：我们如何来评价微信小程序选择MINA框架？让我来持续提问吧。
第一个问题：“为什么微信小程序不使用HTML5而是使用MINA来构建Page？”
不用HTML5我可以提供一个非技术答案：微信需要通过这种方法来转化开发者，这些开发者未来会逐渐演变成“微信OS平台”的忠实开发者。其实开发者通常都有患有“斯德哥尔摩综合症”，一旦在一个平台上投入了智力资源进行学习，就会开始下意识的维护这个平台（比如看不到平台的缺点，只看到平台的优点）。如果使用HTML5作为开发方式，那么现在小程序聚拢的开发者都是为了流量来的，并没有投入额外的学习成本，对平台不够忠诚。而微信要成为OS是一个长期的演变过程，那么现在就要通过要求学习一个新的开发框架的方法开始多转化一些忠诚的开发者。
当然是不是这个原因也只有张小龙自己知道了，这是一个揣摩动机的答案，所以没有评价标准。问题终结。
为什么不用HTML5的技术答案可以是非常庸俗的。毕竟业界对于HTML5技术的优劣讨论已经持续了一段很长的时间了。但基本上，大家认为HTML5的主要缺点集中在性能上：同样的交互，用HTML5实现需要更多的系统资源，也可能会不够流畅。同时，应用还需要集成一个非常巨大的浏览器内核。
这个答案尽管能让大部分人满意，但实际上是非建设性的（这些对HTML5性能的结论，是别人告诉你的）。大家一边相信HTML5的美好前景，一边把对性能问题的解决寄托于几家传统的浏览器厂商。按我们的套路，这个性能问题再往深了问是这样的：“渲染指定页面最少需要多少资源？”，“在当前硬件水平下，渲染指定页面最快需要多少时间？”，“实现一个完整支持HTML5标准的浏览器内核，需要大概多少代码？”。要回答这些问题就需要了解浏览器的实现了，这不会是一件容易的事情，在阅读浏览器的实现的时候，肯定会持续提出针对HTML的设计问题。最终你会对浏览器厂商什么时候能解决性能问题，得到一个更合理的预期：至少在5年内，HTML5的性能是不够的。
虽然SAY NO的理由，有一条就够了。但如能从其它角度思考一下为什么不是HTML5,可以得到一些更有建设性的答案。
第二个问题：“MINA作为一个新框架，为什么会设计成现在的样子？”
可以肯定的是，这是MINA的架构师在综合了多个因素后，拿出来的一个自己最满意的答案。所以这是一个非常有建设性的问题，思考这个问题的时候，就开始逐步代入MINA的架构师视角了。
让我们一起进入MINA架构师的角色，首先在否决了HTML5后，要设计一个什么样的框架来支持小程序的交互开发？第一步就是要给这个新框架提一些基础性的目标与需求。
这是一个现代化的框架，在最终表现力上要足够好。
小程序跑在微信里，所以必然是和android,iOS的具体平台特性无关的。
要面向更多的非专业开发者，所以学习门槛要低。
大规模的专业团队进行团队开发时，能有足够的工程支持。工程支持包括：
模块化
代码易于长期维护和修改。这意味着基于框架的实现具体需求的结果要足够清晰，好读。
可复用性设计。
小程序不需要安装就可以快速开始使用，只需要加载必要的资源就可以尽快展现用户需要的页面。
进一步思考这些需求该如何解决，并对不同的解决方案进行评价需要的领域知识非常多，已经超过了本文的讨论范围。我在这里要做的只是带你入门，让你开始思考设计问题就够了。这也是本文的核心目的：学会对新技术，新设计进行独立的分析和判断。至于结果么，现在小程序还处于一个早期的状态，等公测了之后在下结论也不迟。
微信小程序的未来？
虽然现在小程序开放的功能并不丰富，处于一个早期的状态，但结合上面的观点去看微信小程序的设计，还是能从中读到许多远大的理想。而微信的核心愿景之一是“连接一切”，没准小程序是腾讯实现这个愿景道路上的重要一步。有超过7亿用户的微信如果成为一个新的平台，具有不可忽视的能量，下面让我来对小程序的下一步动作做一些无责任的预测吧。
假设一、微信小程序未来会解决应用内搜索的问题
目前小程序规范的页面结构很方便实现应用内搜索。以后使用微信的搜索功能可以直达小程序内部的某个特点内容页面。
这种规范的设计也方便实现小程序之间的互相访问，可以通过一个类似wxapp://appid/pageid/的URL直接导航到另一个小程序的某个特定页面。这是App时代的超连接系统，App的信息孤岛也许就此打破。
假设二、微信小程序会从本地数据读取开始，进化出一定的云端API.
现在小程序只提供了前端的开发功能，但从整体逻辑上已经包含了应用的上传，审核，发布流程。
以后腾讯也许会为小程序提供托管服务（https://www.qcloud.com/act/event/yingyonghao.html），让应用开发者可以用更少的精力完成一个完整小程序的开发，而不需要去管服务器申请，后台开发，服务器运维等反繁琐的工作，进一步降低一个真正小程序的开发门槛。我相信微信一定有团队在为这个方向努力，但最终实现目标需要更有创造力的云端API设计，这是需要有大智慧的工作。
假设三、使用小程序连接一切
我并不认为小程序只是一个体验更好的服务号。张小龙说小程序是“触手可及”，“用完即走”，“无处不在”的。那么什么场景会需要这种能力? 我觉得“有复杂程序的低频商业行为”会有这种需求。举两个实际的例子：
例1：有一间智能会议室，入口处有一个二维码。会议室的使用者扫描后可以打开一个小程序，通过这个小程序可以更好的访问、控制会议室的各种设备，比如灯光，窗帘，幕布等。
例2：去体检，体检表上有个二维码，扫描后打开一个小程序，通过这个小程序可以更好的引导用户自助完成自己的体检项目。
这两个场景的需求能通过小程序解决，意味着小程序的种类极大丰富，硬件厂商对微信生态的极大支持。我们可以通过小程序简单方便的进入各种陌生的环境，让生活更加智能。未来已经悄悄敞开了大门。
而如何更好更快的探索小程序的可能性，也将是我接下来创业的方向。我将以火速移动技术顾问的身份，和小伙伴们一起从微信小程序开始，去探索移动Web的可能性。
感谢各位关心。
https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
2、小程序设计指南
https://mp.weixin.qq.com/debug/wxadoc/design/index.html
3、小程序开发者工具
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只发放了 200 个内测资格（泪流满面）。本以为没有 AppID 这个月就与小程序无缘了，庆幸的是微信这两天发布了正式版开发者工具，无需内测邀请也可以尝鲜了。
因此也就有了我与「小程序」的初体验，而我的感受只有一个字——爽！
选择哪个「小程序」Demo？
在知名同性交友网站 Github 上，「小程序」的 Demo 不少，但是大多只是简单的 API 演示，有的甚至直接把页面数据写在了 json 文件里（分明有网络请求 API）。我想体验的是能够将服务端和小程序端无缝连接起来（体验够爽）的项目。最终，我选择了腾讯云官方推出的「小相册」Demo。
「小相册」主要实现了以下功能：
效果演示图（受开发工具的限制，部分功能尚未实现）
之所以选择腾讯云的 Demo，一是因为它是腾讯自家推出的，项目的质量有保障；二是因为它是少有的既讲小程序开发，又介绍云端部署的项目。
稍微有点经验的程序员都知道，架构要动静分离，静态文件最好不要放在自己的服务器上，要放在专门用来存储的对象存储服务器COS上，并且用CDN 加速。「小相册」后端采用的是 Node.js，Nginx作为反向代理。
第一步：搭开发环境
首先，我们需要在本地搭建好微信「小程序」的开发环境。即下载开发者工具。微信官方已经推出了正式版 IDE，大家没有必要再去下载破解版了。打开「官方下载地址」，根据自己的操作系统选择。我使用的是 Mac 版。
安装好之后打开运行，会要求微信扫码登陆。之后，就可以看到创建项目的页面了。
选择添加项目，没有 AppID 就选无（如果乱写会报错，到时可能无法进入项目）。如果你选择的项目目录为空，请如图所示勾选在“当前目录中创建quick start项目”。
点击“添加项目”之后，我们会进入开发工具的调试页面。
第二步：下载「小相册」源码
接下来，我们下载「小相册」的源码。可以选择直接从http://imgcache.qq.com/qcloud/la/demo-source/qcloud-applet-album.zip下载，也可以从腾讯云团队的 Github 仓库拉取。我推荐从 Github 仓库拉取，这样可以及时获取最新的代码。
git clone https://github.com/CFETeam/weapp-demo-album.git
最终，我们会得到类似这样的文件目录。
简单解释下目录结构：
源码下载完成之后，我们打开微信 web 开发者工具，新建项目「小相册」，选择目录applet（或app）。
「小相册」源码分析
在进行部署之前，我们来简单分析一下「小相册」的具体代码。毕竟只看效果不是我们的目的，我们的目的是以「小相册」为例，了解如何开发小程序并与服务端进行交互。
「小相册」包含一个描述整体程序的 app 和多个描述各自页面的 page。主程序 app 主要由三个文件组成，分别是 app.js（小程序逻辑）、app.json（小程序公共设置）和 app.wxss（小程序公共样式表），其中前两个为必备文件。config.js 文件中包含了一些部署域名的设置，现在不用管。
在 pages 目录下，有两个 page 页面，分别是 index 和 album。页面结构算是比较简单的，其中 index 是小程序启动时默认进入的页面。每个页面下，至少要有 .js（页面逻辑）和 .wxml（页面结构）两个文件，.wxss（页面样式表）和 .json（页面配置）文件为选填。你可能注意到了，这些文件的文件名与父目录的名称相同。这是微信官方的规定，目的是减少配置项，方便开发者。
接下来我们以 index 页面为例做简单的解释。index.wxml 是这个页面的表现层文件，其中的代码非常简单，可以分为上下两大部分。
页面的演示效果如下：
我们看到，页面上有一个“进入相册”的按钮。正常理解，点击后该按钮后我们就可以进入相册了（这不废话嘛）。那小程序背后是怎样实现该操作的呢？
在 index.wxml 中，我们发现对应的 button 标签上定义了一个 bindtap 属性，绑定了一个叫做gotoAlbum 的方法。而这个方法可以在 index.js 文件中找到。事实上，文件中也只定义了这一个方法，执行的具体动作就是跳转到 album 页面。
album.js 页面中编写了程序的主要逻辑，包括选择或拍摄图片、图片预览、图片下载和图片删除；album.wxml 中三种视图容器 view、scroll-view、swiper均有使用，还提供了消息提示框 toast。具体方法和视图的实现请查看项目源码。所有的这些功能都写在 Page 类中。
lib 目录下提供了小程序会用的一些辅助函数，包括异步访问和对象存储 COS 的 API。
总的来说，和微信官方宣传的一样，在开发者工具下进行小程序的开发，效率确实提高了很多，而且有很多微信提高的组件和 API。所以，在开发速度这点上的体验还是非常爽的。
另外，由于「小相册」需要使用诸多云端能力，如图片的上传和下载，我们还需要进行服务器端的部署和设置。具体请看接下来的步骤。
第三步：云端部署 server 代码
虽然服务端的开发不是本文的重点，但是为了全面地体验「小相册」的整个开发部署流程，我们还是有必要了解服务端的部署，这里我们使用的是腾讯云。
如果你想更爽一点，那么可以选择腾讯云官方提供的小程序云端镜像。「小相册」的服务器运行代码和配置已经打包成腾讯云 CVM 镜像，可以直接使用。可谓是一键部署好云端。
如果你以前没有使用过腾讯云，可以选择免费试用（我已经领取了 8 天的个人版服务器），或者领取礼包以优惠的价格购买所需的服务。
你也可以选择将「小相册」源码中的server文件夹上传到自己的服务器。
第四步：准备域名和配置证书
如果你已经有腾讯云的服务器和域名，并配置好了 https，那么可以跳过第 4-6 步。
在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。简单来说，就是你的域名必须走 https 协议。所以你还需要为你的域名申请一个证书。如果没有域名，请先注册一个。由于我们没有收到内测，也就暂时不用登录微信公众平台配置通信域名了。
第五步：Nginx 配置 https
微信小程序云端示例镜像中，已经部署好了 Nginx，但是还需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。
请将红框部分换成自己的域名和证书，并且将 proxy_pass 设置为 Node.js 监听的端口，我的是 9993。
配置完成后，重新加载配置文件并且重启 Nginx。
第六步：域名解析
我们还需要添加域名记录，将域名解析到我们的云服务器上，这样才可以使用域名进行 https 服务。在腾讯云注册的域名，可以直接使用云解析控制台来添加主机记录，直接选择上面购买的 CVM。
解析生效后，我们的域名就支持 https 访问了。
第七步：开通和配置 COS
由于我们希望实现动静分离的架构，所以选择把「小相册」的图片资源是存储在 COS 上的。要使用 COS 服务，需要登录 COS 管理控制台，然后在其中完成以下操作。
- 点击创建 Bucket。会要求选择所属项目，填写相应名称。这里，我们只需要填上自己喜欢的 Bucket 名称即可。
- 然后在 Bucket 列表中，点击刚刚创建的 Bucket。然后在新页面点击“获取API密钥”。 弹出的页面中包括了我们所需要的三个信息：唯一的 APP ID，一对SecretID和SecretKey（用于调用 COS API）。保管好这些信息，我们在稍后会用到。
- 最后，在新的 Bucket 容器中创建文件夹，命名为photos。这点后面我们也会提到。
第八步：启动「小相册」的服务端在官方提供的镜像中，小相册示例的 Node 服务代码已部署在目录 /data/release/qcloud-applet-album下。进入该目录，如果是你自己的服务器，请进入相应的文件夹。
在该目录下，有一个名为 config.js 的配置文件（如下所示），按注释修改对应的 COS 配置：
另外，cd ./routes/album/handlers，修改 list.js，将 const listPath 的值修改为你的Bucket 下的图片存储路径。如果是根目录，则修改为 /。当前服务端的代码中将该值设置为了 /photos ，如果你在第七步中没有创建该目录，则无法调试成功。
小相册示例使用 pm2 管理 Node 进程，执行以下命令启动 node 服务：
第九步：配置「小相册」通信域名
接下来，在微信 web 开发者工具打开「小相册」项目，并把源文件config.js中的通讯域名 host 修改成你自己申请的域名。
将蓝色框内的内容修改为自己的域名
然后点击调试，即可打开小相册Demo开始体验。
最后提示一点，截止目前为止，微信小程序提供的上传和下载 API 无法在调试工具中正常工作，需要用手机微信扫码预览体验。但是由于没有内测资格，我们暂时是没办法体验了。
嗯，就这点不够爽，没有内测邀请。
我的同事还写了另外3个demo的「小程序教程」，大家也可以看看。
地址：https://www.qcloud.com/act/event/yingyonghao.html
-------------------
教程章节：
公告地址：https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&key=1478163659&version=14&lang=zh_CN
公测配套使用攻略：
微信小程序公测接入指南
整理了一下最近收集了好久的资料，给同学们参考：共分了5类；
1：官方文档地址：
2：免费视频地址：
3：教程系列集合；
4：100个demo
5：学习论坛
11月5日更新内容
--------
19：_Wake新手入门攻略系列：博客地址：_Wake - 简书
_Wake：新手入门攻略《一》视图与渲染，点击事件
_Wake：新手入门攻略《二》配置及生命周期，布局基础&样式基础
demo更新：适应新版（这里特指v0.10.102800版）的demo
- 微信小程序demo：福利demo：美女荟萃；适用1028版本
- 微信小程序demo：titans
- 微信小程序学习用demo：附登录设计实战教程
- 微信小程序优质demo：We重邮；适用1028版本
- 微信小程序demo：仿手机淘宝；适用1028版本
- 微信小程序demo：Dribbble
- 微信小程序推荐demo：备忘录：适用1028版本
- 微信小程序优质demo推荐：24点计算游戏；适用1028版
- 微信小程序demo：智能机器人；适用1028版本
- 微信小程序demo：万年历
- 微信小程序demo：github博客
- 微信小程序优质demo推荐：高仿芒果TV（暂无接口）：适用1028
- 微信小程序优质demo：知乎；适用1028版本
- 微信小程序demo：够野活动；适用1028版本
- 微信小程序demo：水果小店：适合学习使用
- 基于微信小程序开发的仿微信demo ★100
- 微信小程序经典demo学习案例：flex布局栅格
- 微信小程序demo：简单的天气预报：适用1028版本
- 微信小程序demo：基于node：wechat app of girls scrapy spider
- 微信小程序demo：面包旅行；适用1028版本
- 微信小程序demo：小米天气：适用1028版本
- 微信小程序优质demo推荐：辩论计时
- 微信小程序demo：豆瓣电影：适用1028版本
- 优质demo推荐研究：桔子信用；适用1028版本
- 微信小程序demo：精美计算器：适用1028版本
- 微信小程序demo：大画表情；适用1028版本；推荐研究
- 微信小程序精品demo强烈推荐：有调商城：适用1028版本
- 微信小程序入门教程+案例demo
- 微信小程序demo：京东首页
- 微信小程序demo：在线音乐：适用1028版本
- 微信小程序demo：音乐播放器 技术栈: redux + es7 +labrador
--------11月2日更新内容
--------
14：Coco-LG的学习笔记：博客地址：cocoLG的专栏
Coco-LG的学习笔记《一》事件
Coco-LG的学习笔记《二》view(视图容器)
Coco-LG的学习笔记《三》image(图片)
15：Acmen、L学习案例系列：博客地址：Acmen、L - 博客园
Acmen、L学习案例集锦《一》生命周期，组件
Acmen、L学习案例集锦《二》弹框组件modal，底部菜单
Acmen、L学习案例集锦《三》加载中提示框loading，
Acmen、L学习案例集锦《四》video视频播放，audio音频播放
16：梦断难寻新手入门篇系列：博客地址：梦断难寻 - 博客园
梦断难寻新手入门篇《一》：熟悉项目结构
梦断难寻新手入门篇《二》：获取系统信息，地理位置，用户信息
梦断难寻新手入门篇《三》：下拉刷新，上拉加载更多
17：一斤代码深入理解系列：专栏地址：一斤代码 - 简书
一斤代码深入理解系列《一》：微信小程序事件机制
一斤代码深入理解系列《二》：微信小程序样式机制
一斤代码深入理解系列《三》：微信小程序和服务器通信
一斤代码深入理解系列《四》：微信小程序和服务器通信
一斤代码深入理解系列《五》：微信小程序中使用Promise进行异步流程处理
18：qc_nj微信小程序准备工作系列：博客地址：再起航！
微信小程序准备工作：微信开发实战《一》申请测试号
微信小程序准备工作：微信开发实战《二》微信公众平台接口调试工具 ...
微信小程序准备工作：微信开发实战《三》开发者公众号的交互原理 ...
微信小程序准备工作：微信开发实战《四》URL、Token认证、java源码、免费新浪SAE部署 ...
demo更新：适应新版（这里特指v0.10.102800版）的demo
- 微信小程序优质demo推荐：心情笔记：适用10
- 微信小程序demo：课程列表：适用1028版本
- 微信小程序demo：外卖：适用1028版本
- 优质demo推荐：百家菜谱：适用1028版本
- 微信小程序demo：云图音乐：适用1028版本
- 使用TypeScript开发微信小程序的demo演示
- 微信小程序优质demo推荐：知乎日报；适用10
- 微信小程序demo：ITBLOG框架；适用1028版本
- 微信小程序demo：黑市商城框架；适用1028版
- 微信小程序demo：计时器：适用1028版本
- 微信小程序demo：XY商城：适用1028版本
- 微信小程序demo：哔哩哔哩bilibili排行榜：
- 微信小程序demo：芒果TV：适用1028版本
- 微信小程序demo：宅男社区
- 优质demo推荐：老酒商城：适用1028版本
- 微信小程序demo：豆瓣电影：适用1028版本
- 微信小程序完整demo（附前后端代码）
--------微信小程序在10月27和28日连续更新了两个版本，很多demo在新程序版本下无法使用；以下为10月30日更新内容：
--------
12：半桶水分享系列：作者博客：d617973306的博客
半桶水技术分享：微信小程序实现跳转传参
半桶水技术分享《二》：js实现单选功能
半桶水技术分享《三》：wx:key理解
13：jsong技术分析系列：作者博客：博客 - jsongo0的个人空间；作者公众号：半圆生活
微信小程序开发系列分析《一》视图层
微信小程序开发系列分析《二》数据层
微信小程序开发系列分析《三》开发工具v0.10.102800-新增功能解析
微信小程序开发系列分析《四》websocket
微信小程序开发系列分析《五》模块化
微信小程序开发系列分析《六》主界面
微信小程序开发系列分析《七》生命周期和路由
demo新增：适应新版（这里特指v0.10.102800版）的demo
- 微信小程序demo：qq号吉凶测试：适用1028版
- 微信小程序完整demo：包含服务器端及数据库
- 优质demo推荐：豆瓣电影：适用1028版本
- 微信小程序demo：冥想；部分适用1028版本
- 微信小程序demo：工单：界面适用1028版本
- 微信小程序demo：神马假日与购物车：适用10
- 微信小程序demo：一天任务：部分适用1028版
- 微信小程序demo：共享ofo共享单车：适用1028
--------一：官方地址集合：
1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461
2：简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599
3：设计指南：https://mp.weixin.qq.com/debug/wxadoc/design/index.html
4：设计资源下载：https://mp.weixin.qq.com/debug/wxadoc/design/#资源下载
5：腾讯云教程：https://www.qcloud.com/doc/product/448/6405
二：免费视频地址：
均为网络收集的免费视频：
视频资源 - Demo/资源下载
三：新手教程集合：原创不易，请大家多多支持作者专栏，教程系列均得到了原作者的授权；
1：顺子_RTFSC把玩系列：博客地址：顺子_RTFSC的专栏
微信小程序把玩《一》：window配置，tabBar底部导航，应用生命周期 ...
微信小程序把玩《二》：页面生命周期，模块化，数据绑定，view组件 ...
微信小程序把玩《三》：scroll-view组件，swiper组件，icon组件
微信小程序把玩《四》：text组件，progress组件，button组件
微信小程序把玩《五》：checkbox组件，form组件，input组件
微信小程序把玩《六》：picker组件，radio组件，slider组件
微信小程序把玩《七》：switch组件，action-sheet组件，modal组件
微信小程序把玩《八》：toast组件，loading组件，navigator组件
微信小程序把玩《九》：audio组件，image组件，video组件
微信小程序把玩《十》：wx.request(object) API，wx.uploadFile(object)
微信小程序把玩《十一》：Image API，Record API，Audio API
微信小程序把玩《十二》：Video API，Storage API，location API
微信小程序把玩《十三》：获取设备信息 API，navigation API，animation API ...
微信小程序把玩《十四》：canvas API
2：秀杰实战系列：博客地址：博客 - 秀杰的个人空间
秀杰实战教程系列《一》：记账应用开发
秀杰实战教程系列《二》：微信小程序绘图课程之饼图
秀杰实战教程系列《三》：下拉筛选菜单WXDropDownMenu组件
秀杰实战教程系列《四》：倒计时组件，LXStepper组件-商品数量加减 ...
秀杰实战教程系列《五》：实战课程之记账应用开发（续）
秀杰实战教程系列《六》：服务端之用户注册与登录基于ThinkPHP5描述 ...
秀杰实战教程系列《七》：实现购物车页面
秀杰实战教程系列《八》：记账应用实战服务端之用户注册与登录基于Codeigniter3描述 ...
秀杰实战教程系列《九》：应用实例教程服务端登录篇
秀杰实战教程系列《十》：服务端实现账目CRUD
秀杰实战教程系列《十一》：对接服务端账目CRUD
秀杰实战教程系列《十二》：基于LeanCloud实现访问网络与数据存储
3：有渔入门系列：博客地址：编程艺术 - 51CTO技术博客
有渔微信小程序系统概述《一》认识微信小程序与HelloWorld
有渔微信小程序系统概述《二》了解.js文件及.json文件
有渔微信小程序系统概述《三》view层及小程序框架概述
有渔微信小程序系统进阶《四》小程序组件
有渔微信小程序技术分析《五》Mustache语法要点总结
有渔微信小程序系统概述《六》小程序的API
有渔微信小程序技术分析《七》实例开发教程
有渔微信小程序系统概述《八》：小程序开发中应注意的几个问题
4：疯狂的猫入门系列：博客地址：疯狂的猫 - 博客园
微信小程序入门系列《一》：入门正确姿势
微信小程序入门系列《二》：开发工具使用与设计规范
微信小程序入门系列《三》：生命周期
微信小程序入门系列《四》：触控事件
微信小程序入门系列《五》：数据绑定
5：栁罗风尘的攻略系列：博客地址：不忘初心，才能始终
微信小程序简易全攻略《一》开始构建与创建页面
微信小程序简易全攻略《二》设置页面标题与底部导航
微信小程序简易全攻略《三》创建轮播图与数据请求，表单的创建、提交、与接收 ...
微信小程序简易全攻略《四》模板条件列表渲染完成模拟公众号自动回复 ...
6：Bison试水系列：博客地址：Bison的技术博客
IOS开发者试水：微信小程序开发教程-从零开始（1）
IOS开发者试水：微信小程序开发教程-从零开始（2）
IOS开发者试水：微信小程序开发教程-从零开始（3）
7：二当家小武零基础系列：博客地址：u012491227的专栏
零基础入门篇：微信小程序开发博客项目《上》
零基础入门篇：微信小程序开发博客项目《中》
8：dzp_coder学习点滴系列：博客地址：dzp_coder
微信小程序学习点滴《一》：如何获取时间，页面跳转，传递参数 ...
微信小程序学习点滴《二》：开发者工具快捷键，轮播图 swiper图片组件 ...
微信小程序学习点滴《三》：开发工具及开发环境配置，尺寸单位rpx与px,rem相互转换 ...
微信小程序学习点滴《四》：网络请求
微信小程序学习点滴《五》：网络请求(POST请求)填坑指南
微信小程序学习点滴《六》吐司toast(消息提示框)
微信小程序学习点滴《七》选项卡(窗口顶部TabBar)及(窗口底部TabBar)页面切换
微信小程序学习点滴《八》：数据存储 参数传递 数据缓存
9：Two_Water的学习系列：博客地址：【微信小程序】
微信小程序学习《一》：目录文件详解，视图渲染详解
微信小程序学习《二》：事件详解
10：oopsguy实战系列：博客地址：oopsguy - 博客园
精品教程：微信小程序实战之知乎日报
精品教程《二》：微信小程序实战之小豆瓣图书
11：TITF实用代码片段系列：博客地址：FutrueJet的博客
TITF出品：微信小程序实用案例代码片段大全《一》
TITF出品：微信小程序实用案例代码片段大全《二》
TITF出品：微信小程序实用案例代码片段大全《三》
TITF出品：微信小程序实用案例代码片段大全《四》
TITF出品：微信小程序实用案例代码片段大全《五》：ES6新特性专辑 ...
TITF出品：微信小程序实用案例代码片段大全《六》
TITF出品：微信小程序实用案例代码片段大全《七》
四：demo合集；网络上的demo十分分散，我专门集中了大部分目前可以搜寻到的demo，方便大家查找，每个demo均提供了github地址，方便查看最新更新代码；
官方开发者工具导入demo教程
微信小程序demo：万年历|日历
微信小程序简单demo功能：增删
微信小程序demo：快递查询（内含结构详解）
微信小程序优质demo推荐：微信挪车
微信小程序优质demo推荐：像素鸟游戏
微信小程序优质demo推荐：打飞机游戏
- 微信小程序demo：百度小说搜索
- 微信小程序demo：果库
- 微信小程序demo：爆米花popcorn
- 微信小程序demo：Testerhome
- 微信小程序demo：公众号热门文章信息流
- 优质demo推荐：空气质量查询
- 微信小程序demo：环球小镇商城
- 微信小程序demo：小林早餐
- 微信小程序demo：狼人杀
- 微信小程序demo：仿QQ，重点UI绘制 和微信
- 微信小程序demo：半个医生的探索版
- 微信小程序demo：模仿city games 看还原度
- 微信小程序demo：元宝币钱包 YBCWallet
- 微信小程序demo：骰子游戏
- 微信小程序demo：500px
- 微信小程序demo：有调商城
- 微信小程序demo：巴爷商城
- 微信小程序demo：礼物说
- 微信小程序demo：德泽微特产
- 微信小程序demo：备忘录2
- 微信小程序demo：24点计算游戏
- LeanCloud 的微信小程序用户登陆Demo
- 微信小程序demo：V2EX
- 微信小程序demo：We重邮（亲测可用）
- 新手学习福音：基于微信小程序官方教程的代
- 学习用demo：电影
- 微信小程序demo：搜索歌词（亲测可用）
- 微信小程序demo：电影app（亲测可用）
- 微信小程序demo：乐词
- 微信小程序demo：查询号码归属地
- 微信小程序demo：帮你妹
- 微信小程序demo学习示例：加载更多
- 微信小程序demo：豆瓣电影， 照片， 地图
- 微信小程序种子项目demo
- 微信小程序demo：flex布局页面
- 微信小程序demo：指尖书香
- 微信小程序demo：火车票查询
- 微信小程序demo：新闻客户端
- 微信小程序demo：花礼网
- 微信小程序demo：实现movecss效果
- 微信小程序demo：新闻头条
- 微信小程序demo：滴滴公交
- 微信小程序demo开发教程：地图定位
- 微信小程序demo：大好商城（新增功能天气查
- 微信小程序demo：吃货APP(实现上拉加载更多
- 方涛：微信小程序demo：智能机器人
- A闪：微信小程序demo：汇率计算器
- 微信小程序demo：水浒传
- Demo设计教程：Flex布局demo－4种必备常用
- 腾讯云微信小程序一站式解决方案客户端示例
- 微信小程序demo：五十音图（附作者感受）
- 微信小程序demo：电商（附简易教程）
- 微信小程序demo：IT-EBOOKS
- 微信小程序demo：英雄联盟(LOL)战绩查询
- 微信小程序demo：影讯
- 微信小程序demo：分答
- 微信小程序demo：ToDoList
- 微信小程序demo：gank.io
- 微信小程序demo：烩面APP
- 微信小程序demo：北欧风格家居设计馆
- 微信小程序demo：Artand
- 微信小程序demo：番茄时钟
- 微信小程序demo：基本功能实现
- 微信小程序demo实战教程：仿UC天气预报
- 微信小程序demo：可以播放音乐的 Apple Mus
- 微信小程序demo：计时器（两个demo）
- 微信小程序demo：健康菜谱
- 微信小程序demo：扫雷（挖金子）
- 微信小程序demo：A岛
- 微信小成都demo：小推车首页展示 购物车的
- 微信小程序demo：1024小游戏
- 微信小程序 cnode社区版本
- VR视频资源——微信小程序
- Gank——微信小程序Demo
- 移动端商城——微信小程序Demo
- TeamToy——微信小程序Demo
- Hiapp——微信小程序Demo
- 商城——微信小程序Demo
- 计算器——微信小程序Demo
- 开发模板 vue init——微信小程序
- github博文展示——微信小程序Demo
- 购物车——微信小程序Demo
- 抢红包——微信小程序Demo
- 热门文章信息流——微信小程序Demo
- 微票——微信小程序Demo
- 微信小程序demo：资讯类demo;功能实现列表
- 微信小程序demo：知乎日报（附：知乎日报AP
- 微信小程序demo：移动端商城
- 微信小程序demo：简易情绪音乐播放器V0.04
- 微信小程序demo：小姨妈
- 微信小程序demo导入小教程
- 微信小程序demo详解：今日头条
- 拉勾网App：微信小程序demo分享
- 微信小程序demo分享：豆瓣电影
- 微信小程序demo：搜索音乐小程序，调用酷狗
五：学习论坛，1：很快社区：微信小程序,weixin,微信小程序开发：评价：新内容较少，老内容较丰富；
2：weapp：微信小程序开发论坛：内容较少，但有自己的原创；
3：微信小程序联盟：微信小程序社区：也就是我的论坛，内容目前最为丰富，但是缺乏原创；
4：青雀：青雀论坛_LarkApp_国内领先的小程序开发者社区：有自己的工具；
一周热门 更多>