小程序初探
近期筹备期末考试,但每天晚上还是有些空闲时间的,想着今年要好好经营一番GitHub,因为今年给自己定下了一个“宏大”的计划——打满小绿点!当然在执行这个计划的过程中可能会由于某些突发情况导致“断点”,但梦想还是要有的嘛。
因此,啃下小程序就成为了我今年的第二件事情(第一件事为iBistu 4.0),完成这个去年就十分想踏入的“坑”。在去年也就是上个学期的某一天得知小程序面向个人开发者后,就一直按捺不住自己,总想着试一试,但因为当时开始了第一份实习工作,导致这个计划迟迟未能展开。最难受的是没想到在上学期末总共收到了两份小程序开发的外包需求,一咬牙用了大概一晚上加一个白天的时间吭吭哧哧的摸索了一番,最后的结果是——放弃。🙂把这个外包需求移交给其它同学后,草草了事。
但是现在不一样了啊,当时是因为动机不纯,现在有大把的时间可以快活~也就把这个事情提上了日程。小程序,张小龙同学给微信生态又注入的一个新成员,用张小龙同学的话来说,之所以要推出小程序,初衷是因为,“让信息触手可及,改变应用程序需要下载、安装的繁琐过程”。🙄,俗话说的好,话不能说的太满,后续发生的事情大家想必都已经了解。
在小程序推出至今也用了大大小小不下十几个小程序,不得不说确实是达到了张小龙同学所说的“用完即走”的概念,而且依托于微信开发团队强大的封装能力,为小程序提供了调用非常简单的API,使用起来难度比Native降了不止一个层级。在此给大家推荐两本书,
我主要也是通过这两本书和网上的一些教学视频等资料习得小程序开发的核心内容,并且采用V2EX所公开的API做了一个简单的小程序demo,为后续继续搞事情做铺垫。
我们先来明确几个概念,
- 微信对小程序的包大小限制在了1M以内。所以尽可能的进行封装;
- 如果你有使用到tabBar,微信对小程序的tabBar图片资源推荐尺寸为81*81px,并且大小不超过40KB;
- 小程序与目前的前端开发技术有部分区别,比如无div概念,但有view标签,可充当div;无p、span标签,但text标签,且不能渲染HTML,只能text标签才能被选中;
- 如果你有使用到< image>标签,但未设置size,小程序的默认图片大小为300*255;
- 跳转页面的wx.navigateTo() 只能跳转非tabBar页面;
- 小程序官方强烈推荐使用flex布局(弹性布局);
- 如果你要在小程序中访问URL资源,及得一定要先到小程序后台进行安全域名配置安全域名,否则你将无法进行网络请求。
- 小程序一个页面(假设为home页面)有以下四个文件组成:
a. home.js:当前页面的网络请求、页面跳转等逻辑;
b. home.json:当前页面的一些配置,比如是否支持山下拉刷新等;
c. home.wxml:当前页面UI布局(相当于HTML);
d. home.wxss:当前页面的UI美化(相当于CSS)
如果你之前有过一点web开发经验,会发现它的web端设计实际上是可以直接套用在小程序上的,只不过你还需要进行做很多标签的适配,比如像上文所说的,需要把div换成view等,但因此次只是学习小程序的核心内容,所以样式部分我们就不花费太大心思了,凑合着写写。😀
做任何事情都需要提前准备,给V2EX做小程序端也是一样的,我们需要设计一套简单的交互及UI,当然你也可以用纸笔直接画,在此我推荐大家去使用墨刀,这个原型设计工具目前在产品中传播得很广,使用和接受程度较高。因为也是原型设计,我就不把自己设计得丑陋不堪的UI个稿放出来了。设计如下: