微信小程序开发手记1.0

腾讯小程序还是很屌的，最近一波小游戏把小程序推到了风口，我司也抓住机会想来试一试水。于是我开发了一个红包小程序，从学习架构语法接口到最后完成第一版，用时一个月。遇到了无数的坎坷，无数摇头叹气想骂人。所以，现在把这一路的经验坎坷写下来以备他人不时之需。

一，开发前准备

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

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

2，小程序注册注意事项

小程序分为很多行业类别，在开发自己的小程序时需要想选对行业类别。因为行业类别直接关系到以后小程序结算日期以及其他API使用限制。我在开发红包小程序时没注意行业类别，导致商户结算日期是T+7，因为结算日太长直接影响小程序的提现功能。

二，小程序开发中的坑

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

2，请求微信接口。以支付为例，请求参数需要：appid（小程序ID，在小程序后台设置中获取），AppSecret（小程序密匙，在小程序后台获取），以及其他参数。微信下单接口是XML格式的数据，所以要把请求数据拼接成XML类型数据（XML格式在文档中有明确展示），然后将数据拼接成String用支付商户密匙进行签名放进XML中一同传输给微信。这里有个坑要提一下：“ 微信支付的金额是以‘分’为单位！！！如果你是以元为单位，那么你需要计算成‘分’进行传输，否则就会提示你金额错误！！！”

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格式的识别率是最高的。

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

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

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

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