好消息，微信从7.0.6正式版开始支持websocket压缩协议permessage-deflate。
 
 
微信小程序小游戏的开发者，请立刻开启压缩，减少用户和服务器流量到未压缩时的30%！
 
 
（在网上还没看到介绍的文章，其实非常有用，做个简单介绍，希望能帮助到大家。文末有彩蛋）
 
 
 微信客户端
在微信客户端仅需增加一行代码，在连接socket的方法中传入相关参数：
 
wx.connectSocket({
  perMessageDeflate: true
});
 
 
 
 服务器端Netty
不同服务器端有各自支持permessage-deflate的代码或配置，以Netty为例，也仅需增加一行代码，在ChannelPipeline中加入WebSocketServerCompressionHandler。
 
		ChannelPipeline pipeline = ch.pipeline();
		if (sslCtx != null) {
			pipeline.addLast("ssl", sslCtx.newHandler(ch.alloc()));
		}
		pipeline.addLast("codec",new HttpServerCodec());
		pipeline.addLast("aggregator", new HttpObjectAggregator(maxFrameSize));
		pipeline.addLast("compress", new WebSocketServerCompressionHandler());
		pipeline.addLast("handler", webSocketServerHandler);
 
 效果
在我们的微信小游戏项目中，开启permessage-deflate压缩后，平均和峰值流量都下降到未压缩时的30%左右，效果非常明显，为用户节省了不少流量费用，也显著减少了网络传输时间。
 
我是彩蛋
据小道消息，微信将在9月初支持小程序小游戏使用http/2协议，网络性能将进一步得到优化提升。届时作者也会跟进介绍。

微信小游戏快速上手教程
 
文件结构
 

小游戏只有以下两个必要文件：
 
game.js 小游戏主程序入口
game.json 配置文件
运行环境
 

小游戏的运行环境跟小程序类似，运行在 JavaScriptCore 中，因此没有 DOM、BOM API。
与小程序一样，小游戏每次发布需要经过审核。我们在小程序和小游戏中都移除了动态执行代码的能力，包括以下调用方式： 
  
eval 函数
setTimeout、 setInterval 函数第一个参数传入代码字符串执行
使用 Function 传入字符串构造函数
使用 GeneratorFunction 传入字符串构造生成器函数
HTML5 游戏适配指引
 

现有 HTML5 游戏希望移植到小游戏环境，主要需要针对小游戏做以下适配：
 
所有 DOM、BOM API 改成小游戏相应的 API 调用方式
避免在游戏中使用动态执行代码的能力
前期为了减少游戏移植成本，我们提供了一个 Adapter ，它基于小游戏环境模拟封装了一套 BOM、DOM API 暴露到全局。
 
配置项
 

游戏小程序开发者通过在根目录编写一个 game.json 文件进行配置，开发者工具和客户端需要读取这个配置，完成相关界面渲染和属性设置。
 
key
数据类型
说明
默认值
deviceOrientation
String
支持的屏幕方向
portrait
showStatusBar
Boolean
是否显示状态栏
false
networkTimeout
Number
网络请求的超时时间，单位：毫秒
60000
networkTimeout.request
Number
wx.request 的超时时间，单位：毫秒
60000
networkTimeout.connectSocket
Number
wx.connectSocket 的超时时间，单位：毫秒
60000
networkTimeout.uploadFile
Number
wx.uploadFile 的超时时间，单位：毫秒
60000
networkTimeout.downloadFile
Number
wx.downloadFile 的超时时间，单位：毫秒
60000
deviceOrientation
 
值
说明
portrait
竖屏
landscape
横屏
示例配置
 
{
    "deviceOrientation": "portrait",
    "networkTimeout": {
        "request": 5000,
        "connectSocket": 5000,
        "uploadFile": 5000,
        "downloadFile": 5000
    }
}

 wx-gesture-lock  微信小程序的手势密码
 


 
 WXCustomSwitch 微信小程序自定义 Switch 组件模板
 


 
 WeixinAppBdNovel 微信小程序demo：百度小说搜索
 


 
 shitoujiandaobu 小程序：石头剪刀布（附代码说明）
 


 
 audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义
 


 
 star 微信小程序开发之五星评分
 


 
 switchCity 微信小程序开发之城市选择器 城市切换
 


 
 huadong_del  微信小程序滑动删除效果
 


 
 jianhang_menu 微信小程序开发之圆形菜单 仿建行圆形菜单
 


 
 xiaoxiaoxiao_lazyload  实现微信小程序图片懒加载特效
 


 
 kangaiduowei  微信小程序：康爱多微商城：学习界面设计
 


 
 tianmao_dazhuanpan  小程序实现大转盘 仿天猫抽奖 跑马灯效果（有图有源码）
 


 
 weapp-meirong  微信小程序学习用demo推荐：美容商城；列表，预约
 


 
 baisi  微信小程序仿百思不得姐
 


 
 weapp-one 仿 「ONE · 一个」 的微信小程序
 


 
 netmusic-app  仿网易云音乐APP的微信小程序
 


 
 a_takeaway  微信小程序的外卖demo
 


 
 sideslip  微信小程序『侧边栏滑动』特效
 


 
 wx_plo  微信小程序之仿微信漂流瓶
 


 
 kwonWhere 微信小程序-知亦行
 


 
 audiodemo  微信小程序开发之视频播放 弹幕 弹幕颜色自定义
 


 
 wxChart  微信小程序图标插件
 


 
 guoku  微信小程序-果库
 


 
 snake  微信小程序-贪吃蛇小程序
 


 
 douban_movie  微信小程序-仿豆瓣电影
 


 
 RecordDemo  麦克风动画
 


 
 shishanggou  实现了包括常用组件，ajax获取数据，模板使用，路由等的使用，下拉刷新数据；
 


 
 jiajuzaixian  家具在线-演示如何使用下拉选项
 


 
 wechat-app-ipinbb  爱拼宝宝-功能非常全的电商应用
 


 
 TodayNews-wx  微信小程序-今日头条
 


 
 WXNative-bpgg  奔跑果果-微信小程序
 


 
 wechatapp-demo   是目前我发现的，实现实用功能较多的demo，推荐大家学习研究
 


 
 weapp-MatterAssistant  微信小程序－事项助手
 


 
 weapp-wymusic  微信小程序 仿网易云音乐
 


 
 weapp-wechat-nearby  微信小程序-仿找事吧app附近三公里
 


 
 bs  精简版百思不得姐
 


 
 WXBaiSi  微信小程序版 百思不得姐
 


 
 weapp-demo-breadtrip  基于面包旅行 API 制作的微信小程序示例
 


 
 html-to-wxml  小程序中将html内容转化成wxml可以显示的内容，方便用于小程序中显示
 


 
 kachezhijia  自卡车之家，有丰富的卡车司机和物流园区的资源，所以这个小程序可以说也是他们未来工作上的一个必将实施的项目。
 


 
 WxEmojiView   微信小程序Emoji展示输入组件alpha 0.1
 


 
 GankCamp-WechatAPP gank.io (干货集中营) 微信小程序 版本
 


 
 wechat-JD  微信小程序仿京东首页
 


 
 wechat-turntalbe-canvas  用微信小程序开发的Canvas绘制可配置的转盘抽奖。
 


 
 mangguoTv  微信小应用-小程序-demo-仿芒果TV
 


 
 wxreading  微信小程序跟读
 


 
 WeChatMeiZhi  微信小程序版妹纸图 API from gank.io
 


 
 CountDown  微信小程序倒计时组件
 


 
 weapp-github  微信小程序--github
 


 
 wechat-weapp-mapdemo  微信小程序开发demo-地图定位，非常简单的demo，只为了解一下微信小程序
 


 
 wechat-cnode  微信小程序 cnode社区版
 


 
 weapp-newsapp  微信小程序-公众号热门文章信息流
 


 
 wechat-weapp-taobao  微信小程序demo 仿手机淘宝
 


 
 timer  番茄时钟微信小程序版
 


 
 wechat-app-music  微信小程序：音乐播放器 技术栈: redux + es7 +labrador
 


 
 fenda-mock  使用微信小程序实现「分答」这款APP的基础功能
 


 
 Wa-UI  针对微信小程序整合的一套UI库
 


 
 wx-query  微信小程序 仿jQuery插件
 


 
 weapp-artand  微信小程序 Artand
 


 
 WeiXin-SmallApps-Information  微信小程序-仿今日头条
 


 
 weapp-wechat-zhihu  微信中的知乎--微信小程序
 


 
 WeApp  基于微信小程序开发的仿微信demo
 


 
 SmallApp  微信小程序
 


 
 wechat-v2ex 微信小程序-v2ex
 


 
 weipiao 微信小程序-微票
 


 
 DouBanBookApp   微信小程序之小豆瓣图书
 


 
 wxapp-calc 一个简单的微信小程序-简易计算器
 


 
 weapp-wechat-zhihu   模仿知乎的小程序
 


 
 wx-movies-demo   小程序--影讯
 


 
 caiquan  微信小应用，猜拳小游戏
 


 
 hayeah-wxapp-Breakfast  小林早厨微信小程序
 


 
 AppleMusic  微信小程序，仿Apple Music
 


 
 cnode_wechat-webapp 用cnode社区api做的微信小应用
 


 
 shoppingcar 一个点餐、购物的购物车效果
 


 
 wechat-weapp-mall 微信小程序实现移动端商城
 


 
 SmallAppForQQ  高仿手机QQ应用程序
 


 
 zhihudaily  微信小程序-知乎日报
 


 
 wechat-weapp-gank 微信小程序-干货投稿应用
 


 
 TeamToy  调用TeamToy API 的微信小程序 Demo
 


 
 douban 微信小程序（应用号）示例教程（豆瓣电影）

课程介绍
 
本课程是一个系列入门教程，目标是从 0 开始带领读者上手实战，课程以微信小程序的核心概念作为主线，介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展，另外加上开发工具的安装、小程序发布等内容，共 9 篇文章。
 
本课程共包含四个部分。
 
第一部分（第1-3篇）带你初步了解小程序是什么，然后进行小程序开发的准备工作，从注册账号到安装开发工具一应俱全。工欲善其事，必先利其器。
 
第二部分（第4-6篇）。面向入门级读者介绍小程序构成的各个部分。您不需要事前准备任何知识，需要掌握的会进行说明，需要扩展的会提供信息的出处。千里之行始于足下。
 
第三部分（第7-8篇）通过指南针的例子，介绍一个小程序的实现过程。通过这个实例，综合运用所学知识，使小程序开发能力进一步提高。麻雀虽小，五脏俱全。
 
第四部分（第9篇）只包含一篇文章，具体介绍小程序发布的过程。使读者能够对小程序开发的全过程有一个完整的了解。编筐编篓，全在收口。
 
哪怕您事先没有任何微信小程序相关技术的经验，认真学完该达人课之后，您会掌握基本的小程序开发方法，并具备自主扩展知识面，以及进行更高层次开发的能力。
 
点击查看课程全部内容
 
作者介绍
 
薛卫国，现就职于某外企担任架构小组责任人，CSDN 博客专家，长期从事 C++ 开发，精通 UML、设计模式，创办有公众号《面向对象思考》。毕业于东北大学，曾留校在国家重点实验室工作。
 
课程内容
 
第01课：初识微信小程序
 
要火的节奏
 
最近有一则来自北京商报的新闻引起了不少人的注意，我们这里选取一部分：
 
 
 
争夺流量 手机厂商“抱团”对抗微信小程序
 
 
3月20日，小米、中兴、华为等10家手机厂商联合对外宣布，推出基于手机硬件平台的新型应用生态“快应用”及相关标准。在微信小程序用户规模日益壮大、硬件利润微薄的背景下，本次快应用的推出被看做是手机厂商与腾讯争夺流量与利益的举动。业内人士认为，对于整个市场来说，流量竞争有促进作用，但微信已经具有较强的用户黏性，十大手机厂商要想争夺用户流量并非易事。
 
 
估计这些厂家的标准出台还需要一段时间，但是有一点可以确定的是：小程序类的开发要火。
 
但如果你打开轻应用的文档可以发现两点：
 
1.应用文档的信息量还很有限。2.轻应用的架构，采用的技术和微信小程序很相似。
 
处于这个目的，作者赶在这个时机制作了本课程，希望可以为潮流加一份力；作为程序员，希望各位可以通过本课程的学习，在有限的时间内为自己添一份技能！
 
参考资料：轻应用开发文档
 
什么是小程序？
 
最近一个小游戏“跳一跳”火得不得了，相信即使您自己没有玩过，身边的亲戚朋友也一定玩过。画面大致如下：
 
 
当然了，关于玩法等等不是本文的内容，可以参照百度百科。
 
这就是微信小程序的成功案例了。
 
微信小程序简介
 
微信小程序简称小程序，张小龙在微信公开课 Pro 上发布的小程序正式上线，时间是2017年1月9日。关于小程序，张小龙在他的公开课中有过很详细的说明，大家尽可以到网上去搜，这里不再赘述，只说作者自己的理解。
 
微信小程序这个词可以分解为“微信”和“小程序”两部分。
 
其中“微信”可以理解为“微信中的”，指的是小程序的执行环境；当然微信在提供执行环境的同时也延长了用户使用微信的时间。
 
“小程序”是说它首先是程序，然后具备轻便的特征。小程序并不像其他应用那样，它不需要安装，而是通过扫描二维码等打开后直接执行；用完以后也不需要卸载。这就是所谓用完即走的原则。
 
另外，微信不会提供类似于小程序商店的地方，需要小程序提供者自己通过二维码，群分享的手段来传播，这就是所谓去中心化的形态。
 
微信朋友圈提供了好友之间沟通信息的手段，订阅号提供了面向粉丝推送信息的手段，而小程序则是提供了用户通过自己的操作而与服务实现互动的手段。
 
小程序相关技术介绍
 
本课程的目标读者群是了解基本的 C/C++ 语法但对小程序开发完全没有经验的程序员，因此在说明微信小程序的同时，对相关技术也将进行相应的介绍。通过这种方式，可使读者能够非常顺利地学习，而无需到处寻找资料导致忘了学习微信小程序这个本来的目的。
 
微信小程序推出一年多一点的时间，算是一个新事物，但是利用的技术却都是已经存在的技术。如果你稍加调查就会发现，不光是微信小程序，很多类似形态的应用都采用类似的架构：
 
使用 JSON 技术来表现应用的配置信息。包含应用的基本信息，页面配置和路由，应用全体的信息等。
使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素，例如列表、按钮、文本框、选择框等都通过 XML 语言来描述，遵从 XML 语法，对于页面的共同风格，使用 CSS 进行定义。
使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理，系统 API 的调用等。
架构在视图层和逻辑层之间提供数据和事件传输功能，从而尽量减少难度。由于类似应有都属于轻应用，所以提供的功能都比较单一。
具体的语法，用途等将会在使用的时候详细介绍，这里只提一下相关技术的基本情况，了解即可。
 
换一种说法就是：并不需要另外自己调查，跟着本课程走下去就好。
 
JSON
 
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于 ECMAScript（W3C 制定的 JavaScript 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
 
XML
 
XML（Extensible Markup Language），中文名为可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。
 
在电子计算机中，标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种的信息，比如文章等。它可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。它非常适合万维网传输，提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是 Internet 环境中跨平台的、依赖于内容的技术，也是当今处理分布式结构信息的有效工具。早在1998年，W3C 就发布了 XML1.0 规范，使用它来简化 Internet 的文档信息传输。
 
CSS
 
层叠样式表（英文全称：Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
 
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
 
JavaScript
 
JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。
 
在1995年时，由 Netscape 公司的 Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作，Netscape 管理层希望它外观看起来像 Java，因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近。
 
为了取得技术优势，微软推出了 JScript，CEnvi 推出 ScriptEase，与 JavaScript 同样可在浏览器上运行。为了统一规格，再加上 JavaScript 兼容于 ECMA 标准，因此也称为 ECMAScript。
 
学习方法
 
微信小程序虽然是新事物，但学习方法却不是新方法。
 
我们的套路是：首先生产一个最简单的小程序实例，通过这个实例介绍微信小程序的构造和想法，这算是学习这个活动中“学”的部分。然后扩展这些知识点，通过开发一个简单的小程序的过程来运用这些知识点，这算是“习”的过程。
 
这是作者这些年来屡试不爽的方法。
 
参考资料
 
在学习和开发的过程中，我们主要会参考微信的开发文档。其原因是小程序太新了，相应的知识储备还不够丰富。虽然也可以找到一些开发方面的书籍，但是说实话，内容并不比微信本身的开发文档更详尽。
 
第02课：开发环境的准备 
 
创建自己的小程序账号
 
在开发自己的微信小程序之前，首先需要注册小程序账号，接下来我们一步一步做详细说明。
 
打开浏览器，输入：mp.weixin.qq.com。
 
 
因为是第一次使用，所以选择画面右上角的“立即注册”。
 
 
选择左下角的“小程序”方框。
 
 
输入邮箱、密码、确认密码、验证码，之后选择同意协议和条款。当然这里的密码不是邮箱的密码，而是正在申请的小程序账号的密码。
 
最后按下“注册”按钮。
 
 
点击“登录邮箱”按钮。打开相应的软件后，应该可以收到下面的邮件。如果没收到的话，建议看一下垃圾邮件，没准儿那里有。
 
 
单击下半部一大片绿色的部分，就可以回到注册界面继续剩下的工作。
 
 
选择主题类型为“个人”，然后输入管理员的姓名，身份证号码。
 
输入手机号码并单击“获取验证码”，将手机接收到的验证码输入到短信验证码栏中。
 
完成上述步骤，画面下部会出现一个二维码，需要用已经绑定银行卡的微信的扫一扫功能扫描该二维码进行实名认证。
 
如果认证成功，画面会变成下面这个样子。
 
 
点击“继续”按钮。
 
 
意思就是现在后悔还来得及，如果不后悔今后就没法后悔了。我们按下“确定”按钮。
 
 
大功告成！
 
小程序管理平台
 
账号申请成功之后，就可以登录“微信公众平台 | 小程序”了。在目前这个时间点虽然并不需要马上做什么。本文接下来将对其中重要的菜单功能做简单介绍。
 
首页
 
 
内容比较简单，主要是表示小程序的实时访问次数和系统公告。
 
开发管理
 
 
用户在使用小程序的时候，需要扫描二维码进入。而这个二维码需要开发者将小程序上传到腾讯服务器之后从腾讯取得。上传过程便在该页面上完成。
 
过程也不复杂，一共分为三步：上传代码，提交审核和发布小程序。
 
用户身份
 
 
这个画面用来指定小程序项目的管理员和项目成员。其中项目成员又包括开发者和体验者。
 
数据分析
 
 
这个画面可以统计小程序的访问数量，对用户来源、性别、年龄分布等进行分析。
 
模板消息
 
 
这个画面可以定制微信小程序向客户发送的消息。
 
客服消息
 
 
通过这个画面可以指定小程序的客服人员，从而实现小程序的在线客服功能。
 
附近的小程序
 
 
当小程序的主体为企业、政府、媒体及其他组织时可以开通此功能。此功能有效时，小程序指定地点以后，用户可以通过微信的“附近的小程序”界面发现该小程序。
 
运维中心
 
 
一共有两个页面，分别用于查询小程序的错误日志和对客户端进行监控。
 
推广
 
 
用来自定义小程序推广关键字。
 
设置
 
设置分类中一共有五个页面，这里只介绍前两个。
 
基本设置
 
 
顾名思义，这里主要是用来设置小程序的基本信息。内容包括：
 
设定小程序名称，小程序头像；
取得小程序码；
取得认证；
设定主题信息；
其他省略。
开发设置
 
 
这个页面主要负责和小程序开发相关的设定信息，内容包括：
 
取得小程序 ID。每一个发布的小程序都需要唯一的 ID。
生成小程序秘钥。
指定服务器域名。小程序可以访问外部网站，可以上传和下载文件。但是对象服务器不是任意的，需要在这里指定。
其他省略。
其他
 
在画面的右上角，有两个链接“文档”和“社区”分别可以进入小程序开发文档和社区。在实际的学习过程中可以积极利用。
 
安装开发工具
 
小程序账号申请成功之后的工作就是准备开发环境。
 
早期的版本在首页分类中有开发工具的下载链接，最近不知道为什么变成了访问次数统计画面。但是没有关系，可以直接点击这里，便可打开下面的下载地址页面。
 
 
根据操作系统选择合适的下载链接。
 
 
下载完成后打开安装程序，首先是开始画面。
 
 
按下“下一步”按钮。
 
 
按下“我接受”按钮。
 
 
指定适当的安装目录后按下“安装”按钮。
 
 
安装中……
 
 
完成！
 
接下来就可以开始微信小程序的开发之旅啦！
 
第03课：微信开发者工具介绍
 
第04课：小程序构成介绍——配置文件的形式和内容 
 
第05课：小程序构成介绍——WXML 和 WXSS 
 
第06课：小程序构成介绍——事件处理和数据绑定 
 
第07课：小程序开发实例——指南针（上） 
 
第08课：小程序开发实例——指南针（下）
 
第09课：发布小程序 
 
点击查看课程全部内容