微信小程序开发体验

在使用Vue开发出我想要的web小程序后,我萌生了移植到手机端的念头。Weex是阿里开源的一个使用Vue开发跨平台应用的工具。其概念大致等同于React Native,主打一次开发(Vue),全平台支持(Android/iOS/Web)。但是在短暂研究了它的编译、部署后,感觉需要的学习曲线也很陡峭,不仅涉及到多平台的编译、打包,还有各种新的语法和标签,而且实质上也绕不开native的学习,所以就先搁置一边了。

后来,非常巧合地发现了美团的一个开源项目mpvue——一个用来将Vue程序编译为微信小程序的开源工具。”hmm……小程序,不也是跨平台的嘛”我这样想着,就开始着手把之前Vue实现的app转到微信小程序上。后来在简单试用mpvue和wepy(腾讯出的Vue转小程序工具)后,最终选用了wepy。技术上和功能上,mpvue要更高级和方便,wepy则需要更多的小程序语法,可是mpvue太新了(不到半年),文档匮乏、社区太小,遇上问题将很难调试。

小程序开发环境

进入正题,首先你需要一个小程序开发者账号。这个账号和个人公众号的账号是平级的,所以我必须用一个新邮箱申请注册。(PS 每一个账号只能开发一个小程序,每一个个人只能拥有5个小程序。)

小程序网页管理页面

填写基本信息后,会得到一个appid,这个用于本地程序的开发和部署。小程序的开发需要使用腾讯专门提供的跨平台开发工具(IDE),这个可以在官网下载。这个IDE除了可以开发小程序,还可以用于预览在微信上看到的网页。

小程序IDE

打开项目时,直接选择使用wepy-cli创建的项目目录即可(有关wepy项目的创建可参见其官网)。wepy项目在编译后会输出至dist目录,小程序IDE也会自动加载这个目录作为小程序源代码。

至此,就完成了小程序开发环境设置,接下来只需要在项目目录运行npm run devyarn dev即可实现程序热更新了。

小程序语法

小程序并不能算是纯粹的web应用,它有自己独立的一套文件、语法系统。例如它的网页文件不是html,css和js;相对应的是wxml、wxss和wxs(wx即微信)。不过js也是支持,和在原生浏览器上运行应该无差异,具体可以参考其文档。

使用这些新的语法系统,有非常多的局限性,不过也可以想象,小程序是运行在微信里的,语法严格和简单,会让程序运行更加可控;毕竟复杂的程序都会有其自己的原声版本。好在是对于小程序的这些限制/功能,官方给出了详尽的文档和解释,所以只要适当的绕开它们就行了。

另外,这套语言有非常多Vue的影子,相信这也是wepy和mpvue得以诞生的原因之一。以wepy为例,它的一个重要的作用,就是重新允许开发者添加npm引用。wepy在编译成最终的小程序源码时,会把用到的npm从庞大的node_modules目录中提取出用到的部分,然后打包成最小的js文件。这一点也是wepy最吸引我的地方,因为这样一来,npm里面的开源类库就可以方便调用了。

除了在IDE中可以方便的调试(深度定制化的Chrome DevTool),还可以通过点击“预览”按钮在手机上打开。对于开发版小程序,手机上还可以使用单独的两个功能——“调试工具”和“性能监测”来辅助真机调试。又因为我们开启了热更新,IDE中的UI也会实时更新,在这个IDE上的开发体验可以说是非常流畅。

小程序发布

开发就说道这里吧,其中细节上遇到很多坑,但一点一点也算是趟过来了,最终获得了一个可工作的小程序。下面就是发布环节了。

发布的第一个条件是——一个图标。

没有办法,只有使用自己蹩脚的PS,勉强做了一个图标。

用Pixelmator做的图标

不论如何,必要条件都搞定了。下面首先是上传代码,直接在IDE里的工具栏中点击“上传”即可。上传可以看成是git里面的commit,需要输入一些message来标记。代码上传后,登录网页版,在版本管理里就可以看到刚才提交的版本了。

小程序一共有三个版本。开发版本,对应最后一次上传成功的代码,可以将其中一个版本设为“体验版”,如何体验还没研究;也可以提交审核。审核版本,会列出当前正在审核的版本,可以选择撤销审核。审核成功后,即可将该版本提交为“线上版本”,也就是生产环境用户看到的版本。

个人体验,初次审核速度不到一天左右,第二次审核不到2小时,不知道是快还是慢。因为毕竟只是一个非常小的小程序而已。

总结

这次尝试名为开发小程序,实际上用到的几乎全是Web开发需要的功能,小程序能力上的特长并没有发挥出来。抛开微信巨大的流量引入不说,从开发者的角度来看,小程序最大的特性实际上是对系统API的封装。通过对这些API,开发者可以非常方便的去调用诸如摄像头、声音、GPS、传感器、蓝牙等等硬件设施。只要程序对于性能要求不高,即所谓“小程序”,那么开发一款跨平台的“手机App”就不在是那么困难的事了。

You Might Also Like
发表评论