叶倍宏：小程序如何提炼前端开发的最佳实践
#北京源头创新大会年终盛典#
本文整理自OSC广州元创大会上叶蓓虹老师的《微信小程序直播教学》，主要带大家实现一个完整的小程序应用，了解小程序如何提炼前端开发的最佳实践。
嘉宾介绍：叶蓓虹，加拿大UBC计算机专业本科生，毕业后就职于加拿大支付公司，回国后多次创业，先在深圳小象网担任合伙人、CTO，后在大理做远程自由职业者，2016年在广州创办思科教育，主打前端培训。
1.小程序的价值
张小龙阐述了基于小程序价值的产品开发思路。他认为应用号的形态大致是：“公众号的一种新形态。这种形态下，当用户关注一个公众号的时候，就像是在安装一个APP，当他想找这个公众号的时候，就像是在找一个APP。通常这个账号不会给用户发送任何东西，所以APP就会静静地存在在那里，用户需要的时候就可以找到它。这样，我们可以尝试让更多的APP以一种更轻的形式存在，但是以一种更人性化的形式存在。这是我们正在探索的一种公众号的新形态，叫应用号。”
开发者应该根据应用的价值观去思考产品的可能性，比如商城太复杂，不符合“用完就走”的价值观。成功的案例有摩拜单车、空调应用、微信支付等轻量级应用，通过设计一个界面（页面）或者在微信里增加一个按钮，就可以满足用户的需求。
2. MINA 框架概述
小程序整合了前端开发界的很多概念，但是没有用到任何框架，包括现在流行的 VUE、等等。它不是三者中的任何一个，而是用新的框架拼凑起来的。流程类似：
3. 现代前端技能
小程序引入了现代前端开发的一些非常重要的概念，包括：
● DOM：开发者在编写iOS、原生h5应用时，经常需要手动操作UI，用户通过按钮来切换页面。当应用比较复杂时，切换过程中可能会出现错误。每次切换DOM界面都会重新制作修改，避免出现错误。
●MVVM：逻辑与数据分离。
●组件化：功能和样式模块化，每个样式封装成组件，防止泄漏。
4. MINA 是 HTML 5 吗？
微信小程序刚出来的时候，大家都在猜测它是基于什么技术，是H5还是原生。它的框架看起来既像H5又像原生。小程序是用H5代码编写的，但不遵循H5的标准编写风格。它在很多方面借鉴了Web技术，但很多细节又不一样。
1. MINA 是 HTML 5
●支持大多数CSS属性：最新布局，传统文件流布局，百分比单位，CSS动画，
●几乎所有组件都已实现
●您可以选择自动将ES6转换为ES5
2.MINA 不是
●非标准标签（组件）：我们知道浏览器使用的是标准主键，但在MINA中，小程序自成体系，虽然后台依然是使用浏览器主键实现，但是在前端写HTML时加入了自己的一套标准。
●非标准CSS：rpx是微信小程序CSS的大小单位，rpx可以自适应屏幕宽度，屏幕宽度指定为，例如上图，屏幕宽度为，一共有750个物理像素，则= =750个物理像素，1rpx = 0。
● 非标准事件系统：当按下按钮时，会分配一个事件。此事件也是非标准的，但与非标准非常相似。它包括冒泡阶段和捕获阶段。
●非标准JS API：支持微信的接口，但是没有标准JS接口。
●无法操作或DOM：虽然运行在浏览器中，但是无法操作浏览器本身或者原生文件本身，只能利用DOM来改变页面。
●部分组件默认高宽奇怪（,）：一般浏览器都会以图片内容高度为主要键值，基本所有组件默认高宽都是0，小程序是按照-实现的，所以所有图片都会得到一个初始宽高320 240，无法自动重置，只能通过具体值改写。
●：由于小程序是自成体系的，所以无法使用JS包和CSS框架，一切都要从头开始。
●1M套餐在线：可更快下载。
5. 完整小程序应用演示
前端开发人员可以快速开发小程序，因为样式、内容等概念基本相同，但具体接口不一样，不能直接套用。小程序对一些事件的处理有自己的标准，比如点击按钮时需要审核代码，发出请求。
微信小程序基于 MINA 框架，官方提供了很多封装好的组件和 API 供开发者调用，包括一些常用的滚动视图、按钮、图片组件，以及地图、画布组件，为以后在小程序中嵌入一些小游戏、简单的地图应用提供了可能。
MINA 组件
基础：视图、文本
形式：，，，
媒体：，，，
模式： -，，，
容器：，
导航：，
当然，更值得注意的是微信提供的API，主要包括一些网络、媒体、数据方面的API，具体可以参考：关于API，微信官方文档介绍为“可以轻松调用微信提供的能力”。或许，微信到底会提供哪些能力，将成为小程序发展的关键。
那么微信小程序该怎么写呢？我们以同性交友平台为例：
项目源码地址：
开发的首要前提是使用微信登录，并确保已经取得内测或者公测的资格。
微信开发者工具下载地址：
打开之后你会看到以下界面：
选择要进入的小程序后，可以添加项目：
左侧是菜单栏，中间是可实时更新的编译预览界面，右侧是项目目录。
微信小程序采用页面化设计，将样式、UI、逻辑放在三个不同的文件中。这样一来，微信小程序的开发就变成了一个个小页面的设计，每个页面分别负责实现各个组件的样式、布局、逻辑，一定程度上降低了代码的耦合度。
微信小程序通过wxss、js、wxml文件来实现各个页面的样式、逻辑、视图（UI）。每个页面默认包含或者包含以上三部分。它还有三个类似的全局文件，当某个页面默认时，会默认使用全局的样式。但建议全局文件只实现统一的样式和逻辑。
以下对这三个部分进行详细描述：
1. 风格
开发者需要将微信小程序的页面样式实现在 .wxss 文件中，一个页面对应一个样式文件，如果没有文件，则会使用 app.wxss 中定义的默认样式（全局样式）中的属性。建议每个页面实现一个样式，app.wxss 中只实现通用的样式。wxss 支持 css 支持的绝大部分样式，还有一些独有的特性，可以将其写成 css。 开发者可以将其看成定义各个控件的 .xml 文件。例如：
.- {
：#；
：#FFF；
字体大小：10px；
：3像素；
它定义了一种称为的字体样式，并指定了其背景颜色、字体颜色、字体大小以及字体与边框之间的间距。
2.逻辑
逻辑代码主要实现在.js文件中，里面定义了一些自身的业务逻辑，还可以接收和处理UI传递过来的一些事件（参数），实现一些用户的交互。例如：
（五）{
.log（“”，e.）；
这。（{
：嗯。
});
}，
它是获取用户输入，并将用户输入的内容赋值给变量。然后你只需要在相应的UI控件上把它的事件链接到这个函数上就可以了。
微信小程序还支持将一些公用逻辑抽象成函数，放在单独的js文件中，只需要编写一个函数，然后使用 . 暴露给其他js文件，其他js文件就可以直接调用（path）函数然后使用，类似Java静态函数的方式（类似Java静态函数）。
（姓名） {
.log（' ' + 名称 + '！'）
。 = {
：
= （'.js'）
页（{
：（）{
.('米娜')
}）
3. 用户界面
UI主要在.wxml文件中实现，类似于xml和html，主要定义页面的控件类型，指定控件交互事件调用的逻辑，控件的样式类型。微信目前提供了一些基础控件供开发者使用，使用语法绑定数据，支持条件渲染、列表渲染，类似逻辑代码模块化，还支持UI模板定义和引用，具体可以参考官方文档。
=“{{}}”
=“”
=“”
=“”
=“”
/>
如上图设置了一个输入框，其用户输入事件由js代码中的函数处理，还指定了,,的处理事件，其显示的值由变量决定。
代码编写完成后，可以点击项目选项，在界面上点击预览，会弹出一个二维码，可以使用注册的微信账号在真机上预览，开发者可以在真机上进行测试。
项目源码地址：