前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S；
0.15.152900版本：3月29日推出
5月8日跟新：
--------
插件/工具更新：
5月4日更新：
特殊合集：
5月4日更新demo：
4月26日更新：
4月23日更新：（删除2月份之前的所有内容）
4月23日更新demo：
4月23日更新插件/工具：
4月17日更新：
demo更新：
4月10日更新：
插件组件系列更新：
demo更新支持新版：
4月5日更新：
跳坑系列更新：
demo更新适应新版（这里特指0.15.152900版）的demo：
最新资讯：（3月28日）
新版尝鲜系列：
3月31日更新：
3月28日更新
因此也就有了我与「小程序」的初体验，而我的感受只有一个字——爽！
「小相册」主要实现了以下功能：
效果演示图（受开发工具的限制，部分功能尚未实现）
之所以选择腾讯云的Demo，一是因为它是腾讯自家推出的，项目的质量有保障；二是因为它是少有的既讲小程序开发，又介绍云端部署的项目。
稍微有点经验的程序员都知道，架构要动静分离，静态文件最好不要放在自己的服务器上，要放在专门用来存储的对象存储服务器COS上，并且用CDN加速。「小相册」后端采用的是Node.js，Nginx作为反向代理。
选择添加项目，没有AppID就选无（如果乱写会报错，到时可能无法进入项目）。如果你选择的项目目录为空，请如图所示勾选在“当前目录中创建quickstart项目”。
点击“添加项目”之后，我们会进入开发工具的调试页面。
最终，我们会得到类似这样的文件目录。
简单解释下目录结构：
在进行部署之前，我们来简单分析一下「小相册」的具体代码。毕竟只看效果不是我们的目的，我们的目的是以「小相册」为例，了解如何开发小程序并与服务端进行交互。
「小相册」包含一个描述整体程序的app和多个描述各自页面的page。主程序app主要由三个文件组成，分别是app.js（小程序逻辑）、app.json（小程序公共设置）和app.wxss（小程序公共样式表），其中前两个为必备文件。config.js文件中包含了一些部署域名的设置，现在不用管。
接下来我们以index页面为例做简单的解释。index.wxml是这个页面的表现层文件，其中的代码非常简单，可以分为上下两大部分。
我们看到，页面上有一个“进入相册”的按钮。正常理解，点击后该按钮后我们就可以进入相册了（这不废话嘛）。那小程序背后是怎样实现该操作的呢？
在index.wxml中，我们发现对应的button标签上定义了一个bindtap属性，绑定了一个叫做gotoAlbum的方法。而这个方法可以在index.js文件中找到。事实上，文件中也只定义了这一个方法，执行的具体动作就是跳转到album页面。
lib目录下提供了小程序会用的一些辅助函数，包括异步访问和对象存储COS的API。
另外，由于「小相册」需要使用诸多云端能力，如图片的上传和下载，我们还需要进行服务器端的部署和设置。具体请看接下来的步骤。
虽然服务端的开发不是本文的重点，但是为了全面地体验「小相册」的整个开发部署流程，我们还是有必要了解服务端的部署，这里我们使用的是腾讯云。
你也可以选择将「小相册」源码中的server文件夹上传到自己的服务器。
请将红框部分换成自己的域名和证书，并且将proxy_pass设置为Node.js监听的端口，我的是9993。
配置完成后，重新加载配置文件并且重启Nginx。
在官方提供的镜像中，小相册示例的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时分配的APPID',cosSecretId:'填写密钥SecretID',cosSecretKey:'填写密钥SecretKey',cosFileBucket:'填写创建的公有读私有写的bucket名称',};另外，cd./routes/album/handlers，修改list.js，将constlistPath的值修改为你的Bucket下的图片存储路径。如果是根目录，则修改为'/'。当前服务端的代码中将该值设置为了'/photos'，如果你在第七步中没有创建该目录，则无法调试成功。
小相册示例使用pm2管理Node进程，执行以下命令启动node服务：
将蓝色框内的内容修改为自己的域名
然后点击调试，即可打开小相册Demo开始体验。
嗯，就这点不够爽，没有内测邀请。
文末有好奇心日报小程序的二维码，欢迎围观。
除了上面提到的全局配置，每个页面还可以单独配置page.json，page.json会覆盖app.json中的配置，并只对当前页面生效。page.json只能对window配置，有两个比较有用的配置项分别是：enablePullDownRefresh：是否开启下拉刷新disableScroll：只能在page.json配置，禁止页面上下滚动，猜测可以实现完美滑屏滑动（未验证）
App()用来注册一个小程序，全局只有一个，全局的数据也可以放到这里面来操作。
Page()用来注册一个页面，维护该页面的生命周期以及数据。
app.json和page.json维护了应用和页面的配置属性。App()和Page()维护了应用和页面的各个生命周期以及数据。
那么，APP和Page如何将数据传递到页面呢？页面又是如何渲染呢？
小程序虽然是hybrid模式，但并不使用HTML渲染，而是全部通过自定义标签来渲染页面。这样做的好处我不清楚，但问题却不少：不能跨浏览器、富文本解析困难，iframe视频不支持，没办法外链跳转。和所有的模板语言一样，WXML支持数据绑定、条件渲染、循环、模块化等功能。
在WXML中可以使用{{}}将Page的变量或者表达式包裹起来，实现数据绑定，举个例子：
//wx:for表示需要遍历的数据//wx:key使用唯一的字段来标识，有利于提升性能//wx:for-index表示数组的下标//wx:for-item表示数组的元素
WXML的模块化，可以让我们复用一些wxml片段，还挺重要的，举个例子：
小程序以栈的形式维护了历史访问的所有页面，并提供了多种页面间的跳转方式；结合前文提到的App()和Page()的各个生命周期，不同的跳转方式和不同的生命周期关联，如下图：
举个例子，Tab切换对应的生命周期（以A、B页面为Tabbar页面，C是从A页面打开的页面，D页面是从C页面打开的页面为例）
好了，APP和Page负责维护小程序的生命周期和数据，模板负责接受数据完成页面渲染，页面间的跳转负责将多个页面贯穿起来，那么，如何发生交互呢？接下来我们简单说一下事件。
//bindtap和catchtap的区别在于//bindtap不会阻止事件冒泡//catchtap会冒泡事件冒泡
传递自定义参数主要有两种方式：第一种：将参数绑定到wxml标签上，然后通过event.target.dataset获取第二种：直接使用Page.data或其他数据
到目前为止，一个完整的小程序框架已经实现小程序只有逻辑和视图两部分，而且不提供组件化解决方案逻辑主要包含四个东西：两个配置文件&&两个核心函数视图很简单，模板语法稍微有点不完善逻辑层的数据绑定到视图层是由小程序框架自动支持，数据变化，视图自动变化视图层到逻辑层的，主要通过事件的方式来实现视图之间的跳转，小程序也提供了它自己的方式，并不支持a标签
框架有了，小程序还提供了官方组件以便快速开发，提供了API以增强应用能力。
接下来会介绍更进阶一些的内容，内容主要结合好奇心日报这个小程序项目，先看效果：
按照pages、components、redux、vendors/libs、images几个核心部分拆分，直接上目录。
dist目录：构建输出的文件存放到这个目录。src目录：开发模式的文件，包括app、页面、组件、图片等静态资源、辅助函数库、Redux数据管理器、第三方工具库。gulpfile.js：不用多说，gulp构建任务的入口文件。package.json：不用多说，管理者构建任务的依赖。thirdPlugins：由于小程序并不支持直接使用npm，我们可以自主拉取构建，然后拷贝到vendors里，有时候需要简单修改。
构建系统会将src目录下的代码，编译处理后输出到dist目录，小程序开发工具只需要引入dist目录即可。
直接在thirdPlugins目录运行yarnaddredux/npminstallredux，等redux安装好了之后，将dist目录的redux.js/redux.min.js拷贝到vendors目录中。需要进行简单的修改才能使用，将压缩版208行代码(i)改成(i||{})即可。
一个完整的Redux方案如下，包括：将Store注入到App中、将state的数据和reducer的方法映射到Page中。一旦state发生变化，Page.data也会更新，进而触发页面的重新渲染。
这份组件化解决方案的核心就在于把组件的关联数据集中起来管理，只暴露出默认数据和数据的操作函数。
无论是数据复用还是离线缓存，配合数据扁平化，都非常好用。
小程序一旦滚动顶部或者底部，继续滑动的时候，就会出现拉扯现象。而这个拉扯现象还无法禁止。最新版可以对页面配置disableScroll，预计可以修复这个问题，待实际验证。
swiper组件之前并不支持轮播，最新版已修复swiper组件之前是通过设置left属性来实现动画，在小米5、华为V8等高端等安卓机上能够感受到明显的卡顿，当然原因是X5内核引起的。最新版已修复，换成了transform，性能有一定的提升。
文档并未标记可以垂直轮播，但其实是可以的。
//圆点的父元素，用来控制圆点间的间距.wx-swiper-dot{width:30rpx;//圆点，可以通过font-size修改圆点的大小，color修改圆点的颜色&:before{width:100%;display:inline-block;font-size:56rpx;content:'圆点编码';}//active状态的圆点&.wx-swiper-dot-active{&:before{color:#ffc81f;}}}小程序WXSS的font-face的url不接受路径作为参数可以将字体文件转换为base64，然后引用。
同样，如果想要使用iconfont，也可以使用类似的方案，将iconfont字体文件base64之后再引入。
之前发生margin折叠的时候，会取小的那个值。会导致底部留白等设置失效。
canvas并没有深入研究，目前的发现的问题主要是两个，如下图标记：层级问题，canvas总是会盖在其他元素上面。支持度不好，在小米5、iPhone5s画图会出现畸形。
最后通过CSS3的方式绘制饼图
请求返回404错误，也会触发success回调。不要想当然的认为会触发fail回调，判断一个请求成功或失败，请使用wx.request返回的状态来判断。只有不符合规范的请求，才会触发fail。
请求的数据中，如果有特殊字符（比如\u2820），会报错。只会在真机上出现，开发者工具没毛病。估计会有更多的特殊字符会导致这个问题。
最新版会遇到这个问题，老版本虽然不会报错，但是在部分真机上会出现问题。原因未知，遇到这个问题的朋友可以考虑绕过去。
依赖实时获取滚动位置的功能不能实现。比如滚动时toolbar的动态隐藏和显示。
但最新版开发者工具，不勾选也会自动刷新。
该参数是有URL决定的，也就是URL携带的参数。官方文档这块写的有点混淆，特意拿出来说一下。举个例子：url中传递的时候id=1，那么option.id=1，而不是什么option.query。
尽量传入精简的数据，保持Page.data和view间简单的绑定关系即可。
有遇到类似问题的朋友欢迎指出。
复制一部分上来
请查看本人回答:
=====================我是分割线===================
入门教程&视频：
所以对于英文不够的，此文提到的大部分，当然不能当做入门资料了。请直接跳转结尾。
课程和Quiz都免费，在Coursera同类课中，好评率第一，1700+的学生中，仅4个差评，很适合新手，并且会讲解一些实际项目的要求。
3.搜索类：一颗懂得搜索的心+Google+百度（中文，或者网盘资源）
2.Coursera上约翰霍普金斯大学的HTML,CSS,andJavascriptforWebDevelopers
学生评分4.9/5
Quiz小测验免费。
耗时：5周，4-6小时/周
好评大多集中在，课程的结构易于理解，上课方式非常棒，很有趣，非常适合新手，并且会和你讲解实际项目中的要求。另一个很大的优势是，相比于大多Coursera的付费Quiz测试来说，这门课的Quiz全免费。
学生评分4.5/5
耗时，4周，2-4小时/周
差评集中于，原本期待中级课程的学生，会失望的觉得太简单。对于完全新手来说的问题，主要是测试中的一些题超纲，并且因为不知道术语，难以用google搜索到。
b.香港科技大学的HTML,CSSandJavaScript
学生评分4.7/5
Quiz小测验需要付费。
耗时：3周，3-7小时/周
c.杜克大学的ProgrammingFoundationswithJavaScript,HTMLandCSS
学生评分4.4/5
Quiz小测验收费
耗时：4周，3-7小时/周
3.Udemy
这两门都是人气和评分排名较高的，涵盖了HTMLCSS和JS，也可以自行在Udemy上搜索综合课程。Udemy上的课都是付费的。
Udemy上也有很多丰富的优秀资源。不过局限性在于：
4.其他
专题：
最好的资料应该是官网了，
2、小程序注册入口
3、小程序体验入口：发现》小程序
4、第三方小程序导航站
5、小程序最新能力新闻见：
6、最新小道消息，要推出附近的小程序了，嗯哼
这个尝试叫：我也会写代码。
身边已经有不少朋友已经根据资料开始干活了，差不多有如下几类：
1）好好释放想象力，要是能在公测的时候做个有趣的小程序出来一炮而红那就赚大了
2）公司有一打的服务号，其实改成小程序会更合适（管它合不合适，改了再说！）
3）又是一轮洗牌的机会！那个公众号的功能是我先想到的但被别人抢了，这次我要在小程序里第一个做出来并做到第一名！
这几天通过目前公开的资料我已经对小程序的整体架构有了个初步的认识。我的风格一向是从架构和系统设计的视角做一些深度的，有观点的分析。现在终于可以回应朋友们的问题，谈谈我怎么看了。
官方这么说：
小程序的入口在哪？
目前公开的资料里对大家最关系的入口问题只提到了小程序可以扫二维码打开，于是业界对小程序的入口有了这么几种流行的假设：
[配图1]
可能性:99%。小程序不能出现在朋友圈，流量从哪来？
假设一：出现在发现tab页面中，游戏下面（每个小程序占用一列），同时摇一摇也可以得到附近的小程序
[配图2]
可能性:80%。和一把腾讯的游戏挤在一起，不亏待你吧。
假设二：和当前的公众号、服务号类似，安装出现在会话列表
[配图3]
可能性:90%。新的开放能力和旧的开放能力用一样的入口不奇怪吧。
假设三：安装后和nativeapp一样，直接出现在桌面
[配图4]
假设五：出现在一些内置流程中（比如和好友的聊天界面内，发朋友圈的界面（拍照后处理）
[配图5]
这里面我觉得比较有意思的地方有：
>>网络通信
只要目标服务器的域名在小程序配置的安全列表之类，就可以直接通信。不用考虑js的跨域问题了。
既然跨域都支持了，没准以后能像nodejs一样，直接在小程序里使用tcp,udp协议，并基于buffer有一定的二进制协议的开发能力。跳出HTTP协议的框架，对于IoT方向是很有想象空间的。
>>数据缓存
数据缓存接口的设计看起来和HTML5里的localStorage基本上一样，本来没什么好说的。但文档里的一句话引起了我的兴趣：
“注意：localStorage是永久存储的，但是我们不建议将关键信息全部存在localStorage，以防用户换设备的情况。”
>>并不兼容一些常见js底层框架
小程序的官方QA里有一段话：
“zepto/jquery会使用到window对象和document对象，所以无法使用”
这意味着所有基于HTML5的已有底层代码资产，并不能完全无缝的迁移过来。不过连jQuery这么常用的库都不能兼容还是有一点伤的。当然，现在用裁剪或兼容的方法，提供能在小程序平台运行的常见js底层库，短期内会很有市场。
MINA框架剖析
[配图7]
app.json小程序配置：
小程序里一共包含哪些页面。
页面套在一个怎么样的window里显示。
window是否需要支持多tab,支持的话每个tab的默认page是什么。
一些底层组件的默认参数。
app.js（可以理解为入口函数）
处理app的几个关键事件:onLaunch,onShow
定义了app级（可以在不同的页面之间共享）的数据的格式
app.wxss公用样式表
每个页面的样式表，都是从这个应用级公有样式表继承下来的。
index.js:包含Page的逻辑处理代码
其中比较重要的就是定义Page的数据（wxml可以通过数据绑定机制直接访问）
index.wxml:Page的布局文件
随便从demo中选一个布局文件来看，其整体结构非常简介清晰，即使没有提供任何资料也大概能看出来表达了一个什么样的页面。
.wxml不算是完全的静态布局文件，还支持条件渲染和列表渲染。
.wxml使用{{}}语法来简单直接的支持数据绑定。
可以通过template的方法进行复用
index.wxss:样式表
Page的整体设计上有比较明显的“反应式”编程风格，相信有vue.js,angularJS，reactive.js开发经验的同学可以很快上手。由于没有内测资格所以没法在手机上测试性能，不清楚小程序的这套框架有没有反应式编程常见的性能问题。这个等公测后写个有10万条数据的列表，看看滚动流不流畅就知道了。
目前demo没有使用ES6，所以看起来没那么“现代化”，这也可能是因为小程序这个项目立项比较早的缘故吧。不过ES6是大势所趋，相信未来小程序会支持使用ES6开发。
一个基于MINA的小程序最后是如何跑起来的呢？
“开发者写的所有代码最终将会打包成一份JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似ServiceWorker，所以逻辑层也称之为AppService。”
网上已经有不少人通过琢磨开发工具的实现的方法，做了比较深度的研究了，推荐阅读：
简单的总结一下：
wxml文件通过编译会得到html，wxss文件通过编译会得到css，分离的各个页面的JS和App的主JS文件最终会打包在一起得到AppService。开发状态下运行小程序，基于blink内核，每个html会加载一些mokojs用来支持框架功能。生产环境在手机上估计是运行在一个专用，定制的浏览器内核中。
为什么是MINA
“以后互联网的发展方向可能更偏重于HTML5”
而有的人又认为
“由于框架并非运行在浏览器中，所以JavaScript在web中一些能力都无法使用，如document，window等。”也就是说，一个已存在的HTML5页面，并不能通过自动转换工具变成一个合法的Page，而需要有工程师根据HTML5页面的功能，使用MINA框架再实现一次。
[配图HTML5与MINA在功能上有交集，但并不相等]
想要系统的提升自己的设计能力，简单的来说就是“多看+多想”，那么如何多想呢？我有一套还算完整的方法的，简单来说有如下几步：
首先，在研究一个新东西以前，先想想这个新东西，是为了解决什么样的问题出现的。问题要多提，往深了提，反复提炼，最后得到几个好问题。或则从一个问题，引申出一些子问题。很多时候只要问题提对了，设计就明白了大半。
下一步就是试着自己解决一下，回答一下自己提的问题，并比较不同的解决思路的优劣，形成一个对问题解的标准。比如说问题是“如何在一个超长文本中查找子串？”那么对问题的评价标准就可以是查找速度，以及查找过程中的内存占用。
接下里就是看别人是如何解决这些问题的了。如果和自己的设计差不多，一边窃喜一边开始按自己预先设计的评价标准对别人的设计的好坏进行判断。如果是自己完全没想到过的解法（这通常会出现在第一次接触某个领域问题），可以按图索骥的补充一些基础知识，再回来看。如果这个领域或解法非主流到不是常见范式，那么可以安下心来好好搞清楚，想明白。这样带着问题研究设计，才能有效的提高自己的设计能力。
当然是不是这个原因也只有张小龙自己知道了，这是一个揣摩动机的答案，所以没有评价标准。问题终结。
虽然SAYNO的理由，有一条就够了。但如能从其它角度思考一下为什么不是HTML5,可以得到一些更有建设性的答案。
第二个问题：“MINA作为一个新框架，为什么会设计成现在的样子？”
可以肯定的是，这是MINA的架构师在综合了多个因素后，拿出来的一个自己最满意的答案。所以这是一个非常有建设性的问题，思考这个问题的时候，就开始逐步代入MINA的架构师视角了。
让我们一起进入MINA架构师的角色，首先在否决了HTML5后，要设计一个什么样的框架来支持小程序的交互开发？第一步就是要给这个新框架提一些基础性的目标与需求。
这是一个现代化的框架，在最终表现力上要足够好。
要面向更多的非专业开发者，所以学习门槛要低。
大规模的专业团队进行团队开发时，能有足够的工程支持。工程支持包括：模块化代码易于长期维护和修改。这意味着基于框架的实现具体需求的结果要足够清晰，好读。
可复用性设计。
小程序不需要安装就可以快速开始使用，只需要加载必要的资源就可以尽快展现用户需要的页面。
进一步思考这些需求该如何解决，并对不同的解决方案进行评价需要的领域知识非常多，已经超过了本文的讨论范围。我在这里要做的只是带你入门，让你开始思考设计问题就够了。这也是本文的核心目的：学会对新技术，新设计进行独立的分析和判断。至于结果么，现在小程序还处于一个早期的状态，等公测了之后在下结论也不迟。
这种规范的设计也方便实现小程序之间的互相访问，可以通过一个类似wxapp://appid/pageid/的URL直接导航到另一个小程序的某个特定页面。这是App时代的超连接系统，App的信息孤岛也许就此打破。
现在小程序只提供了前端的开发功能，但从整体逻辑上已经包含了应用的上传，审核，发布流程。
假设三、使用小程序连接一切
我并不认为小程序只是一个体验更好的服务号。张小龙说小程序是“触手可及”，“用完即走”，“无处不在”的。那么什么场景会需要这种能力我觉得“有复杂程序的低频商业行为”会有这种需求。举两个实际的例子：
例1：有一间智能会议室，入口处有一个二维码。会议室的使用者扫描后可以打开一个小程序，通过这个小程序可以更好的访问、控制会议室的各种设备，比如灯光，窗帘，幕布等。
例2：去体检，体检表上有个二维码，扫描后打开一个小程序，通过这个小程序可以更好的引导用户自助完成自己的体检项目。