×

[干货] 开发到上线仅十六天 海外党微信小程序全攻略

96
伟哥带你哟哟哟
2017.01.28 15:31* 字数 7288

微软资深码工,西雅图创业协会不着调的会长,把小宝宝当玩具的不靠谱奶爸。业余爱好木工,养鱼,盆景,种葫芦,葡萄。

来一粒蓝色小药丸,动词打次切克闹,伟哥带你哟哟哟。

2017丁酉年春节

俺的小程序1月8日正式开始开发,1月20日提交审核,1月22日被拒,再提,1月24日通过审核正式上线。上线三天,并没有什么太多推广。目前快500位用户登陆,其中50位左右身边朋友,其余多半是因为我挂在“知晓程序”上来的,比我预期的好不少。

因为我在海外,很多坑都是第一次踩,好记性不如烂笔头,我把经历写下来,也希望能帮助到其他在海外想要做小程序的小伙伴。今天是美国时间猴年大年三十,在铺天盖地的新年祝福当中估计是一个异类。发来一点干货,希望是一件能让世界美好一点点的事情。

如果想进行试用,请在微信搜索”微群日历“去得到它。

脑袋抽了?做毛的小程序

5年以后,大家不会再做App

这里我先讲个小故事,我很清晰的记得2年前遇到过一个六七十岁白发苍苍的老美程序员,他虽然退休了,他说今天是他的生日,收到了一个很特别的礼物 Punch Card。

看起来是不是像答题卡?这就是他们那个年代编程用的,拿着一厚沓这个纸给电脑读,运行程序。老大爷拿着问我说你知道上面写的啥么?我心想这是尼玛什么鬼,当然脸上却堆出敬仰的笑容,他得意地说:"这上面写着,Happy Birthday,我一眼就认出来了,哼哼"。

听到这话,我心里其实是这样的

不是俺觉得自己是新青年而看轻老大爷,而是俺觉得很悲哀,因为20年后多半俺也会这样,一种被时代淘汰的既视感扑面而来。

多年以后,当伟哥和孙子在葡萄架下乘凉的时候,他一定会想起无数个吭哧吭哧搬砖的那个遥远的冬季的夜晚。

                                                                                                          《百年砖工》

技术的潮流跟时尚异曲同工,一波一波的,不断在改变。然而又有些不一样,复古的时尚偶尔会还魂,但古老的技术基本会死硬在了沙滩上。

上面这张图是上次请资深美国表演艺术家,微软Distinguished Engineer,James Whittaker给放的。他说,你只要让开发者爽了,那你也就能爽了。(当然这个人也是很甩,穿了一件“Do Epic Shit”的T恤来,于是我自卑的发现我shit得还不够epic)。

那么现在来说回小程序。微信小程序就让开发者很爽,完全原生的体验,开发效率提高起码10倍。网上已经很多文章了,我附和几句:

1. 开发快。小程序开放内测没几天,就有破解的开发工具在github上放出来。一堆人开源自己做的小程序。一个可能你要雇3个人开发半年的东西,在小程序上2礼拜就出来了。快!

2. 加载快。微信设了上限1MB,那是什么概念?Google主页打开,啥也不做,就是527KB的下载。我的小程序还一共不到300KB呢,比Google主页还小,所以微信打开一个小程序,就跟打开一次google主页一样简单,一样快。而且事实证明,1MB已经能做很多事情了!

3. 体验好。市面上很多人拿着H5的页面冒充小程序,比如最近Trump的那个。很多人不明白,其实小程序UI就是原生App,不是H5,更不是拿H5来做得像原生的。H5和Native App之争由来已久,诸多试图把H5做得像原生应用的体验其实都差,比如Cordova,Ionic。做来玩儿的或者超简单的或者给企业的可以凑合吧,给Mass Consumer的,总是这边那边不爽,卡顿。后来FB出了react和react native带来一线曙光,跟小程序原理其实也很类似。React Native也有些跟小程序类似理念的startup出来,只是东家Facebook又有技术又有流量却不去做这个,这里就不得不佩服国人的速度。试过小程序的应该知道,体验是相当流畅的。

有这三点,就够了。其实再过两年以后,绝大部分人都不会再开发底层App,基本都会往类似React Native走,因为体验上其实并没有这么多差别。再过五年,那时候AI的converstaion based application应该会占主导地位,很多task你已经不需要手机了(一定需要视觉的比如游戏娱乐可能除外),你更不需要App,就像现在的Alexa Skills。比如你看看现在谁还在写MFC?估计很多人都没听过。。。

那么有人说微信有限制,封闭。的确是有很多限制,比如游戏不能做,否则做个麻将棋牌类,往群里一扔,分分钟秒杀皮皮麻将啊。代码不能超1M,不能外链跳转,不能分享朋友圈,小程序入口只有群分享,搜索和摄像头扫描二维码(注意不是图片识别二维码)。说实话限制不是一般的大啊。但是呢,大家退一步看:

1. 这些是人为加的限制。微信现在的有着巨大优势敢制定规则,要是他发现小程序没有达到想要的效果,会不会某些地方能稍微开放一些?说个简单的吧,比如带参数二维码最开始1万个,正式发布前上调10万个。微信也是在摸着石头过河。并且在这个过程中不断调整游戏的平衡。

2. 这是给小创业者的机会。你没有那么快被吃掉。因为大鱼们也没有摸到该怎么玩儿。不少按自己公司主营业务,原始的照搬过来,还有罗胖这种利益冲突太大直接不玩儿了的。大公司玩儿不动了,各位startup还不赶紧八仙过海各显神通。

微信玩儿的是阳谋,摆明了就是想补他欠缺的地方,比如群协作,比如线下+线上。不想让你来微信打发时间(玩游戏)。这让我想起了最近亚马逊停掉免费review的program。以前亚马逊正儿八经的允许有给样品然后review的项目,后来据说是中国卖家太多,国人出海卖货也不知道怎么办,简简单单就是花钱冲review。亚马逊停掉这个program,就是想让大家回归到做好产品。

张小龙你看得出他是有初心的人,希望大家去做make the world a better place的事情。而不是简简单单抓住用户注意力不放。

如果我所做的,能让世界变得美好一点点,那我也就满足了。请看我表情

好我想做,那我该怎么开始?

给2017年一个小目标

学习小程序,已经有不少教程了,选几个放出来,我就不赘述了。不过网上资料有些多,看着就乱了,有几个我特别比较推荐的拿出来讲讲

微信官方:

1. 官方教程,官方教程和介绍还是不错的,很多不明白的东西是在这上面看的。入门教程可以多看几次整明白了,API和组件等到用的时候再看吧。首页上的小程序示例源代码可以下载下来,很不错的参考。

2. WeUI样式,微信设计团队自己推出的设计样式,非常有用,很多时候不知道该怎么设计,或者自己布局很丑,我都会先看这上面的。

3. 快速开发样板,快速开发样板,很轻量级的样板,帮你快速上手。

4. 关于framework:码工们都喜欢重用轮子,有些人一上来找framework,现在也有好几个出来了,我强烈建议是先不要。一来还都不算成熟,用开源的最怕就是选错dependency。二来1MB的上限一不注意很容易就到了,交给不可控的framework还是不放心。有人还支持了用NPM的库,那就更要小心了,一个平时网页常用的lodash都要500k,NPM库很容易一下子超标。刚开始的时候,还是先手写吧,熟悉一下,进阶之后再自行决定。

上面那几点差不多可以start了,我基本上就是用这些。还想多学习的,这个上面有不少资料:

Github: Awesome Wechat App

不过警告一下,很容易看花眼,看多了反而自己就不好做决定,Choice is pain。

在海外做有什么不同?

大!折!腾!

首先一个问题是为什么要在海外做小程序?其实没啥别的,就是想做个自己和周围朋友能用的。出了国的才知道,老美的各种东西,比起国内的遍地开花差的便捷得太远了!

比如我做的这个微群日历小程序,一开始就是想解决每次potluck大家约时间和汇报到底带什么菜的事情,省的每次去翻记录。另外我们西创会每周也都组织沙龙活动,每次都是通过公众号发布,让大家在meetup报名,但是每次去点的人总不多。过几天大家忘了有什么活动又会来问。另外还有比如约开会时间也要统一半天,一般都用doodle但是使用体验很差。所以我才做了这个微群日历,能帮助大家提升协作的productivity。

好了,说说干货。在开始之前一定要做好心理准备,因为有些坑对海外党实在太困难了。某种意义上说,我们基本就是外星人。

首先你要注册和备案,这点俺之前已经写过:

海外党玩儿微信应用号的血泪史 (这个不能直接点击,看公众号历史吧)

基本要求

国内要有公司,各种证件要全。

国内得有人帮你做认证,需要接电话什么的。

一定要申请国内ICP备案。

再说备案,坐标海外

如果想在海外做运营,服务器放在国内得慢成狗。海外的服务器虽然不需要备案。但是天朝的规定是备案过的域名必须指向备案过的服务器,并且会定期扫描,如果发现服务器不对,可能会撤销你的备案。俺在网上搜攻略,不少人说只要一个二级域名挂在国内就可以了。这点我还特地问过阿里云的客服,客服说是可以的,二级域名挂在国内并且有不少流量就行。比如你弄个cn.xxx.com可以指向国内。不管怎样,你肯定是需要一个国内的服务器。

俺的做法还要简单一点,俺用了Azure的Global Traffic Manager,根据访问地域不同指向不同服务器,这点我后面还会提到。

特殊资质

之后你就可以开始开发了,但是如果你决定做以下类目,海外的startup一般都没有这些,赶紧开始申请特殊资质吧!

一级类目 二级类目 法务建议资质文件

教育 驾校培训 需提供《道路运输经营许可证》,且其中须有“驾驶员培训”项目

教育 出国移民 《因私出入境中介机构经营许可证》

教育 出国留学 《自费出国留学中介服务机构资格认定书》

医疗 就医服务 市级卫生和计划生育委员会批文

医疗 医疗保健信息服务 《增值电信业务经营许可证》或《电信与信息服务业务经营许可证》

医疗 公立医疗机构 《医疗机构执业许可证》

医疗 私立医疗机构 《增值电信业务经营许可证》以及《医疗机构执业许可证》

医疗 医疗器械信息展示 《互联网药品信息服务资格证》

医疗 医疗器械生产企业 《医疗器械生产许可证》

医疗 医疗器械经营、销售 《医疗器械经营许可证》

医疗 药品信息展示 《互联网药品信息服务资格证》

金融业 基金 《经营证券期货业务许可证》且业务范围必须包含“基金”或《基金托管业务许可证》或《基金销售从业资格证书》

金融业 信托 《金融许可证》

金融业 网络借贷信息中介(P2P) 银监会备案证明材料或者省(自治区、直辖市)金融办批准文件

金融业 保险 《保险公司法人许可证和经营保险业务许可证》或《保险兼业代理许可证》或《经营保险代理业务许可证》或《经营保险经纪业务许可证》(说明:四选一,如果选第一个,需要同时提供两个资质)

金融业 银行 《金融机构许可证》

金融业 证券/期货 《经营证券期货业务许可证》

金融业 证券、期货投资咨询 《证券投资咨询业务资格证书》

金融业 自营贷款 省金融办批准文件

金融业 股票信息服务平台 《增值电信业务经营许可证》且核准服务项目包含“财经投资类互联网电子公告服务”和 深圳证券交易所《深圳交易所专有信息经营许可合同》和 上海证券交易所《上证所证券信息经营许可合同》

出行与交通 打车 《网络预约出租汽车经营许可证》

出行与交通 租车 《汽车租赁经营许可证》

富媒体 视频 《信息网络传播视听节目许可证》或《广播电视节目制作经营许可证》

富媒体 音乐 《网络文化经营许可证》或《信息网络传播视听节目许可证》

富媒体 小说 《互联网出版许可证》

富媒体 时政新闻信息 《互联网新闻信息服务许可证》

富媒体 FM/电台 《信息网络传播视听节目许可证》或《广播电视节目制作经营许可证》

富媒体 有声读物 《网络文化经营许可证》或《信息网络传播视听节目许可证》

富媒体 动漫 《互联网出版许可证》和《网络文化经营许可证》

电商平台 电商平台 《增值电信业务经营许可证》或《电信与信息服务业务经营许可证》

商家自营 百货 《食品经营许可证》和《酒类零售许可证》和《食盐零售许可证》

商家自营 保健品 《国产保健食品批准证书》或《进口保健食品批准证书》

商家自营 美妆/洗护 《化妆品生产许可证》或《委托加工协议》

商家自营 食品/饮料/生鲜 《食品经营许可证》

商家自营 汽车/其他交通工具及配件 汽车供应商/生产企业授权

商业服务 律所 《律师事务所执业许可证书》,或经司法厅批准成立法律服务机构的文件

商业服务 公证 与公证处的合作协议

公益 公益慈善 民政部《基金会法人登记证书》或《慈善组织公开募捐资质证书》

公益 基金会 民政部《基金会法人登记证书》

社交 陌生人交友 《增值电信业务经营许可证》或《电信与信息服务业务经营许可证》

社交 熟人交友 《增值电信业务经营许可证》或《电信与信息服务业务经营许可证》

社交 社区/论坛 《增值电信业务经营许可证》或《电信与信息服务业务经营许可证》

社交 直播 《信息网络传播视听节目许可证》和《网络文化经营许可证》(经营范围含网络表演)

社交 婚恋 《增值电信业务经营许可证》或《电信与信息服务业务经营许可证》

社交 问答 《增值电信业务经营许可证》或《电信与信息服务业务经营许可证》

SSL证书

微信小程序要求后台网站必须是HTTPS。关于证书以前俺也没弄过,原本想直接买个证书了事吧,一年花个几百刀。不过后来一想,这证书每年都还要renew也挺麻烦。不少公司都因为证书过期出过大事情。于是俺找了一圈,发现了一个好东西:

Let's Encrypt是个非盈利组织,有两个最大特点:

免费证书!seriously!完全免费的证书啊!不过只有三个月。

自动更新!为啥只有三个月呢?因为Let's Encrypt的理念是证书应该有自动renew机制!像我上面说的,有好些大公司因为忘记renew证书而网站出大问题的。

我在美国用的Azure Webapp,也有好心人做了插件: Let's Encrypt Azure Site Extension

提升国内外速度-双机

上面提到需要国内服务器备案的事情。如果直接用国内服务器的话,海外访问速度会慢得离谱。比如你随便打开一个小程序,基本是加载都要很长时间,怎么破?自然是在海外再开一个服务器啦!

俺用的Azure Global Traffic Manager(GTM),如果用户来自东亚,我让他访问国内服务器,如果人在美国,则让他访问美国服务器。这样如果ICP扫描的时候,自然会扫到我国内的服务器,备案也就没有问题啦。

这么做的后果是,你需要维护两台服务器,对于小startup而言,用户原本就还没有那么多,这样完全是徒增烦恼。一个做法是在国内直接proxy到美国,这样最终还是访问的美国的服务器。当然后果是国内访问会巨慢,如果你不在乎国内用户的话倒也无所谓,不过在微信审核的时候确保他们加载什么没有问题,要不小心审核不过噢。

还有一点要注意的是国内的证书问题,如果你跟我一样用let's encrypt的证书,他在申请的时候需要DNS指向当前机器的IP,否则会失败,但是let's encrypt的机器肯定在国外,怎么办呢?很简单,我就先在GTM disable了美国的指向就行了。不过这里其实有个问题,就是多台机器共用证书。如果机器在附近也倒是罢了,直接nginx做个反向代理。但是现在是跨国呢怎么办?

一个做法是单独开一个证书服务器,把nginx的/.well-known路径指向证书服务器。这样的坏处是这个证书服务器是你的一个bottle neck。我因为美国用的是azure webapp,本来就有很多限制,所以我目前的做法比较偷懒,两边各自刷新证书。后果是过几个月中国那边的服务器的证书可能没法自动renew了,得手动再做一次。我对证书不是很了解,如果那位比较精通请跟我联系~

提交审核

开发的环境我先跳过,不过如何能这么快做完,我后面会稍微再讲一下。当你吭哧吭哧开发完了,觉得满意的时候,下面就是提交审核了。我的审核周期一般为两天。特别要注意的是,一旦提交审核,不能撤销,也不能覆盖!你即使发现了bug fix了,也只有等审核完再说。所以提交审核要谨慎啊!

于审核的坑那可就是太多了,建议大家先网上查一查。有两个我提出来:

类目选择

提交的时候会问你要功能页面,其实到现在我完全清楚功能页面的作用,估计是以后小程序搜索直达你的功能页面而不是主页。不过现在完全是看不到用处在哪里。


提交的时候你可以选择类目,比如我的微群日历,有类似Doodle的功能。我第一次审核的时候填的日历,被审核人员指出应该是投票,第二次才顺利过关。

敏感词过滤

这个说起了大家都懂,只是你可能会忘记,这个坑绝大部分人都踩过,幸好我在群里问了老司机,才给了我一条明路!有问题可给我公众号发消息。下面这个图里有啥你看不见~


大家要是觉得啊这个好麻烦啊,可以看看下面群里小哥的这个,瞬间有平衡感了有没有?

《1个人15天7次被拒的小程序开发历程》


小结

好了,一些海外常见的坑就差不多就这些了。其实在国内的话也算是常规的东西了,主要就是:

事先一定要做好调查,看看缺什么的东西,尽早补上。备案,资质等。

海外双机的配置,开发,维护。

那么希望下面的惨剧就不要再发生了。


我为什么能做这么快?

我是天才

虽然我标题说16天,其实前后加起来只有12天开发,但实际上因为还有上班时间,满打满算加起来可能5-6天工作时间吧。因为只有我一个人,所以也做包括产品设计,UX Design,Logo设计等等。我个人对这个速度还是挺满意的,本来就是想练练手。一方面归结于有这么好的小程序一个平台,否则很easy的就会花去几个月时间,另一方面当然事先还做过一些调研才动手的,包括备案什么的,因为是断断续续的就没有统计进去了。下面我稍微回顾一下,希望对大家有帮助:

想好要做什么

这是最困难的,一般的app,网站可能还好点。但是小程序有这样那样的限制,想好要做什么花了我很长时间。这也导致我错失一月九号第一波小程序的推广,那一次的PR起吗值上千万啊,能迅速获得一批早期种子用户。

Keep it simple

原本想要写这样那样的酷炫的东西,加各种功能,但是每次都会不断的想怎样才能简化,我强烈认同简单的才是好用的,尽量不要有多余的东西。所以除了下面这个选多个日期和时间的为了用户体验能简单点稍微花了点功夫(虽然也有点丑,希望以后能优化),其它很多设计我是直接参照WeUI的样式。所以之前提到的WeUI样式库对我帮助很大。


哪些不做?

或许你早就听到过这个话了,但是自己做的时候才能体会到。很多功能,比如我的微群日历,提醒这个重要功能花了很长时间决定先还是不做了。还是希望第一波出去能尽量多的收集用户反馈,静静的看用户使用习惯。

开发足够Agile

上面提到Web hosting我选择Azure Webapp,一来是因为相对熟悉些,二来是因为continous deployment做得比较好。基本上我在github checkin了,azure这边就开始更新,自动部署,完全不用我来操心。也不需要我登陆服务器什么的。真是业界良心。我国内的阿里云服务器就没有这个便利,每次部署还挺麻烦的。

Node.js

从去年初开始接触Node.js,感觉开发效率一下子提升了不少,可用的选择很多了,以至于有点太多无从选择。这次我就简单的用了Express和Mongoose。MEAN stack去掉了Angular,变成了MEN stack。

多用SaaS/PaaS

少自己维护。我目前唯一用的PaaS就是有MongoDB接口支持的Azure DocumentDB。这个简直太棒了,以前自己搭MongoDB cluster老费劲了,还得维护。DocumentDB又没有好的lib,一开始推出的时候我就建议支持Mongo的protocal,这下总算是实现了!不过要注意一点的就是,每一个collection都是单独计费,一不小心就多开了几个collection。

Photoshop基础技能

虽然有设计师朋友,但是有些简单的自己做反而更快。比如logo就是自己弄的,基础的photoshop技能还是需要学习一点。做了一个贱萌的logo,还不错吧,自我感觉还挺良好的哈哈哈哈哈哈。

当然,出了以上几点之外,最重要的原因是因为我是个天才~

广告时段~

微群日历

下面我就无耻的打一下小广告,我的小程序叫“微群日历”,在微信小程序或者微信上面搜索即可。主要功能就是群约饭约活动(类似doodle),以及群共享日历。欢迎使用噢~



如果有问题想咨询,请在小程序内点青蛙上面的对话logo,就能跟我联系了。

最后来个小岳岳镇楼


本文转自公众号“伟哥带你哟哟哟”,欢迎关注

日记本
Web note ad 1