小程序概览

昨晚微信团队宣布，微信小程序开启公测，开发者可以登录微信公众平台申请，开发完成后提交审核，公测期间无法上线。

前段时间我们也开发过一个小程序，现在来总结一下之前的开发经验。

1.什么是小程序？

微信小程序是原生应用与网页应用之间的一种接口，通过微信进行加载，达到与原生应用同等的流畅度。相较于原生应用，小程序更轻量、实时更新、跨平台；相较于网页应用，小程序资源离线，体验更流畅。

微信小程序的设计目标是让开发者能够以最简单、最高效的方式在微信中开发出具有原生APP体验的服务。

话不多说，我们来看看小程序的效果：

看到效果之后，你是否好奇接下来的发展呢？

2. 小程序实现机制

小程序的开发基于微信提供的一套应用框架。微信封装了微信客户端提供的基础功能，如文件系统、网络通信、任务管理、数据安全等，并向上层提供了一套完整的API，让开发者可以轻松使用微信客户端提供的各种基础功能，快速构建一个应用。框架设计如下：

框架提供了自己的视图层描述语言WXML和WXSS，以及基于的逻辑层框架，并通过单向数据绑定在视图层和逻辑层之间传输数据，让开发人员更加专注于数据和逻辑。

3. 支持的功能

接下来我们看一下微信框架具体提供的功能：

wxml：一切皆组件（视图组件）

更多wxml组件请查看微信公众平台小程序文档

4.功能API：

更详细的API请参考微信公众平台小程序文档

5. 其他：

现在就来详细开发一下吧~

小程序开发流程 1.获取微信小程序

2. 创建项目

创建项目需要使用开发者工具。（工具可在微信小程序公众平台下载）

3. 编写代码

首先我们来看一下小程序的目录结构：

微信对于小程序的开发有一些规定：

上图左侧的三个文件放在小程序的根目录下，其他文件由开发者自由控制。

其中app.js和app.json是必需的。

小程序页面由四个位于同一路径下同名不同后缀的文件组成：

H5开发中我们在页面中引入相应的css和js，而小程序开发不需要在wxml中引入，它们通过同一个名字将页面和逻辑js、样式进行关联匹配。

接下来我们开始具体的开发吧~

框架：小程序内置微信框架，无需额外框架

一般来说，我们开始开发的时候，都会从框架开始，但是小程序封装了一个为客户端设计的框架，作为小程序的开发者，你基于这个框架进行开发，不需要考虑现有的框架。

现有的框架基本都是建立在 、 对象之上的。小程序没有 、 ，或者说没有浏览器BOM宿主环境。你可以理解小程序的宿主环境是类似node的宿主环境，而不是浏览器客户端。关于这个环境的设计，有兴趣的朋友可以参考PWS

模块化：正式支持，加载引用更像ES6

小程序支持，通过加载，类似node，但是加载的是引用的赋值，而不是值的缓存。

小程序模块编写：

小程序的模块操作（类似node，框架会自动增加一层外层）：

模块化：UI 组件设计

在开发时，我们可能需要注意视图相关的组件的模块化，比如在H5中，我们一般将弹窗封装成模块组件，这样可以复用；在小程序中，视图只能是wxml，无法动态生成。

首先我们来看一下微信的弹窗视图组件，之前微信提供的API如下（微信有其他方式实现过该组件，这里为了描述问题就用它）：

看到这里，你有没有一种联想呢？如果一个页面需要使用100个弹窗框，那么开发者就需要创建组件，并注册对应的100个确定按钮事件和100个取消按钮事件。这显然是不合理的。

能不能在框架上封装成一个通用的组件，开发者只需要传入相应的事件句柄就可以了？微信以后可能会考虑封装一下~

不〜！

为什么？从框架组件设计来看，框架本身采用面向状态的编程方式，组件也是类似的设计（实际并未实现）

组件的View操作之后只能通过业务处理来更新，框架是单向数据绑定，无法自动更新。

对于该类型的View组件，建议根据需要重新封装，封装可以考虑以AOP的形式实现动态的注册和卸载。

1. 定义组件的通用模板

2.以AOP方式封装组件逻辑

1）组件默认配置：

2）组件封装实现

3.组件的使用：

1）在页面wxml中引入组件模板

2）在页面js中，随时使用弹框，不受限制

目前微信已经封装了此组件（api：wx.()调用弹窗），但是不能自动更新的特性依然存在，如果开发者需要定制其他可交互的UI组件，仍然会遇到上述问题，可以参考上述解决方案。

具体页面开发

对于业务页面的开发来说，可以将页面看成是一个页面组件，在这个页面组件中，完成了以下工作：

负责初始化组件（微信）

负责组合子视图组件形成页面效果（开发者）

确定js和view匹配的数据（开发者）

负责注册业务逻辑对象提供的业务逻辑方法（开发者）

负责管理业务逻辑对象（开发人员）

1）.wxml文件

2） .js

页面wxml与页面js的通信如下（简化微信框架的工作）

在页面开发中我们需要注意：

在页面js中，必须约定data是只读的。框架是单向数据绑定，修改data中的数据不会自动更新View；更新View需要使用()方法。()在更新View时，会和data中的数据进行Diff比对，不同才会更新。这样如果直接修改data，很容易导致data中的数据和View不一致。

{｛｛…｝｝，模板中的数据{｛｛｝｝}，{{}}，对应data中的数据为data:{｛:{“”,:“”}}，方便对子视图的控制。

这样就完成了页面级的开发~~YES!

小程序与H5的区别

在写代码方面，小程序开发和H5开发有什么区别？

：

1.限制：

为了安全起见，禁用了所有通过传入字符串来执行代码的能力，具体禁用的原生函数有：new、eval等，这也是比较有效的避免H5中类似xss问题的方法。

这些禁用的功能对于我们开发影响最大的应该就是字符串到 JSON 的转换，以前我们都是使用 new、eval 来处理后台 CGI 的返回（移动端一般都是封装成这种框架），小程序开发就需要对具体的实现进行改动。

在这些BOM中，对开发影响最大的应该是none。因为其他功能，比如小程序，也有类似的处理方式。在web开发中，是跟后台登录相关的。

该功能在小程序中不可用，用于兼容当前大部分网页的登录管理，在小程序发送请求时，客户端可以动态设置需要发送的消息。

请注意，它不能在客户端被读取或写入。

因为没有，所以H5中的CSRF问题理论上是解决了，小程序是否存在其他客户端安全问题，还需要技术和时间来验证~

优化

在H5中一般通过微信授权通过URL重定向的方式获取code；在小程序中则是通过wx.获取code，这样就避免了之前登录重定向的问题。

小程序取代H5和微信，每个小程序大小为10M，支持同步和异步。

（三）不便之处

1）每个页面都需要手动在app.json中注册，如果没有注册，页面将不会被执行。

2）打开页面数量限制为5个，开发过程中需要控制打开页面的数量。

wxss：

rpx()：可以根据屏幕宽度进行适配，屏幕宽度指定为，例如上图，屏幕宽度为，一共有750个物理像素，那么 = = 750个物理像素，1rpx = 0.5px = 1个物理像素。

4. 调试

开发完成后我们进行调试检查效果，跟移动端开发类似，添加手机日志。

开发工具调试：

手机客户端：点击右上角开始调试

5. 施工

小程序采用类似node的本地加载模块，所以不需要考虑模块合并，直接使用就可以。当然如果你使用ES6开发，还是需要的。

6.测试环境

具体微信还在调整中……

7. 发布

在开发工具中，提交全额，通过微信审核后，发布到微信小程序平台。文件发布加载流程如下：

8.版本更新

小程序在启动时会进行更新，先和客户端版本对比是否有新版本，如果有新版本则更新小程序后运行，否则直接使用本地资源运行。

这样小程序整体的开发和发布就结束了~

我对小程序产品的个人看法：

优势：

低门槛下载，作为微信的一部分，可以直接通过微信进入并使用，几乎可以看成是一个网页，无任何下载门槛。

跨平台，微信客户端底层封装，支持跨平台小程序

开发成本低，通过以往的开发对比，小程序的开发成本比网页端低，而且前端资源的存储、发布、运营都集成在微信里（如果和腾讯云功能结合，那就纯粹是关联了~~呵呵）

页面与原版类似，体验更流畅

小程序可以使用微信支付功能

限制：

基于微信框架开发，部分功能受限，不支持其他现有第三方插件；

同时仅能打开5个小程序页面，如果交互流程较长则难以支撑；

小程序包大小限制为1M（目前），只适合轻量级

关于微信框架API的详细信息，请参考

建议大家在开发小程序的时候，不要用和web app一样的思维。

结论

8月份开始项目内测，期间经历了几次翻天覆地的调整，不断痛苦的迭代，好在框架和开发工具已经比较完善和稳定了，期待小程序的正式上线~~

如果您觉得我们的内容不错的话，请扫描二维码赞赏作者并转发到您的朋友圈，分享给您的朋友吧~

本文由腾讯独家发布，转载请在文章开头显著位置注明作者及出处“腾讯()”。