小程序教程

微信小程序架构分析 (下)

字号+ 作者: 来源: 2016-11-23 09:49 我要评论( )

这一篇拖了一段时间,原因是实现一个可以运行微信小程序的 web 环境比我想象中要困难一些, 这一方面是因为微信对于代码进行了压缩混淆,另一方面主要原因是开发者工具内部逻辑调用比较复杂(难怪 bug 不少),完全无法拿出来重用。
小程序实时运行工具 wept 的开发已经基本完成了, 你可以通过我的代码对小程序的 web 环境实现有更全面的认识。下面我将介绍它的实现过程以及实时更新的原理。
小程序 web 服务实现我在 wept 的开发中使用 koa 提供 web 服务,以及 et-improve 提供模板渲染。
第一步: 准备页面模板我们需要三个页面,一个做为控制层 index.html,一个做为 service 层service.html,还有一个做为 view 层的 view.html
index.html:

  1. <div class="head">
  2. </div>
  3. <div class="scrollable">
  4. </div>
  5. <div class="tabbar-root">
  6. </div>
  7. <script>
  8.   var __wxConfig__ = {{= _.config}}
  9.   var __root__ = '{{= _.root}}'
  10. </script>
  11. <script src="/script/build.js"></script>
复制代码


service.html:

  1. <head>
  2.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3.   <link href="https://res.wx.qq.com/mpres/htmledition/images/favicon218877.ico" rel="Shortcut Icon">
  4.   <script>
  5.   var __wxAppData = {}
  6.   var __wxRoute
  7.   var __wxRouteBegin
  8.   global = {}
  9.   var __wxConfig = {{= _.config}}
  10.   </script>
  11.   <script src="/script/bridge.js" type="text/javascript"></script>
  12.   <script src="/script/service.js" type="text/javascript"></script>
  13.   {{each _.utils as util}}
  14.   <script src="/app/{{= util}}" type="text/javascript"></script>
  15.   {{

     

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
<