开发到上线仅 16 天，海外党研发微信小程序全攻略

   <p>我开发的小程序“微群日历”1月8日正式开始开发，1月20日提交审核，1月22日被拒，再提，1月24日通过审核正式上线。上线三天，并没有什么太多推广。目前快500位用户登陆，其中50位左右身边朋友，其余多半是因为我挂在“知晓程序”上来的，比我预期的好不少。</p>    <p>因为我在海外，很多坑都是第一次踩，好记性不如烂笔头，我把经历写下来，也希望能帮助到其他在海外想要做小程序的小伙伴。</p>    <p>如果想进行试用，请在微信搜索”微群日历“去得到它。</p>    <h2>为什么做该款小程序？</h2>    <p>这里我先讲个小故事，很清晰的记得2年前遇到过一个六七十岁白发苍苍的老美程序员，他虽然退休了，他说今天是他的生日，收到了一个很特别的礼物 Punch Card。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/29beda1bfe1ec4117f02c8ff41b28f52.jpg"></p>    <p>看起来是不是像答题卡？这就是他们那个年代编程用的，拿着一厚沓这个纸给电脑读，运行程序。老大爷拿着问我说你知道上面写的啥么？我心想这是什么鬼，当然脸上却堆出敬仰的笑容，他得意地说：”这上面写着，Happy Birthday，我一眼就认出来了，哼哼”。</p>    <p>听到这话，我心里默默骂了一句。不是我觉得自己是新青年而看轻老大爷，而是我觉得很悲哀，因为20年后多半俺也会这样，一种被时代淘汰的既视感扑面而来。</p>    <p>我们每天学习很多东西，但多无法沉淀。</p>    <p>多年以后，当伟哥和孙子在葡萄架下乘凉的时候，他一定会想起无数个吭哧吭哧搬砖的那个遥远的冬季的夜晚。</p>    <p>——《百年砖工》</p>    <p>技术的潮流跟时尚异曲同工，一波一波的，不断在改变。然而又有些不一样，复古的时尚偶尔会还魂，但古老的技术基本会死硬在了沙滩上。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/5b0edf1267ce025b25390ea94a7b3389.jpg"></p>    <p>上面这张图是上次请资深美国表演艺术家，微软Distinguished Engineer，James Whittaker给放的。他说，你只要让开发者爽了，那你也就能爽了。</p>    <p>那么现在来说回小程序。微信小程序就让开发者很爽，完全原生的体验，开发效率提高起码10倍。网上已经很多文章了，我附和几句：</p>    <ul>     <li><strong>开发快。</strong> 小程序开放内测没几天，就有破解的开发工具在Github上放出来。一堆人开源自己做的小程序。一个可能你要雇3个人开发半年的东西，在小程序上2礼拜就出来了。快！</li>     <li><strong>加载快。</strong> 微信设了上限1MB，那是什么概念？Google主页打开，啥也不做，就是527KB的下载。我的小程序还一共不到300KB呢，比Google主页还小，所以微信打开一个小程序，就跟打开一次Google主页一样简单，一样快。而且事实证明，1MB已经能做很多事情了！</li>     <li><strong>体验好。</strong> 市面上很多人拿着H5的页面冒充小程序，比如最近Trump的那个。很多人不明白，其实小程序UI就是原生App，不是H5，更不是拿H5来做得像原生的。H5和Native App之争由来已久，诸多试图把H5做得像原生应用的体验其实都差，比如Cordova，Ionic。做来玩儿的或者超简单的或者给企业的可以凑合吧，给Mass Consumer的，总是这边那边不爽，卡顿。后来非死book出了React和React Native带来一线曙光，跟小程序原理其实也很类似。React Native也有些跟小程序类似理念的startup出来，只是东家非死book又有技术又有流量却不去做这个，这里就不得不佩服国人的速度。试过小程序的应该知道，体验是相当流畅的。</li>    </ul>    <p>有这三点，就够了。其实再过两年以后，绝大部分人都不会再开发底层App，基本都会往类似React Native走，因为体验上其实并没有这么多差别。再过五年，那时候AI的Converstaion based Application应该会占主导地位，很多任务你已经不需要手机了（一定需要视觉的比如游戏娱乐可能除外），你更不需要App，就像现在的Alexa Skills。比如你看看现在谁还在写MFC？估计很多人都没听过……</p>    <p>那么有人说微信有限制，封闭。的确是有很多限制，比如游戏不能做，否则做个麻将棋牌类，往群里一扔，分分钟秒杀皮皮麻将啊。代码不能超1M，不能外链跳转，不能分享朋友圈，小程序入口只有群分享，搜索和摄像头扫描二维码（注意不是图片识别二维码）。说实话限制不是一般的大啊。但是呢，大家退一步看：</p>    <ol>     <li><strong>这些是人为加的限制。</strong> 微信现在的有着巨大优势敢制定规则，要是他发现小程序没有达到想要的效果，会不会某些地方能稍微开放一些？说个简单的吧，比如带参数二维码最开始1万个，正式发布前上调10万个。微信也是在摸着石头过河。并且在这个过程中不断调整游戏的平衡。</li>     <li><strong>这是给小创业者的机会。</strong> 你没有那么快被吃掉。因为大鱼们也没有摸到该怎么玩儿。不少按自己公司主营业务，原始的照搬过来，还有罗胖这种利益冲突太大直接不玩儿了的。大公司玩儿不动了，各位Startup还不赶紧八仙过海各显神通。</li>    </ol>    <p>微信玩儿的是阳谋，摆明了就是想补他欠缺的地方，比如群协作，比如线下＋线上。不想让你来微信打发时间（玩游戏）。这让我想起了最近亚马逊停掉免费Review的Program。以前亚马逊正儿八经的允许有给样品然后Review的项目，后来据说是中国卖家太多，国人出海卖货也不知道怎么办，简简单单就是花钱冲Review。亚马逊停掉这个Program，就是想让大家回归到做好产品。</p>    <p>张小龙你看得出他是有初心的人，希望大家去做Make the World a Better Place的事情。而不是简简单单抓住用户注意力不放。</p>    <p>如果我所做的，能让世界变得美好一点点，那我也就满足了。</p>    <h2>我想做，那该怎么开始？</h2>    <p>学习小程序，已经有不少教程了，选几个放出来，我就不赘述了。不过网上资料有些多，看着就乱了，有几个我特别比较推荐的拿出来讲讲。</p>    <p>微信官方教程：</p>    <ul>     <li><a href="/misc/goto?guid=4959731138621131495" rel="nofollow,noindex">官方教程</a> 还是很不错的，很多不明白的东西是在这上面看的。入门教程可以多看几次整明白了，API和组件等到用的时候再看吧。首页上的小程序示例源代码可以下载下来，很不错的参考。</li>     <li><a href="/misc/goto?guid=4959734204415366308" rel="nofollow,noindex">WeUI 样式</a> ，微信设计团队自己推出的设计样式，非常有用，很多时候不知道该怎么设计，或者自己布局很丑，我都会先看这上面的。</li>     <li><a href="/misc/goto?guid=4959731140218837897" rel="nofollow,noindex">快速开发样板</a> ，很轻量级的样板，帮你快速上手。</li>    </ul>    <p>关于Framework：码工们都喜欢重用轮子，有些人一上来找Framework，现在也有好几个出来了，我强烈建议是先不要用。一来还都不算成熟，用开源的最怕就是选错Dependency。二来1MB的上限一不注意很容易就到了，交给不可控的framework还是不放心。有人还支持了用NPM的库，那就更要小心了，一个平时网页常用的lodash都要500k，NPM库很容易一下子超标。刚开始的时候，还是先手写吧，熟悉一下，进阶之后再自行决定。</p>    <p>上面那几点差不多可以start了，我基本上就是用这些。还想多学习的，这个上面有不少资料：</p>    <p><a href="/misc/goto?guid=4959717276205224921" rel="nofollow,noindex">https://github.com/justjavac/awesome-wechat-weapp</a> 不过警告一下，很容易看花眼，看多了反而自己就不好做决定，Choice is pain。</p>    <h2>在海外做有什么不同？</h2>    <p>首先一个问题是为什么要在海外做小程序？其实没啥别的，就是想做个自己和周围朋友能用的。出了国的才知道，老美的各种东西，比起国内的遍地开花差的便捷得太远了！</p>    <p>比如我做的这个微群日历小程序，一开始就是想解决每次potluck时，大家约时间和汇报到底带什么菜的事情，省的每次去翻记录。另外我们西创会每周也都组织沙龙活动，每次都是通过公众号发布，让大家在meetup报名，但是每次去点的人总不多。过几天大家忘了有什么活动又会来问。另外还有比如约开会时间也要统一半天，一般都用Doodle但是使用体验很差。所以我才做了这个微群日历，能帮助大家提升协作的productivity。</p>    <p>好了，说说干货。在开始之前一定要做好心理准备，因为有些坑对海外党实在太困难了。某种意义上说，我们基本就是外星人。</p>    <p>首先你要注册和备案。</p>    <p>1. 基本要求</p>    <ul>     <li>国内要有公司，各种证件要全。</li>     <li>国内得有人帮你做认证，需要接电话什么的。</li>     <li style="text-align: center;">一定要申请国内ICP备案。<br> <img src="https://simg.open-open.com/show/11e848c6b30168afc251eb8826a3f0dc.jpg"></li>    </ul>    <p>2. 再说备案，坐标海外</p>    <p>如果想在海外做运营，服务器放在国内得慢成狗。海外的服务器虽然不需要备案。但是中国政府的规定是备案过的域名必须指向备案过的服务器，并且会定期扫描，如果发现服务器不对，可能会撤销你的备案。</p>    <p>我在网上搜攻略，不少人说只要一个二级域名挂在国内就可以了。这点我还特地问过阿里云的客服，客服说是可以的，二级域名挂在国内并且有不少流量就行。比如你弄个cn.xxx.com可以指向国内。不管怎样，你肯定是需要一个国内的服务器。</p>    <p>我的做法还要简单一点，用了Azure的Global Traffic Manager，根据访问地域不同指向不同服务器，这点我后面还会提到。</p>    <p>3. 特殊资质</p>    <p>之后你就可以开始开发了，但是如果你决定做某些特殊类目，赶紧开始申请特殊资质吧！</p>    <p>特殊类目包括教育、医疗、金融、出行、富媒体、电商、保健等各个方面，动手之前需要仔细了解清楚。</p>    <p>4.SSL证书</p>    <p>微信小程序要求后台网站必须是HTTPS。关于证书以前我也没弄过，原本想直接买个证书了事吧，一年花个几百刀。不过后来一想，这证书每年都还要Renew也挺麻烦。不少公司都因为证书过期出过大事情。于是俺找了一圈，发现了一个好东西：Let’s Encrypt。</p>    <p>Let’s Encrypt是个非盈利组织，有两个最大特点:</p>    <ul>     <li>免费证书！不过只有三个月。</li>     <li>自动更新！之所以是三个月是因为Let’s Encrypt的理念是证书应该有自动Renew机制！像我上面说的，有好些大公司因为忘记Renew证书而网站出大问题的。</li>    </ul>    <p>我在美国用的Azure Webapp，也有好心人做了插件：</p>    <p><a href="/misc/goto?guid=4959738335949173638" rel="nofollow,noindex">https://www.troyhunt.com/everything-you-need-to-know-about-loading-a-free-lets-encrypt-certificate-into-an-azure-website/</a> 。</p>    <p>5. 提升国内外速度——双机</p>    <p>上面提到需要国内服务器备案的事情。如果直接用国内服务器的话，海外访问速度会慢得离谱。比如你随便打开一个小程序，基本是加载都要很长时间，怎么突破？自然是在海外再开一个服务器啦！</p>    <p>我用的Azure Global Traffic Manager(GTM)，如果用户来自东亚，我让他访问国内服务器，如果人在美国，则让他访问美国服务器。这样如果ICP扫描的时候，自然会扫到我国内的服务器，备案也就没有问题啦。</p>    <p>这么做的后果是，你需要维护两台服务器，对于小Startup而言，用户原本就还没有那么多，这样完全是徒增烦恼。</p>    <p>一个做法是在国内直接proxy到美国，这样最终还是访问的美国服务器。当然后果是国内访问会巨慢，如果你不在乎国内用户的话倒也无所谓，不过在微信审核的时候确保他们加载什么没有问题，要不小心审核不过噢。</p>    <p>还有一点要注意的是国内的证书问题，如果你跟我一样用let’s encrypt的证书，在申请的时候需要DNS指向当前机器的IP，否则会失败，但是let’s encrypt的机器肯定在国外，怎么办呢？很简单，我就先在GTM disable了美国的指向就行了。不过这里其实有个问题，就是多台机器共用证书。如果机器在附近也倒是罢了，直接nginx做个反向代理。但是现在是跨国怎么办？</p>    <p>一个做法是单独开一个证书服务器，把nginx的/.well-known路径指向证书服务器。这样的坏处是这个证书服务器是你的一个bottle neck。我因为美国用的是azure webapp，本来就有很多限制，所以我目前的做法比较偷懒，两边各自刷新证书。后果是过几个月中国那边的服务器的证书可能没法自动renew了，得手动再做一次。我对证书不是很了解，如果那位比较精通请跟我联系～</p>    <p>6. 提交审核</p>    <p>开发的环境我先跳过，不过如何能这么快做完，我后面会稍微再讲一下。当你吭哧吭哧开发完了，觉得满意的时候，下面就是提交审核了。我的审核周期一般为两天。特别要注意的是，一旦提交审核，不能撤销，也不能覆盖！你即使发现了bug fix了，也只有等审核完再说。所以提交审核要谨慎啊！</p>    <p>于审核的坑那可就是太多了，建议大家先网上查一查。有两个我提出来：</p>    <ul>     <li> <p>类目选择</p> <p>提交的时候会问你要功能页面，其实到现在我完全清楚功能页面的作用，估计是以后小程序搜索直达你的功能页面而不是主页。不过限制完全是看不到用处在哪里。</p> </li>    </ul>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/3669104dfadb15f49c0575a346cc03b4.jpg"></p>    <p>提交的时候你可以选择类目，比如我的微群日历，有类似Doodle的功能。我第一次审核的时候填的日历，被审核人员指出应该是投票，第二次才顺利过关。</p>    <ul>     <li> <p>敏感词过滤</p> <p>这个说起了大家都懂，只是你可能会忘记，这个坑绝大部分人都踩过，幸好我在群里问了老司机，才给了我一条明路！</p> </li>    </ul>    <p><strong>7.小结</strong></p>    <p>好了，一些海外常见的坑就差不多就这些了。其实在国内的话也算是常规的东西了，主要就是：事先一定要做好调查，看看缺什么的东西，尽早补上。备案，资质等。</p>    <p>海外双机的配置，开发，维护。</p>    <h2>我为什么做这么快？</h2>    <p>虽然标题中说16天，其实前后加起来只有12天开发，但实际上因为还有上班时间，满打满算加起来可能5-6天工作时间吧。</p>    <p>因为只有我一个人，所以也做包括产品设计，UX Design，Logo设计等等。我个人对这个速度还是挺满意的，本来就是想练练手。一方面归结于有这么好的小程序一个平台，否则很容易就会花去几个月时间，另一方面当然事先还做过一些调研才动手的，包括备案什么的，因为是断断续续的就没有统计进去了。下面我稍微回顾一下，希望对大家有帮助：</p>    <ol>     <li><strong>想好要做什么。</strong> 这是最困难的，一般的App，网站可能还好点。但是小程序有这样那样的限制，想好要做什么花了我很长时间。这也导致我错失一月九号第一波小程序的推广，那一次的PR起吗值上千万啊，能迅速获得一批早期种子用户。</li>     <li><strong>Keep it simple。</strong> 原本想要写这样那样的酷炫的东西，加各种功能，但是每次都会不断的想怎样才能简化，我强烈认同简单的才是好用的，尽量不要有多余的东西。所以除了下面这个选多个日期和时间的为了用户体验能简单点稍微花了点功夫（虽然也有点丑，希望以后能优化），其它很多设计我是直接参照WeUI的样式。所以之前提到的WeUI样式库对我帮助很大。</li>    </ol>    <p><img src="https://simg.open-open.com/show/c6427c4c6904104f7516c2109c06efc6.jpg"></p>    <ol>     <li><strong>哪些不做？</strong> 或许你早就听到过这个话了，但是自己做的时候才能体会到。很多功能，比如我的微群日历，提醒这个重要功能花了很长时间决定先还是不做了。还是希望第一波出去能尽量多的收集用户反馈，静静的看用户使用习惯。</li>     <li><strong>开发足够Agile。</strong> 上面提到Web hosting我选择Azure Webapp，一来是因为相对熟悉些，二来是因为Continous Deployment做得比较好。基本上我在Github Checkin了，Azure这边就开始更新，自动部署。也不需要我登陆服务器什么的。而国内的阿里云服务器就没有这么方便了，每次部署还挺麻烦的。</li>     <li><strong>Node.js。</strong> 从去年初开始接触Node.js，感觉开发效率一下子提升了不少，可用的选择很多了，以至于有点太多无从选择。这次我就简单的用了Express和Mongoose。MEAN stack去掉了Angular，变成了MAN stack。</li>     <li><strong>多用SaaS，少自己维护。</strong> 我目前唯一用的SaaS就是有MongoDB接口支持的Azure DocumentDB。这个确实不错，以前自己搭MongoDB Cluster老费劲了，还得维护。DocumentDB又没有好的lib，一开始推出的时候我就建议支持Mongo的protocal，这下总算是实现了！不过要注意一点的就是，每一个Collection都是单独计费，一不小心就多开了几个Collection。</li>     <li><strong>Photoshop基础技能。</strong> 虽然有设计师朋友，但是有些简单的自己做反而更快。比如logo就是自己弄的，基础的Photoshop技能还是需要学习一点。</li>    </ol>    <p> </p>    <p>来自：http://geek.csdn.net/news/detail/139143</p>    <p> </p>