微信红包小程序开发手记—踩过的那些坑

2018-03-2005:14:03APP与小程序开发Comments2,803 views字数 2739阅读模式

开发了一个红包小程序,从学习架构语法接口到最后完成第一版,用时一个月。遇到了无数的坎坷,无数摇头叹气想骂人。所以,现在把这一路的经验坎坷写下来以备他人不时之需。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/2146.html

一,小程序开发前准备

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

小程序开发必须是https请求,所以我们申请域名后需要申请一个证书,腾讯云和阿里云都有免费证书申请,一般这种免费证书都是Symantec下的免费DV SSL证书。将域名与证书绑定后配置在nginx中(腾讯云只需审核域名即可,系统会自动配置https)
服务器选择推荐腾讯云,腾讯云推出了一套小程序的专用Wafer解决方案,搭建方便易扩展。如果是阿里云或其他云服务,则需要自己手动搭建服务了,我用的是 centos7+nginx+tomcat7+java7
开发工具自己去https://mp.weixin.qq.com/cgi-bin/wx下载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/2146.html

2,小程序注册注意事项

小程序分为很多行业类别,在开发自己的小程序时需要想选对行业类别。因为行业类别直接关系到以后小程序结算日期以及其他API使用限制。我在开发红包小程序时没注意行业类别,导致商户结算日期是T+7,因为结算日太长直接影响小程序的提现功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/2146.html

二,小程序开发中的坑

1,登陆。小程序请求后台是要先登录的。通过微信本地调用wx.login生成一个code,然后将code传到后台通过微信接口用code获取openID与session_key还有unionid。openID为微信返回的用户唯一标识。session_key为会话密匙,unionid为用户在开放平台的唯一标识。在调用微信的其它服务与用户进行交互时需要openID,比如提现和退款操作。提现时需要给出用户的OpenID进行提现或者退款。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/2146.html

2,请求微信接口。以支付为例,请求参数需要:appid(小程序ID,在小程序后台设置中获取),AppSecret(小程序密匙,在小程序后台获取),以及其他参数。微信下单接口是XML格式的数据,所以要把请求数据拼接成XML类型数据(XML格式在文档中有明确展示),然后将数据拼接成String用支付商户密匙进行签名放进XML中一同传输给微信。这里有个坑要提一下:“微信支付的金额是以‘分’为单位!!!如果你是以元为单位,那么你需要计算成‘分’进行传输,否则就会提示你金额错误!!!”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/2146.html

  3,微信语音识别。在某些时候我们需要用户微信提供的录音接口,比如语音识别。微信的语音是silk V3格式的,但是在开发过程中我遇到了一个当时让我想哭的大坑。因为微信小程序的开发工具在录音后会对录音文件进行base64编码,编码后的语音文件是没法进行识别的。我开始没有注意语音文件是否被加密,于是满世界找方案,最后在一篇文章的留言中看到了一哥们儿说“微信开发工具的语音是base64加密的,但在真机中会变成正常的silk语音文件”,这才恍然大悟,赶紧回去查验,果然跟他说的一模一样。于是在真机测试中我获取了正确的silk语音文件,但是这时候的语音文件还不能进行识别,因为所有的语音识别接口无论讯飞还是百度还是其他,都只支持“pcm,wav,mp3”之类的语音文件。于是我他妈又陷入沉思,后来在GitHub中找到了一个解决方案silk-v3-decoder:https://github.com/kn007/silk-v3-decoder。使用这个工具前提是需要依赖gcc与ffmpeg,安装这两个组件真的是非常非常非常的花时间,安装方法基本可以百度,这里不再赘述。最后的流程是:“小程序客户端调用微信语音接口录音”——“服务器接受silk语音文件”——“程序中调用silk-v3-decoder的sh脚本将语音转码为wav格式”——“传输给百度语音识别接口”——“完成语音识别返回结果”。最后说一下几种格式的语音识别率,经测试,pcm格式的识别率是最高的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/2146.html

4,微信地图。很多时候我们需要用到地图组件,微信提供了这个东西。但是当我是直接使用时发现了一些问题。首先地图不能自适应屏幕,那么需要通过wx.getSysteminfo来获取屏幕高度然后让地图适配。其次,微信地图不能自定义标记的冒泡图片,比如说当我定位了某个人的位置,我只能使用本地图片对其进行展示或提示,无法用网络图片来展示这个人的头像。并且当你想制作一个工具条来扩展界面的时候,麻烦来了。因为地图是原生组件,所以原生组件是永远置顶的,当你用微信小程序的<view>之类的标签制作工具条时永远会被地图挡住。但是好在微信提供了另两个标签:“<cover-view>与<cover-image>”,这个标签能让你的工具条显示在最上层。但是麻烦就是只有“cover-view与cover-image”这两个标签能展示在最上层,所以极大影响了UI设计。另外提一句:“虽然小程序对HTML语言支持较好,但是还是有很多不兼容,比如z-index”在微信小程序中是无效的!”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/2146.html

5,扩展icon图标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/2146.html

坦率的讲,微信提供的那几个土了吧唧的icon真是没法看。所以我们准备扩展一波。但是如果按照HTML的套路引入css那是不可能的,需要转化一下才能使用。我这里以“阿里巴巴矢量图标库”为例,地址见:http://iconfont.cn/collections/detail?cid=599。首先在这里选择一套图标加入到我的项目中,并下载下来,找到ttf格式文件。然后到这个平台https://transfonter.org/,把字体文件转化成base64格式,最后在微信小程序wxss样式文件中引入即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/2146.html

三,小程序开发工具以及测试

小程序的开发工具和真机测试在样式上是有一定差距的。比如说页面的左右滑动以及下拉。在开发工具中如果没有设置下拉监听是不会有下拉的,但是在真机中会出现下拉的动作,并且回弹前有空白。其次在设置padding这个样式的时候会出现横向滑动条,这个滑动条在开发工具中不会显示,但在真机中会出现左右滑动,这他妈是十分令人头疼的。所以当你在开发工具中写好的样式时必须要在真机中预览一下,看看是否有什么样式不对。
在你没有搭建好https服务器的时候,小程序是不能请求到服务器的。本地服务器请求前需要在开发工具的页面的右上角点击“详情”页中的最下面勾选“不校验安全域名”。最后当你https服务器搭建好之后,需要重新编译一下小程序才能请求到https服务器。当你需要进行多款机器测试的时候,在开发工具的顶部点击“测试”按钮提交测试,测试完的报告会显示在测试结果页面。
最后在小程序开发完一个版本后在顶部“上传”按钮上传代码。然后进入小程序管理后台提交审核。审核时间在1-3天左右,视腾讯爸爸的效率而定。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/2146.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/2146.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定