微信小程序浅析

最近微信小程序火得不行，玩玩看。官网地址

1.小程序原理分析

小程序为发布之前，好多人说要颠覆什么XXX。作为一名搬砖狗，我思考的是他的技术原理是什么，顿时各种热修复、动态更新之类的黑科技涌入脑海，仔细想想，发现不可能，且不说热修复（仅针对android，IOS不了解）各种兼容性稳定性问题，实现难度问题，鹅厂做的东西怎么可能让你侵入原生代码呢？于是想起了《App研发录》竞品分析章节中HTML5的zip包增量更新，使用类似的技术应该是一个比较靠谱的实现方式。现在小程序正式发布了，我们可以撸上一把了。

1.1初探

在官网的简易教程–>创建程小序实例一节中可以看到下面一句话：

我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例

哈哈，看到js文件，小程序本质是个webview估计已经跑不了了，我说了不算，看看官网工具-细节点里有这么一段话：

• 在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore中，是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10
• 在 Android 上，小程序的 javascript 代码是通过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 37 内核来渲染的
• 在 开发工具上， 小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的

小程序是个webview妥妥的。

1.2再探

从现象入手：

1. 第一次打开某个小程序的时候会有个比较大的流量峰值，再次打开的时候不会有流量峰值出现。
2. 退回到桌面，查看一下后台，可以看到有两个微信实例，其中一个是平时的微信，另外一个是小程序！
   
3. 在运行小程序实例时，从微信进入小程序秒开；长按桌面键，从后台清除小程序实例，再次进入小程序，会有个初始化两三秒的过程，但是没有流量峰值出现。
4. 打开开发者选项（我的是android）显示布局边界，可以看到除了标题栏以下部分是一个view。
   

下面是个人瞎BB的原理，没有深入分析证明，如有雷同，算你抄我；如有错误，你来打我啊（逃

1. 在第一次打开小程序的时候，会将该小程序的代码下载下来。并且缓存在本地，再次打开的时候会请求微信服务器是否该小程序有更新，有则重新下载并缓存新的代码文件（有可能是部分，也有可能是全部）。
2. 前文也提到，微信小程序必须有app.js、app.json、app.wxss三个全局文件。微信初始化的时候创建新的线程，初始化webview内核以及微信的各种黑科技，然后读取app.json里的配置文件， 该文件直接决定了你整个小程序的页面结构，你在这个文件里没有配置页面结构或者配置错误，不好意思，微信不认识你。还有初始化js全局变量、全局样式等。

1.3小结

既然微信小程序本质是个webview，那么和公众号中打开的webview有什么区别呢？我们注意到Q&A中，有这么几个点：

1. 为了提升体验流畅度，编译后的代码包大小需小于 1MB ，大于 1MB 的代码包将上传失败。
2. 页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件
3. zepto/jquery 会使用到window对象和document对象，所以无法使用。(Jq狗晕倒在厕所)

因此，小程序的不同点包括但不限于以下几个方面：

技术层面
1. 快速。（相对公众号webview） 小程序代码缓存在本地，只要没有更新，每次从本地取，相比每次都加载，速度有大幅提升（说句题外话，公众号webview对于静态html还是会缓存一定时间的，并且android版还清不掉缓存，在html头声明不允许缓存他还是缓存了！后台改了html根本没反应，刚开始玩公众号的时候在这个坑爬了半天！）。并且开了新的实例，方便应用切换，并且该webview经过了优化（瞎猜的）。
3. 轻盈。（相对原生app） 上文也提到了，代码不允许超过1M，比其他app十几M设置几十M小了很多。
4. 快速发布、修复。（相对原生app） 不说了，经历过app发版&&修复&&用户死活不肯升级的同学，应该知道我在说什么。

用户层面
1. 少装app，如果只是需要某个功能就装app，桌面不忍直视。
2. 相比公众号webview,省流量，也就是省大把大把的钱。参照技术层面第一点。

2.新手司机开车

JJYY了半天，还不开车就要挨叼了。各位旅客您好，你现在乘坐的是rancho945号列车小程序车厢，请带上电脑，插上网线，准备上车。新手上路，有错的，请各位路过的老司机多多包涵与指正。

1. 下载安装微信开发工具，下载地址点击这里，要是问怎么安装的，出门左拐看看自己住的楼层够不够搞（认真脸）。
2. 按照简易教程步骤来的话，你会发现找不到小程序AppID的，哪怕是认证了的公众号也找不到，公众号AppID != 小程序AppID。小程序也没有测试号，要真的玩的话必须交300软妹币注册并认证（再次强调你认证了公众号是不代表你认证了小程序！）才能进行开发，并且不针对个人开放，只能是公司、政府机构等。
3. 扫码登录，新建小程序，选择无AppID，命名项目名称，选择保存路径。没有AppID开发出来的东西也只能在开发工具上浏览，想上传到微信服务器分(zhuang)享(bi)是不行滴。
   
   
4. 最终，hello world工程就新建好啦。
   

有人会问，就这么多？废话，要不然呢？如果是一名专业的H5er，看看代码结构、查查文档和API，大概就知道砖该怎么搬了。By the way,作为一名码农，看文档实现getting start应该是码农的基本修养。当然，想要把砖搬得漂亮，还是要有比较深厚的底子才行。下一篇将会讲讲代码结构，照葫芦画瓢做个demo出来。