微信红包小程序开发笔记-我遇到的坑

我开发了一个红包小程序。从学习架构语法接口到完成第一个版本，我花了一个月的时间。我经历了无数次的坎坷，无数次的摇头，无数次的叹息，无数次的想要发誓。所以，现在我把我一路走来的经历和陷阱写下来，以备其他人需要。

1。小程序开发前的准备

1.域名、服务器、证书、开发工具。

小程序开发必须使用https请求，所以我们在请求域名后必须请求证书。腾讯云和阿里云都有免费的证书申请。此类免费证书通常是赛门铁克旗下的免费DV SSL证书。连接域名和证书并在nginx中设置（腾讯云只需审核域名，https会自动配置）
建议使用腾讯云选择服务器。腾讯云针对小程序推出了一系列专用晶圆解决方案。易于构建和扩展。如果是阿里云或者其他云服务，则需要手动创建服务。我用的是centos7+nginx+tomcat7+java7
自己开发工具，访问https://mp.weixin.qq.com/cgi-bin/wxdownload。

2。注册小程序需要注意的事项

小程序分为很多行业类别。在开发自己的小程序时，一定要选择合适的行业类别。因为行业类别直接关系到小程序未来的结算日期以及其他API使用限制。在开发红包小程序时，我没有关注行业类别，导致商户的结算日期变成了T+7。由于结算日期过长，直接影响小程序的提现功能。

2。小程序开发的陷阱

1.请登录。 小程序要求后台时，必须先登录。使用微信本地调用wx.login生成code，然后将code传给后端，使用code通过微信接口获取openID、session_key、unionid。 openID是微信返回的唯一用户ID。 session_key为会话密钥，unionid为用户在开放平台上的唯一标识。调用其他微信服务与用户交互，如提现、退款等操作时，需要使用openID。提款时，必须输入用户的OpenID进行付款或退款。

2.请求微信接口。 以支付为例，请求参数需要appid（小程序ID，在小程序后台设置中获取）、AppSecret（小程序密钥，在小程序后台设置）等参数。微信点餐接口使用XML格式的数据，所以请求数据需要粘贴成XML类型的数据（XML格式在文档中清晰可见），然后将数据粘贴成一个String，由支付商户的密钥签名，放入XML并一起转发。对于微信。这里要提一个坑：“微信支付的金额是以分为单位的！如果以元为单位，转账时必须以“分”来计算，否则系统会提示金额错误！” !!”

3.微信语音识别。 某些时候我们会需要用户微信提供的录音接口，比如语音识别。微信的声音是丝滑的V3，但我在开发过程中遇到了一个让我想哭的大绊脚石。由于微信小程序开发工具录音后对录音文件进行base64编码，导致编码后的音频文件无法识别。起初我没有关注音频文件是否加密，所以满世界寻找解决方案。最后在一篇文章的评论里看到朋友：“微信开发工具的声音是base64加密的，但是在真机上会正常”。 “丝音档”，我突然想起来，赶紧回头一看，原来确实是他说的。所以，在真机测试中，我得到了正确的silk音频文件，但是当时无法识别该音频文件，因为所有的音频识别接口，无论是科大讯飞、百度还是其他，都只支持“pcm、wav、mp3” “音频文件。于是我又深入思考，后来在GitHub上找到了silk-v3-decoder的解决方案：https://github.com/kn007/silk-v3-decoder。使用该工具的前提是它依赖于gcc和ffmpeg。安装这两个组件非常非常耗时。安装方法基本都是百度的，这里就不详细说了。最后流程如下：“小程序客户端调用微信音频接口进行录音”-“服务器接受silk音频文件”-“程序中调用silk-v3-decoder sh脚本将音频转码为wav格式”-“转至百度语音识别界面”-“语音识别完成并返回结果”。最后说一下几种格式的语音识别率。经测试，pcm格式的识别率最高。

4、微信地图。 我们经常需要使用地图组件，微信就提供了这个。但是我直接使用的时候发现了一些问题。首先，地图无法适应屏幕，所以需要使用wx.getSysteminfo设置屏幕高度，然后让地图适应。其次，微信地图无法自定义标记的气泡图。例如，当我查找一个人的位置时，我只能使用本地图像来显示或提示，而无法使用在线图像来显示该人的头像。当我们想要创建一个工具箱来扩展接口时，麻烦就来了。由于地图是原生组件，因此原生组件始终位于顶部。如果在微信小程序中使用之类的标签来创建工具栏，它总是会被地图遮挡。但幸运的是，微信还提供了另外两个标签：“和”。该标签允许工具栏出现在顶层。但问题是顶层只能显示“封面视图和封面图像”这两个标签，这极大地影响了用户界面的设计。还有一点要提的是：“虽然小程序对HTML有更好的支持，但还是有很多不兼容的地方，比如z-index”在微信小程序中是无效的！ ”

5、展开图标图标。

老实说，微信提供的一些过时的图标确实难以辨认。所以我们将扩展它。但是如果我们按照HTML套路引入css，那就不行了，必须先转换一下才可以使用。我以“阿里巴巴矢量图标库”为例。地址是http://iconfont.cn/collections/detail?cid=599。首先选择您要在此处添加的图标集。打开我的项目，下载它并找到ttf格式的文件。然后到这个平台https://transfonter.org/，将字体文件转换为base64格式最后导入到微信小程序的wxss样式文件中。

3。小程序开发工具和测试

小程序开发工具和真机测试有一定的风格差距。比如页面的左右滑动、下拉菜单。如果你在开发工具中没有设置下拉控件，就会出现无下拉菜单，但真机会有下拉动作，并且弹起前会有一个空格。其次，设置填充样式时，会出现水平滑块。这个滑块在开发工具中不会出现，但在真机上它会左右滑动，这很烦人。所以你在开发工具里写样式的时候，需要在真机上看一下，看看样式有没有问题。
如果您没有搭建https服务器，小程序无法检索到服务器。在向本地服务器发出请求之前，请点击开发者工具页面右上角的“详细信息”按钮，并勾选页面底部的“不检查安全域名”选项。 ”。最后，设置好https服务器后，需要重新编译小程序来请求https服务器。如果需要测试多台机器，请点击开发者工具顶部的“测试”按钮提交测试，完成的测试报告将显示在测试结果页面上。
最后，开发完小程序的一个版本后，使用顶部的“上传”按钮上传代码。然后进入小程序管理后台提交审核。审稿时间1-3天左右，根据腾讯爸爸的效果而定。