世界杯前几天突然看到一个小程序，是预测世界杯冠军，然后分享自己的预测。于是有了个idea，想开发一个小程序，列出当天世界杯赛程，用户自己预测结果，然后生成图片分享出去。

有了想法之后立马就开始行动，因为距离世界杯开幕没几天了，要赶上这个风口就得抓紧。

在这之前我的小程序开发知识储备为零，平常做的也是后端，前端知识有限，只能一点点摸索。当天开始看小程序的文档，有了一点概念之后就开始着手开发。开发一共花了8天的下班时间，审核花了4天，从开发到上线一共12天。以下是最终成果，了解一下：

一共三个页面，第一个是首页，由于小程序最近禁止了打开即要授权，所以在首页摆了个按钮，点击后会弹窗求授权，主要也是拿到头像和昵称，在绘图时用。

第二个是选择球队页面，选了之后往点击生成图片。

第三个是绘图分享

保存后得到一个分享图

最后分享一下小程序码，可以来感受一下

中间遇到了好几个坑，应该是大多数新手都会遇到的。下面分享一下。

1.小程序和小游戏的选择

注册小程序的时候会让你选择要开发的是小程序还是小游戏，由于完全没有经验，想着的这个小程序有点竞猜游戏的性质，于是选择了小游戏，细分类别选了体育，心里想着到时不行再改过来就好。事后回想，真是图样。

下载了开发工具，然后找了个demo想跑起来感受一下，结果死活起不来，一直报“game.json”这个文件找不到。

猜想是选了小游戏的原因，注册时生成的appId是小游戏的id，只要一填到项目里面，开发工具就会默认当前项目是小游戏，会检测game.json这个文件。于是回到开放平台的设置页面想改，结果发现不让改，这下懵逼了。只得新建了个项目，不填appId，开发了一段时间。但不填appId没法在手机预览，只能在开发工具上看，最后不得不重新注册一个账号。拿到新的appId，小心的选了小程序，细分类别是信息服务。注册完后回到开发者工具，重新建项目，重新填appId，这下终于正常了。

2.部分图片只能外链

写网页的时候想设置个背景图一般是在css中设置background-image:url("...xxx.jpg")，在小程序中，url里面的图片来源必须填写外链，如果填写本地路径那只能在开发者工具中正常预览，到了手机就显示不出来了。如果非要使用本地图片，可以使用<image>标签，亲测有效。

最后申请了个对象存储服务，大部分图片使用外链，跳过了这个坑。

3.外链svg图片

在最后绘制分享的图片时，所有图片素材都必须是外链，由于要画上很多小国旗，就把这些svg格式的国旗全放到存储服务中。结果在下载图片的时候报错了，“errMsg: "getImageInfo:fail invalid"”。

排查过后确定是外链图片不能使用svg格式。然后使用Adobe Illustrator工具把32张国旗图片全转成png，终于解决。在使用<image>标签引用本地的svg文件时是正常显示的，在手机实测也没问题。但绘图的时候必须使用外链，而且外链不能是svg文件。

4.绘图

绘图接口非常方便，先固定画布大小，然后计算一下每个素材所在位置的坐标就行，后画的会覆盖前画的。然而这里需要注意的是素材是外链，必须要先下载完成才能正常绘图，否则绘出来是空白的，这就涉及到异步的问题。素材下载后会存在本地/tmp目录下，绘图的时候使用这个/tmp/xxx路径指定素材。所以绘图这一步可以放在下载图片函数的回调中，如果要下载多个图片，可以写成多个promise，最后使用Promise.all来统一执行。在翻查网上各种案例的过程中，发现了一个更好的办法。一般绘制分享图片是在最后一步，可以在其他页面onload的时候就使用wx.getImageInfo接口去下载最后绘图需要的素材，缓存到/tmp目录下，然后把素材的缓存路径写到全局变量globalData里。到了绘图这一步就直接访问globalData拿到缓存路径，无需等待下载，否则用户等几秒钟也没见分享图出来，很可能就关了你的小程序。不过这样也是有风险的，万一用户网速不好，到了绘图这一步仍没有下载完素材，此时绘图接口去访问globalData里的素材路径会得到undefined，绘图将会失败，页面一片空白。这两种方法可以综合考虑，可以选择其一或者混合使用。

5.审核

审核这步最坑的地方在于主动权不在你这里，你只能等。微信小程序跟app store一样，也是一个大厂围起来的生态圈，它们给开发者提供各种服务和便利，把开发者养肥了再宰。

这个小程序一共提交了五次才过审。

第一次提交被驳回

审核回复“请上架符合小程序名称简介描述的正式内容/产品，并保持图文一致”。第一次提交，没啥经验，这个咬文嚼字的回复我琢磨了很久，觉得是小程序的名称“2018世界杯赛程互动”中有个“互动”一词，而小程序归类我选了信息服务类，两者没有一致。于是我就将小程序的名字改为“2018世界杯每日赛程”，这样比较符合信息服务的气质，同时我仿照知乎的一款小程序写了一段类似的简介。经过这两处修改后我再次提交了审核。

第二次审核驳回

第二次提交仍没有通过，但有进展。第一是审核结果变成了“测试页面生成结果含有二维码，请去除”。第二是小程序修改名称没有过审，说明第一次没过不是因为名称，而是没写简介。所以小程序提交审核前一定要写个像样的简介，要不审核人员根本不知道你的小程序是干啥的，这样没有任何说明和引导很容易被驳回。

第一个问题解决了，同时引出了第二个问题，为什么要去掉二维码，这个二维码就是小程序自己的二维码，没有其他了。如果没有二维码怎么推广，其他小程序个个都有二维码，它们是怎么过审的。我满腹狐疑，尝试联系微信的客服，但客服公众号只有机器人客服，压根不懂的问的是啥，问了几句就放弃了。最后我不得不尝试把页面中的二维码替换成了小程序码，然后再次提交了。

第三次审核驳回

不用想，这种换汤不换药的方法还是不行，很快就被驳回了。唯一值得庆幸的是审核时间差不多一天，不像网上说的四五天。如果真的四五天一个来回，估计小程序上线时世界杯已经结束了。这次驳回的原因还是一样，说页面有二维码。一番思索，我决定不玩这种小把戏了，把页面的小程序码都去掉了。在别人的地盘玩耍，只能听从别人的规则，否则上都不让你上。把小程序码去掉后我再次提交了审核。

第四次审核驳回

这次驳回的原因竟然跟上次一样，回复也一字不差。我真怀疑审核人员连看都没看，这些审核回复就一句话，你想知道具体细节根本没门。我尝试打电话给腾讯客服，结果客服是录好的一段语音，让去客服公众号提问。去公众号提问只能选择预设的问题，其他任何问题都回复无法理解。这些所谓的智能客服其实毫无智商。试想一下你着急想问个问题的时候，对方派了个无法沟通的人来回答你的问题，这不是火上浇油吗……

来回尝试了各种方法均没法联系到一个真人，腾讯的护城河真是名不虚传。最终我放弃了这种尝试。最后在小程序开发者社区看到一个帖子，那位仁兄遇到了同样的问题，一样是去掉二维码后还是惨遭拒绝。这个帖子惊动了官方真人客服，于是回帖让他再次提交，下文就不知道了，不过这给走投无路的我带来一丝希望。我仿照这个发了一个帖子，希望这个可以上达天听。然后再次提交了审核。

第五次审核通过

发帖真的有用，审核终于过了，内心欢欣鼓舞，现在主动权终于回到自己手中。由于图片都是外链，于是我赶紧上传了一张带二维码的背景图代替了原来的，代码完全不用改，也就不必再去审核。这样，二维码又回来了。

总结

整个过程花费的时间不多，说明小程序开发还是比较容易上手的，比较坎坷的是审核这一步，由于没法跟审核人员取得联系，只能盲人摸象，一次次去试。从这次开发的感受来看，小程序还是很适合做一些功能简单的应用的，开发快，基本懂前端就可以开发，而且不用考虑浏览器兼容问题，省去不少麻烦。有微信的巨量群众基础，懂营销的话比较容易做出爆款。但跟手机上的原生app体验还是有差距，功能也比较弱，因为微信开放给你的接口就那么多。

最后贴上代码，没什么时间整理，有点乱。

https://github.com/peterfung/worldcup

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://dengtar.com/12787.html