微信小程序开发体验

在使用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,勉强做了一个图标。

图标

(右边的四个星星是南十字星,左下角是NZ代表新西兰。)

好吧,我承认很丑,可如果你见到第一版的程序本身,你才会明白什么是真丑。

第一版程序

(太需要一个会美工的朋友了有木有。)


写到这里,觉得UI确实有点内个……然后又花了一晚上适配了WEUI——微信团队推出的微信UI样式库,用于保持网页/小程序界面的一致性。类似的UI库还有很多,不禁感叹,现在这个念头自己写个程序真是太简单了。

第二版程序

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

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

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

总结

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

小阳漫谈, 扫码关注
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,718评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,683评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,207评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,755评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,862评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,050评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,136评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,882评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,330评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,651评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,789评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,477评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,135评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,864评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,099评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,598评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,697评论 2 351

推荐阅读更多精彩内容