# 小程序初探
> 原文：https://pjhubs.com/2018/01/08/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%9D%E6%8E%A2/
>
> 作者：PJHubs · 发布于 2018-01-08 · 标签：跨平台、微信、小程序
近期筹备期末考试，但每天晚上还是有些空闲时间的，想着今年要好好经营一番GitHub，因为今年给自己定下了一个“宏大”的计划——打满小绿点！当然在执行这个计划的过程中可能会由于某些突发情况导致“断点”，但梦想还是要有的嘛。
因此，啃下小程序就成为了我今年的第二件事情（第一件事为iBistu 4.0），完成这个去年就十分想踏入的“坑”。在去年也就是上个学期的某一天得知小程序面向个人开发者后，就一直按捺不住自己，总想着试一试，但因为当时开始了第一份实习工作，导致这个计划迟迟未能展开。最难受的是没想到在上学期末总共收到了两份小程序开发的外包需求，一咬牙用了大概一晚上加一个白天的时间吭吭哧哧的摸索了一番，最后的结果是——放弃。🙂把这个外包需求移交给其它同学后，草草了事。
但是现在不一样了啊，当时是因为动机不纯，现在有大把的时间可以快活~也就把这个事情提上了日程。小程序，张小龙同学给微信生态又注入的一个新成员，用张小龙同学的话来说，之所以要推出小程序，初衷是因为，“让信息触手可及，改变应用程序需要下载、安装的繁琐过程”。🙄，俗话说的好，话不能说的太满，后续发生的事情大家想必都已经了解。
在小程序推出至今也用了大大小小不下十几个小程序，不得不说确实是达到了张小龙同学所说的“用完即走”的概念，而且依托于微信开发团队强大的封装能力，为小程序提供了调用非常简单的API，使用起来难度比Native降了不止一个层级。在此给大家推荐两本书，
我主要也是通过这两本书和网上的一些教学视频等资料习得小程序开发的核心内容，并且采用[V2EX](https://www.v2ex.com)所公开的API做了一个简单的小程序[demo](https://github.com/windstormeye/V2EX-Little-Program)，为后续继续搞事情做铺垫。
我们先来明确几个概念，
1. 微信对小程序的包大小限制在了1M以内。所以尽可能的进行封装；
2. 如果你有使用到tabBar，微信对小程序的tabBar图片资源推荐尺寸为81*81px，并且大小不超过40KB；
3. 小程序与目前的前端开发技术有部分区别，比如无div概念，但有view标签，可充当div；无p、span标签，但text标签，且不能渲染HTML，只能text标签才能被选中；
4. 如果你有使用到< image>标签，但未设置size，小程序的默认图片大小为300*255；
5. 跳转页面的wx.navigateTo() 只能跳转非tabBar页面；
6. 小程序官方强烈推荐使用flex布局（弹性布局）；
7. 如果你要在小程序中访问URL资源，及得一定要先到小程序后台进行安全域名配置安全域名，否则你将无法进行网络请求。
8. 小程序一个页面（假设为home页面）有以下四个文件组成：
a. home.js：当前页面的网络请求、页面跳转等逻辑；
b. home.json：当前页面的一些配置，比如是否支持山下拉刷新等；
c. home.wxml：当前页面UI布局（相当于HTML）；
d. home.wxss：当前页面的UI美化（相当于CSS）
---
如果你之前有过一点web开发经验，会发现它的web端设计实际上是可以直接套用在小程序上的，只不过你还需要进行做很多标签的适配，比如像上文所说的，需要把div换成view等，但因此次只是学习小程序的核心内容，所以样式部分我们就不花费太大心思了，凑合着写写。😀
做任何事情都需要提前准备，给V2EX做小程序端也是一样的，我们需要设计一套简单的交互及UI，当然你也可以用纸笔直接画，在此我推荐大家去使用[墨刀](https://modao.cc/)，这个原型设计工具目前在产品中传播得很广，使用和接受程度较高。因为也是原型设计，我就不把自己设计得丑陋不堪的UI个稿放出来了。设计如下：
参照V2EX的web端设计，我们可以发现其是一个列表，只需要用到一个image、四个text和几个view标签做布局就好了
该列表下展示出了各个tab下的相关内容，所以，我就直接套用了它的信息流展示展示方式，下面是做好的最终展示，
---
经过三天晚上的摸索，慢慢的发现了开发小程序的一些套路，[工程在这](https://github.com/windstormeye/V2EX-Little-Program)，第一次写小程序，很多地方考虑的还是比较肤浅，只能说是勉强入了门。给我整体的感觉小程序确实不能承载很多以往Native能够做到的事情，缺点还是不少，而且越写越觉得就是在写web啊，但它就不是web，运行效率跟Native不相上下（还是有些粗糙的地方），它能做的事情真的是少之又少，如果你只是想在微信这个生态里玩，那没问题你会很嗨皮，如果你要想稍微跳出这个圈子发挥点特长，对不起不行。
不过换句话来说，小程序的这些缺点其实也正是它的优势所在，它抛弃了众多设备特性抹平了各种不同设备的棱角，大大的缩小了适配所带来的庞大工作量，确实还真挺适合作为初创团队或者个人开发者搞些小事情的（而且我觉得也就适合做点小事情了）。不过我们最终做出一个小程序，千万记得一定要在真机上进行测试。关于小程序开发的更多细节，大家可以看[官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/)，说句心里话，小程序学起来一点都不难，但是想要设计出一个好的小程序确实得需要下很大功夫的，在这么一个受限的环境下想玩出不一样的东西，嗯。。各位同学加油吧💪。
后续想做一个iBistu新闻小程序，把现有在iBistu上的新闻模块抽离出来，单独开发一个小程序去作为承载的入口，也算是继续开拓自己的技能吧。🙂
