微信小程序，何方神圣？

有人可能会困惑微信小程序跟微信内嵌H5有什么区别？

其实如果你玩过微信小程序，你就能发现流畅度以及体验方面，小程序是完胜的
本质其实就是hybrid（混合）的app
介于web app与native 原生app之间，具备丰富的调用手机各种功能的接口，同时又具备灵活性，跨平台，维护成本也相当原生app较低，开发迭代速度也比较快

放一张网上的图,可以看出这三者的区别

来自https://www.bittiger.io/blog/post/owdfwZQkZo4dgeh7D

“操作系统中的操作系统，生态中的生态”

有人这么评价小程序是“操作系统中的操作系统，生态中的生态”
就像是微信里面又开了一个app store一样，然后里面的app跟着微信自定义的规则来编写，其实就是个微信操作系统中的app

一开始我是拒绝的，微信搞了自己的一套基于原生的规范，还做了大量的限制，所以当时我并没有看好微信小程序，但是因为微信影响力的缘故，并且宣传做得太好了，朋友圈、社区等等各种爆炸新闻，热度、活跃度也非常高涨，各种《第一个小程序教程》《微信小程序入门指南》等等层出不穷，然后整理小程序教程的repos的star量都能达到几k，让人不由得想去探探小程序的究竟

谈到生态的话，开放的时候，很多app很快就上线了相应的小程序，基本都是原生app功能性的弱化版，还有一些功能性较强的小应用之类的，比如什么亲戚计算器等等
然而，有人就会想着，小程序是否会打击到原有app的流量以及下载，用户是否会直接放弃原有的app？做小程序的效果反而适得其反？这确实要引起开发者们的思考

微信小程序，路在何方？

过了刚开始的火热的阶段后，小程序就陷入一段低迷，很多人开始觉得它是鸡肋，只是微信巩固它本身的超级流量而诞生的跟公众号类似的内置应用罢了，流量难以转入本身的app,用户粘性也不高，正如小程序的特点“无须安装、触手可及、用完即走、无须卸载”

其实接触过微信小程序后，发现有些东西其实是网上的误导或者自身的误解。

先来看看上面的问题，小程序是否会打击到原有app的流量，其实这个问题很好解决，你只要看看这个应用跟用户的交互度的高低，如果存粹是一些小工具的话，功能相对单一的话，毋庸置疑，必然打击，我就简单举个例子，比如摩拜单车，我们其实只需要扫码用车，根本不需要别的东西，我为何还要下载一个app应用，但是类似其他用户交互度比较高的，比如滴滴出行，小程序功能就很简单，只能供用户简单使用，打到快车，但是原生应用上则功能较为丰富，用户往往不会卸载掉原生的app

说到上面功能的阉割，既然小程序只是一些app应用的弱化版简化版，那小程序有何作用，它能带来什么收益？

曾经我也觉得它很鸡肋，但是随着最近小程序开发团队的频繁能力升级以及自己的接触，仿佛看到了小程序是一块尚未挖掘开的巨大市场。

首先是微信小程序的能力升级，先是开放个人开发者，然后公众号支持添加转发，再然后开放群相关能力，小程序码以及数据分析能力也相应开放，着实让人看到微信小程序背后开发团队的活跃以及微信相关方面的重视，一些能力的升级让小程序的推广能力更强，让开发者有更大的权限去拿到用户关系以及一些用户信息，让体验更好。

其次是「匿名聊聊」小程序带来的启发，匿名聊聊通过小程序码在朋友圈推广，可以跟分享小程序的朋友匿名聊天，瞬间刷爆朋友圈，有消息透露，它四小时访问量高达40万，虽然因为微信不允许这种“影响朋友圈”的行为，最后被说由于“诱导分享“暂停服务了，但是我们从这里可以看到小程序的强大影响力以及在社交关系上的强大优势，在这个移动互联网的时代，微信基本已经成为流量主体入口（根据questmobile数据，微信日活已经到达6亿），微信一方面利用小程序来巩固自己的流量超级入口地位，我们何尝不可以利用它的流量以及实体用户来给自己带来红利，就类似匿名聊聊这类的，正常用户很少会去下载这样的app,这就跟陌生交友这些类似了，但是在微信这个载体下就不一样了，用户身份是相对有保证的，用户通过微信入口进入你的应用，通过微信用户之间的关系就可以做很多事情了，也可以选择跟本身app用户连动，来使得用户留存

但是值得注意的是，并不是所有小程序都能享受到微信流量的红利，如果只是单纯做一个app简化版的小程序，又有何用，用户无法看到你开发的微信小程序的优势和方便所在，做不到吸引用户，用户就只会放弃你的产品，个人觉得，小程序不应该是所谓的“用完即走”，而是“用完很爽，下次还来”，打造一个精心制作的应用，利用微信小程序带来的社交以及流量的优势打造一个与原有app有所不同但是可以看到用心制作的精致小程序，这样用户用完对产品认可，完全可以唤醒产品的更多用户，不过，这就需要去试验以及推敲，像「匿名聊聊」这种打着用户心理将小程序玩成爆款的就是一个很好的例子

关于开发微信小程序的感受

微信开发者工具

微信提供了自己的开发者工具（支持保存编译，ES5转ES6，压缩代码等），反正从发布到现在也迭代好多版本了，目前直接使用它的编辑器开发觉得还可以，没遇到很大的坑，调试工具中css部分没有盒子模型、computed style之类的这点还有待提高

小程序开发框架

对于小程序开发框架，文档是这么写的

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

小程序也的确实现了现代前端框架的数据与视图绑定的特点，而不是dom的形式，但是它最大的缺点是缺少自定义组件化的特点，虽然框架中提供了import/include，还有template,还有它内置的组件，这些可以提供js模块化，还有wxml模板之类，但是远远达不到我们想要的，小程序很大程度跟vue很接近，包括一些绑定以及条件渲染与列表渲染等等，但是vue还有一个很大的特点就是组件系统，网站最基本就是html/css/js，但是其实我们就可以把应用抽象成组件树，它们都是由一些可复用的组件构成，这样构建速度会非常快，而且维护方便，极大地提升效率

但是小程序目前还不支持，只是它内置了一些基础组件，不过之后会不会出现，无从得知
小程序目前比较明显的缺点，就是组件化支持不够，npm包下载不方便（需要自己拷贝进去，不支持node_modules），css一些属性支持不足
不过这些可以用我们自己搭的脚手架，通过gulp/webpack编译，让它们支持一些我们想要的特性，腾讯Budly就开发了一个wepy框架，它学习了vue的风格，使用单文件，通过拆解编译形成小程序的wxml/wxss，具体我还没用过，star量也1000+了，觉得思路很好赞一下

小程序DEMO：

project
├── pages
|   ├── index
|   |   ├── index.json  index 页面配置
|   |   ├── index.js    index 页面逻辑
|   |   ├── index.wxml  index 页面结构
|   |   └── index.wxss  index 页面样式表
|   └── log
|       ├── log.json    log 页面配置
|       ├── log.wxml    log 页面逻辑
|       ├── log.js      log 页面结构
|       └── log.wxss    log 页面样式表
├── app.js              小程序逻辑
├── app.json            小程序公共设置
└── app.wxss            小程序公共样式表

使用wepy框架后目录结构：（perfect!）

project
└── src
    ├── pages
    |   ├── index.wpy    index 页面配置、结构、样式、逻辑
    |   └── log.wpy      log 页面配置、结构、样式、逻辑
    └──app.wpy           小程序配置项（全局样式配置、声明钩子等）

回到微信小程序，开发时还遇到一些小坑，比如实现回到顶部，这个在浏览器轻松实现，但是小程序没有提供bom/dom，唯一跟scroll搭上钩的就只有一个组件scroll-view,但是我还需要顶部下拉加载（居然跟它的scrolltoupper事件冲突了？），只能用一些小技巧来规避这些问题，在切换时我想回到顶部，瞬间将列表项data设为空，再填入数据，这样就回到顶部了，虽然也实现了效果，但是未必有些hack

再谈谈小程序的rpx单位吧

rpx（responsive pixel）:
可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6	Plus 1rpx = 0.552px	1px = 1.81rpx

这个还挺不错的，让适配比较容易，不然在前端开发中还得使用rem、百分比等等一些技巧
不过需要注意
它官网提醒了在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。
我也体验到了这个毛刺
当你使用padding-bottom: 0rpx的时候你会发现其实是有缝隙的，但是0px是不会有的

总之，小程序整体来看还是不错的，而且开发团队也一直在努力，经常半夜两三点更新发布小程序的能力😂，也一直在往主流前端框架靠，支持了数据绑定、模块化、ES6等等，上手也很容易，不过要用它来做出一个让用户认可的精致的产品还是需要费很大的心思的

最后

谢谢阅读～
欢迎follow我哈哈https://github.com/BUPT-HJM
欢迎继续观光我的新博客~（老博客近期可能迁移)

欢迎关注