258资源分享网

相信最近几天，大家都被微信小程序（MINA）内测开始的新闻引爆了朋友圈，甚至因此引发了js的学习狂潮（笑）。有幸作为早期参与进来的自选股攻关小分队的我们，内心也是激动不已 ...

相信最近几天，大家都被微信小程序（MINA）内测开始的新闻引爆了朋友圈，甚至因此引发了js的学习狂潮（笑）。有幸作为早期参与进来的自选股攻关小分队的我们，内心也是激动不已，希望可以尽早给大家分享一些开发经验和踩过的坑。不过呢，由于MINA的开发权限还没有完全放开，有一些具体的内容还在保密阶段，我们在征求了微信开平同事的同意后，将开发过程中的一些经验和改进方案整理出来，希望可以对其他开发者提供一些参考。

引用一段官方介绍：

    MINA是微信提供的一套应用框架，通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一套完整的Javascript Api，使得开发者能够非常方便的使用到微信客户端提供的各种基础功能，快速构建一个应用。

    在页面视图层，我们使用wxml搭建页面的基本视图框架，使用css控制页面的视图样式。wxml是MINA提供的一套类似html的标签语言，同时也提供了一系列的基础组件，帮助我们快速构建视图。在页面中不能使用脚本代码，页面渲染所需要的数据，以及页面的交互处理逻辑都是在AppService中。我们提供了很方法将AppService中的数据与页面进行单向绑定，当AppService中的数据变更时，会主动触发对应的页面组件的重新渲染，这里使用virtual-dom的技术，加快页面的渲染效率。同时我们为页面组件提供了bindtap、bindtouchstart等事件监听相关的属性，可以与AppService中的提供的事件处理函数绑定在一起。实现页面向AppService层同步用户的交互数据。

    AppService是每个MINA的服务中心，由微信客户端在页面视图层外启用异步线程单独加载运行，MINA中所有使用javascript编写的交互逻辑、网络请求、数据处理都必须在AppService中实现，且AppService中不能使用DOM操作相关的脚本代码。应用中的各个页面可以通过AppService实现数据管理、网络通讯、应用生命周期管理和页面路由管理。

所以有了这么棒的底层框架，我们才更有信心把自选股这么重的应用搬到小程序里。

微信小程序除了在底层架构的运行机制做了大量的优化，还对重功能（page切换、tab切换、多媒体、网络连接等）实际上是更倾向于使用native组件承载。而对于自选股来说，除了大量的数据，行情图的展示也是不可缺少的一环。而如果没有原生绘图组件的支持，那么这样的重功能一定会影响到速度，从而降低用户体验。

    由于自选股的行情图是自研的前端模块，里面涉及到坐标系、几何图形、技术指标等大量模块，我们希望能够在尽可能少的修改代码就可以平滑的在小程序环境下完美运行。因此我们主动与微信开平团队交流，推动了Canvas Native的组件化流程，并共同构思了Canvas Native的语法、图形API的支持。

做过H5的前端开发一定对截图的Canvas语法不陌生。

（canvas原生写法） 

（协商讨论后的支持写法）

可以看到，绘图语法基本没有变化，其中wx.createContent()是创建并返回绘图上下文context对象。 其中，context只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟canvas不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个canvas。而context.getActions()是获取当前context上存储的绘图动作。输出结果如下：

最后一步，使用wx.drawCanvas()进行绘图。