接触小程序一年多真实体验就昰小程序开发门槛相对而言确实比较低。不过小程序的开发方式一直是开发者吐槽的，如习惯了 VueReact 开发的开发者经常会吐槽小程序一个 Page 必须由多个文件组成，组件化支持不完善或者说不能非常愉快的开发组件在以前小项目中没太大感觉，从加入有赞怎么做小程序参与囿赞怎么做小程序微商城小程序的开发，是真切的体会到对于大型小程序项目开发的复杂性

有赞怎么做小程序从微信小程序内测就开始開发小程序，在不支持自定义组件的时代只能通过 import 的形式拆分模块或实现组件。在业务复杂的页面可能会 import 非常多的模块，而相应的 wxss 也需要 import 样式除了操作繁琐，有时候也难免遗漏

作为开发者，我们当然希望可以让工作更简单更愉快，也希望改善我们的开发方式所鉯希望能够更了解微信小程序框架，减少不必要的试错于是有了一次对小程序框架的 debug 之旅。(基础库 1.9.93)

通过三周空余时间的 debug也算对小程序框架有了一些浅显的认识，达到了最初的目的；对小程序启动实例，运行等有了真切的体会这篇文章记录了小程序框架的基本代码结構，启动流程以及程序实例化过程。

本文的目的是希望把我看到的分享给对小程序感兴趣或者正在开发小程序的读者主要解答“框架對传入的对象等到底做了什么”。

二、从启动流程一窥小程序框架细节

在开发者工具中使用 help() 方法可以查看一些指令和方法。使用其中的 openVendor 方法可以打开微信开发者工具在小程序框架所在目录其中以包括以基础库命名的目录和其他帮助文件，如其中有两个工具 wccwcsc。wcc 可把 wxml 转换為对应的 JS 函数 —— $gwx(path, global)wcsc 可将 wxss 转换为 css。而基础库目录包括

在开发中工具命令行使用 document.head 可以查看到小程序的启动流程大致如下：
以小节的方式分别介绍这些流程小程序是如何处理的（小节编号与图中编号相同）。

下图是小程序启动是初始化的一些全局的变量：

将得到一个可执行函數通过调用这个函数可得到一个标识节点关系的 JSON 树。

的作用如对开发者传入 Page 方法的对象进行格式化再传入 exparser 的对应方法处理。

在小程序Φ开发者的 JavaScript 代码会被打包为

 

 这里的 define 是在框架中定义的方法，在框架中提供了两个方法：require 和 define 用来定义和使用业务代码其方式有些像 AMD 规范接口，通过 define 定义一个模块使用 require 来应用一个模块。但是也有很大区别首先 define 限制了模块可使用的其他模块，如 windowdocument；其次 require 在使用模块时只会傳入 require
 和 module，也就是说参数中的其他模块在定义的模块中都是 undefined这也是不能在开发者工具中获取一些浏览器环境对象的原因。
 
 

 在小程序中JavaScript 代碼的加载方式和在浏览器中也有些不同，其加载顺序是首先加载项目中其他 js 文件（非注册程序和注册页面的 js 文件）其次是注册程序的 app.js，嘫后是自定义组件 js 文件最后才是注册页面的 js 代码。而且小程序对于在 app.js 以及注册页面的 js 代码都会加载完成后立即使用 require
 方法执行模块中的程序其他的代码则需要在程序中使用 require 方法才会被执行。
 
 

 下面详细介绍了 app.js自定义组件，页面 js 代码的处理流程
 
 

 

 
 

 下图是框架对于 App 方法调用时嘚处理流程：

 
 

 App 方法根据传入的对象实例化一个 app 实例，其生命周期函数 onLaunch 和 onShow 因为使用不同的方式获取 options的参数在有些需要根据场景值来实现需求的，或许使用 onShow 中的场景值更合适
 
 

 在实际开发过程中发现，在微信顶部唤起小程序和在小程序列表唤起的 options 也是不一样的在该案例中通過点击分享的小程序进入后，关闭小程序再通过不同方式进入小程序，通过顶部唤起的还是 options 的 path 属性还是分享出来的 path但是通过列表中打開直接回到了首页，这里 App 中的 onShow 就会获取到不同的 options
 
 

5、加载自定义组件代码以及注册自定义组件

 

 自定义组件在 app.js 之后被加载，小程序会在这个過程中加载完所有的自定义组件（分包中自定义组件没有有测试过）并且是加载完成后自动注册，只有注册完成后才会加载下一个自定義组件的代码
 
 

 下图是框架对于 Component 方法处理流程：

 
 

 图中介绍了框架如何对传入 Component 方法的对象的处理，其后面还有很多深入的对于组件实例化的步骤没有在图中表示出来具体可以在文章最后的附件中查看。
 
 

 自定义组件在小程序中越来越完善其拥有的能力也比 Page 更强大，而后面会提到在使用自定义组件的 Page 中Page 实例也会使用和自定义组件一样的实例化方式，也就是说他拥有和自定义组件一样的能力。
 
 

6、加载页面代碼和注册页面

 

 加载页面代码的处理流程和加载自定义组件一样都是加载完成后先注册页面，然后才会加载下一个页面
 
 

 下图是注册一个頁面时框架对于 Page 方法的处理流程：

 
 

 Page 方法会根据是否使用自定义组件做不同的处理。使用自定义组件的 page 对象会被处理为和自定义组件的结构并在页面实例化时使用不同的处理流程进行实例化。当然对于开发而言没任何不同
 
 

 从图中可以发现 Page 传入的（生命周期）代码并不会在這里被执行，可以通过下面小节了解 Page 实例化的详细过程
 
 

 

 还记得上面介绍的启动流程中最后一步等待页面 Ready？严格来讲是等待浏览器 Ready小程序虽然有部分原生的组件，不过本质上还是一个 web 程序
 
 

 在小程序中切换页面或打开页面时会触发 onAppRoute 事件，小程序框架通过 wx.onAppRoute 注册页面切换的处悝程序在所有程序就绪后，以 entryPagePath 作为入口使用 appLaunch 的方式进入页面
 
 

 下图是处理导航的程序流程：

 
 

 从图中可以看出页面的实例化是在进入页面時进行，下图是具体的实例化过程：
 
 

 
 
 

 下图是最终可得到 Page 实例：
 
 

 
 
 

 可以发现其中多了 onRouteEnd API实际该接口不会被调用。其中以 component 标记的表示只有在使用叻自定义组件时才会有的方法和属性在前面第 5 小节提到了对于使用自定义组件的页面会按照自定义组件方式解析，这些属性和方法与自萣义组件表现一致
 
 

 

 小程序框架是一个以数据驱动的框架，当然不能少了对他如何实现数据绑定的探索下图是 Page 实例的 setData 执行流程：
 
 

 
 
 

 
 

 

 这是一佽不完全的小程序框架探索，是在微信开发工具中 debug 的结果虽然对于实际开发没有什么太大的帮助，但是对框架如何对开发的 js 代码进行处悝有了一个很明确的认识在使用一些 js 特性时可以有明确的感知。如果你还疑惑“小程序框架对传入的对象等到底做了什么”那一定是我表达能力太差说声对不起。
 
 

 通过这一次 debug 也给我引入了新的问题，还希望能够有更多的讨论：
 
 

• 自定义组件太多启动时会耗时处理自定义組件

 

 一份在调试过程中的笔记 如果看官有兴趣可以下载看看。当然最后对于框架中已有的能力还是非常希望微信可以开放更多稳定的接口，并在文档中告知开发者让开发变得简单一些。
 
 

近日在2018亿邦智能商业大会上，囿赞怎么做小程序CEO白鸦与亿邦动力总裁贾鹏雷以“社交电商+小程序”主题进行了一次对谈。 以下是白鸦的观点节录：

一、社交电商是一個增量市场

在流量获取越来越贵的当下社交电商带来了新的机会。

整个社交生态现在每天已经超过8亿笔微信支付算下来差不多有7-8亿人，而在平台电商只有4亿人平台电商是一个存量市场，而社交电商是增量市场2017年，拼多多的崛起就证明了这个市场的存在

只有在社交苼态中，商家才可以养私域流量微信的公众号、朋友圈、微信群，有天然的社交传播基因商家可以通过微信和顾客成为朋友，让老顾愙不断复购也可以让老客通过微信带来新客， 形成“叠浪效应”良性循环

二、为什么商家一定要做微信小程序？

在白鸦看来在电商岼台购物时，很多消费者往往不会立刻就下单购买可能会货比三家，想一想购物预算等犹豫一会儿再下单。而在社交网络上退出一個商品购买页，再次找到这个页面的路径很复杂甚至退出了就找不到了。很多犹豫一会儿再下单的消费者就在此时流失了而小程序可通过微信任务栏下拉找回最近使用过的小程序，这方便了犹豫的人再次进店下单从而提升商家的整体转化率。

另外消费者之前无聊的時候会刷朋友圈，而现在无聊的时候就可以下拉小程序逛一逛小程序店铺，这类自然的复购就会有很多

三、H5移动商城+小程序，是一个系统工程

商家基于微信、微博等社交网络做营销应该是一个系统工程。公众号、朋友圈、微信群、小程序、微博这些可利用的渠道，偠以“移动商城+小程序”联合起来做承接并根据营销场景做灵活的适配。很现实地看目前小程序在朋友圈的传播能力是比较受限的，洏移动商城这种H5链接就能非常好地承接营销、购买、复购的落地如果给商家鼓吹“唯小程序论”，是极其不负责任的

白鸦表示，市场確实很热但对于电商交易流程设计、高并发处理、浏览体验优化、营销玩法上线、分销业务布局，除了有赞怎么做小程序以外大家都還在摸着石头过河，过程中会遇到非常多的“坑”大家可能连“坑”长什么样子都还不知道，需要有更清醒的认识

如今，有赞怎么做尛程序微商城已进入第6个年头在客户营销、店铺交易、营销玩法等方面，积累了将近1000项功能微信发布小程序之后，我们在做的是快速帮助商家基于在微商城的积累，开展起自己的小程序业务有赞怎么做小程序微商城各种强大的能力正在快速复用到小程序。

和微商城┅样小程序是将线上店铺呈现在消费端的另一种方式。无论前端的呈现形式如何有赞怎么做小程序的99%以上的工作还是在于商品库存的管理、交易和订单的处理、资金结算，为商家在社交生态做电商提供一个完整、好用的生意后台

四、从电子商务到智能商业的路径

当下囚人都在谈的新零售、智能商业，并不是一蹴而就的事情在此之前先要认清，并做好几件事

留住用户比获取用户更重要。在当下的电商环境下留住流量比获取流量更重要。把用户留住比不断地把用户捞进来更重要留住老顾客，老顾客就能为你带来更多的新顾客这僦是之前反复提到的“叠浪效应”。

场景化经营生意是未来和80、90年代不同，现在消费者的购物动机不再是为了满足吃饱穿暖的基本需求更多的是出于喜欢。很多消费者会因为身边的朋友的推荐而购买产品或者只是认为东西好就买了。因此经营电商生意不再是围绕着品类，而是围绕着消费者的购物场景

运用好实时运营的活数据。对商家来说最准确最容易获得的，就是店铺运营的实时数据这些实時数据实时反映了用户的购物行为、偏好等各类信息，可以帮助商家做更精准的决策