从0到1上线一个微信小程序

0.0 前期准备

微信小程序的出现极大地下降了我的开发者微创业的门槛，不须要后端技术，不须要服务器和域名这些乱七八糟的前置操做，只须要懂得前端技术，就能发布一款属于本身的轻量级应用，简直是前端开发者的福音呐😁

如今其实更火的当是微信小游戏，小程序热度排行榜上长期被小游戏霸屏。但小游戏的开发技术栈比小程序要多，须要的人力物力也更大。目前正在研究之中，有时间再作讨论。

在开始以前须要准备一个邮箱去建立一个小程序帐号。一个邮箱能且只能建立一个小程序，这让人有点难以理解，每建立一个小程序就要去申请个邮箱帐号，小游戏一样是这样，致使我如今都不知道本身有几个邮箱帐号了。

0.1 创意

虽然研发成本极大下降，但想要作出一款成功受青睐的小程序，仍是须要动很大的脑筋的。据不彻底统计，如今市面上已发布的小程序已经几百万个😨，想要在这么多的形形色色的小做品里面脱颖而出，要么就是你的做品很是有创意，戳中了一些人的痛点，要么就是你路走偏锋，作了漏网之鱼😂

相比之下，小游戏倒是更能突显创意的战场。2048，围住神经猫，跳一跳这些让人眼前一亮的精致小玩意儿，都是创意制胜的表明。奈何在下也是应试教育的产物，脑子里的创新区域只在作梦的时候才会活跃。假如你想到了一个有趣可行的点子，那离用户百万就已经成功了一半。我一位同事说想作一个实时社交的小程序，让用户能够实现无障碍沟通。我当时就想，这样有理想的人怎么就和我作了同事了呢😂

0.2 技术

小程序的运行环境

小程序的运行环境能够用一句话归纳：敌情至关复杂。

在 iOS 上，小程序逻辑层的 javascript 代码运行在 JavaScriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS八、iOS九、iOS10

在 Android旧版本 上，小程序逻辑层的 javascript 代码运行中 X5 JSCore 中，视图层是由 X5 基于 Mobile Chrome 57 内核来渲染的

在 Android新版本 上，小程序逻辑层的 javascript 代码运行在 V8 中，视图层是由自研 XWeb 引擎基于 Mobile Chrome 67 内核来渲染的

在微信开发者工具上，小程序逻辑层的 javascript 代码是运行在 NW.js 中，视图层是由 Chromium 60 Webview 来渲染的

也就是说一切以实物为准，在微信开发者工具上的表现和真机上的表现不尽相同，在真机的不一样机器上表现也会因机而异😂

另外因为是寄生在微信上，因此微信又作了一层封装，额外加了一些限制，好比

不支持使用 eval 执行 JS 代码

不支持使用 new Function 建立函数

也就是不让动态执行 JS 代码，说实话，这确实挡住了不少骚操做。正所谓人在屋檐下，不得不低头。鉴于微信提供的巨大流量入口和裂变能力，就这样凑合着用吧😑

上面这些都是各类限制，兼容性问题，固然也有让人开心的地方，那就是CSS3和ES6的特性基本上能够随便用，记住是基本上。

技术栈

众所周知，浏览器的web技术是html，css和js。而小程序虽然相似浏览器，但并非浏览器。因此他的技术是wxml，wxss和js😂。应该说并无什么新的技术，就是照抄web标准而后本土化了一下。前端同窗基本上能够无缝切入。

咱们开发web的时候基本上不会直接去写原生html，css，js，而是使用一些框架和库提高开发效率，例如曾经的jquery，如今的vue，react等。小程序也是如此，一般不会去直接写原生wxml，wxss。固然若是喜欢的话也能够直接去写，但随着项目迭代很快就会难以维护。要知道软件工程的奥义即在于控制复杂性。如今github上已经有了一些不错的框架出来，好比wepy，mpvue。

前端技术 + 小程序官方文档 + 框架文档，基本上这三样就能hold住一个小程序了

说下个人小程序官方文档读后感，不到一个小时读完了简易教程，感受挺简单的嘛，简直小case。而后去读小程序的框架，组件和api，卧槽，才发现刚才只是读了一本厚书的目录。接下来断断续续看了将近一个月，才勉强看了一遍。哈哈，一切事情都不会像看上去那么简单呐！但若是只是做为入门，不须要不少高级特性，则不须要读那么多章节。

0.3 实际开发

调试预览

工欲善其事，必先利其器。咱们开发web时能够随便在某一个你喜欢的浏览器里预览效果，小程序就没那么随意了。由于小程序的宿主是微信，因此小程序只能在微信中才能跑起来。好在微信团队仍是挺给力的，为开发者专门开发了一个预览调试工具，即微信开发者工具。修改代码后便可在该工具上实时看到效果，但但是，该工具上呈现的效果并不是是真实手机上呈现的效果，就像chrome开发者工具的模拟设备模式同样，虽然八九不离十，可是差之毫厘即谬以千里😂。这个工具上经常使用且实用的功能还挺多的，建议好好熟悉，文档在此，固然最快熟悉的方式仍是点点点，哪里不懂点哪里😁

选个框架

如今的主流框架选择只有wepy和mpvue两位，二者都是向最nb的 Vue.js 看齐。通过仔细斟酌，多方位比对，最终我仍是选了wepy，由于发现wepy的星星要比mpvue的多上几个哈哈。wepy文档在此。用了wepy将近一年时间，发现坑还挺多的，可能我对他的期待是像vue同样吧，期待过高了😂。vue稍微高级一点的特性都不支持，有一些实现还和vue是反着来的。不过那还能怎样呢，本身搞一个框架出来？在下实在才薄智浅。曾有一段时间被坑得决心要转向mpvue，但机智的我先去谷歌了一下mpvue的坑，发现相较wepy只多很多，哈哈我赶忙说服本身仍是好好和wepy凑合着过吧。

接下来就是写代码开发了，此处直接省略十万字，具体开发的细节就不说了哈，开发-调试-。。。-开发-调试，无限循环，你们都懂的

开发中遇到的坑

• 【wepy】屡次路由到同一个页面时，页面上的变量会相互污染
• 【wepy】组件是静态组件，致使每实例化一个标签都须要在js的components里声明一次
• 【wepy】在更新数据以后须要调用this.$apply()更新视图，准确的说应该是在异步更新数据以后，也就是说他不是双向绑定
• 【小程序】文件下载，webview，ajax都须要在小程序管理后台配置安全域名，不然都会失败。
• 【小程序】webview和h5通讯的方式postMessage机制只在特定时机触发，也就是除了这些时机，webview和url彻底没法通讯
• 【小程序】web-view中使用input type='file'闪退
• 小程序的坑能够单独拿出来写一篇千字做文了，有时间再总结一下，此处就再也不举例了😂

0.9 提交微信审核

此时功能已经开发测试完毕。接下来就是让用户看到咱们辛辛苦苦完成的做品，虽然可能不受待见，甚至被疯狂吐槽，但更大的多是用户根本不会去访问你的小程序😂，除非你有本身的推广渠道，好比公众号，微博等，不然微信用户纵然数十亿，你的小程序用户却很难破零哈哈。

无论结果怎样，先发布再说。首先须要点击微信开发者工具工具栏的上传按钮上传小程序代码，上传成功后便可前往微信公众平台小程序管理后台去提审你的小程序了，在版本管理里面选择刚才上传的那个版本，而后填写一些信息便可提交审核。首次提交审核一般会等待1～2个工做日，以后迭代版本通常1～2个小时便可过审。

微信审核仍是挺严格的，审核规范在此。比较广泛的作法是经过后端接口在提交审核时候过滤敏感内容，以此混过去，等发布到线上以后再把敏感内容放开。哈哈只要思想不滑坡，办法总比困难多。

1.0 发布上线

终于，最后的最后，小程序审核经过了，能够发布到线上了。审核经过以后不会自动发布到线上，须要手动去点发布。发布到线上以后就能够去微信上任何一个入口搜索本身发布的小程序了。

到此能够长舒一口气了，由于已经走完了万里长征的第一步，接下来就是思考怎么去推广和运营小程序，总之，这只是刚刚开始。

最后贴一下本身辛辛苦苦的成果

我去看了一下管理后台的访问数据，果真不出所料，用户量至今还没有破零😅