微信小程序开发需要注意的坑有哪些

微信小程序扫码签到工具上线。

　　回首过去的历程，是时候该停下来做个阶段性的总结了，回顾得失，以便持续改进。这篇文章，就总结一下过去跳过的那些坑吧。

这些坑大致可以归为如下几类：

　　小程序某些技术细节与常用技术存在不一致。文档中虽有提及，如果不仔细看容易跳坑。

　　小程序的文档太简略，没有注明支持哪些功能，哪些不支持，只有用了才知道。

　　小程序的bug。

列举一下几个比较典型的坑吧。

　　1、小程序名称可以由中文、数字、英文。长度在3-20个字符之间，一个中文字等于2个字符。

　　2、小程序名称不得与公众平台已有的订阅号、服务号重复。如提示重名，请更换名称进行设置。

　　3、小程序名称在帐号信息设置时完成，请谨慎设置，一旦设置暂不支持修改。

　　4、更换名称进行设置。如果企业商标，组织名称等名称被侵权，可通过公众平台侵权投诉流程发起投诉，取回名称使用权。

　　5、个人开发者无法申请微信小程序;目前微信仅支持企业、政府、媒体、其他组织申请。

　　6、一个主体可以注册30个，一个绑定身份的开发者只能创建5个微信小程序。

　　对于员工来说，请不要随便借给你的老板你的微信来注册微信小程序，因为你这样就没有机会了。

　　对于老板来说，请不要随便借给你的员工微信来注册微信小程序，因为你可能要不回来。

　　7、如果你不是特殊组织，你还是要花300元进行认证。

　　即使你对公帐号已经验证，你也需要缴纳300****元(支持微信支付)进行验证，这样才能够打开审核开关，发布小程序。

　　微信支付需要微信认证后才能使用。

　　8、服务器配置每月只有3次修改机会，省着点用，小心没机会。

　　没事别乱动下面的配置，一定确定了再动，并且一次性写完整，不然你改个小标点都会浪费你的一次机会。

　　9、你的域名、备案、https要准备好，不然做不了。(服务器域名需进过ICP备案、新备案域名需24小时候才能配置。域名格式只支持雅文大小写字母、数字及“-”，不支持IP地址及端口号)

　　10、小程序头像、介绍每月只能修改5次，服务范围每月只能修改1次。小程序二维码在第一个版本上线后才能获得。

　　11、选用模板消息时，你可用该标题的模板搭配不同的关键词使用，配置提交后关键词种类和顺序将不能修改。

　　12、找不到模板关键词的时候，可以进行申请添加。每月可以提交5次新关键词，通过后会被共享。(堆自家关键词的好机会呀!!)

　　13、一个小程序账号只有一个管理员(可修改)，可以绑定10位开发者。

　　14、重点注意：

　　开发版本：使用开发者工具，可将代码上传到开发版本中。 开发版本只保留每人最新的一份上传的代码。点击提交审核，可将代码提交审核。开发版本可删除，不影响线上版本和审核中版本的代码。

　　审核中版本：只能有一份代码处于审核中。有审核结果后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。

　　线上版本：线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。

　　15、小程序AppSecret只有管理员才能查看，平台不会明文保存AppSecret。

　　16、数据分析只统计已发布线上版本使用数值，同时提供实时统计数据。

　　17、开发者工具目前提供windows 64 、 windows 32 、 mac版本(版本目前持续更新迭代中，可能需要常常去update)。

　　18、内测阶段，代码上传功能仅管理员微信号可操作。

　　19、书写代码后，工具会自动帮助用户保存当前的代码编辑状态，直接关闭工具或者切换到别的项目，并不会丢失已经编辑的文件状态，但需要注意的是，只有保存文件，修改内容才会真实的写到硬盘上，并触发实时预览。

　　20、获取用户输入：需要使用组件的属性bindchange将用户的输入内容同步到 AppService。

　　21、脚本内不能使用window等对象：

　　JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。

　　22、zepto/jquery 会使用到window对象和document对象，所以无法使用。

　　23、一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo。

　　24、样式表不支持级联选择器：

　　WXSS支持以.开始的类选择器;可以使用标签选择器，控制同一类组件的样式。

　　25、本地资源无法通过 css 获取：

　　background-image：可以使用网络图片，或者 base64，或者使用标签。

　　26、修改窗口的背景色：

　　使用 page 标签选择器，可以修改顶层节点的样式。

  27、前台、后台定义：

　　当用户点击左上角关闭，或者按了设备Home 键离开微信，小程序并没有直接销毁，而是进入了后台;

　　当再次进入微信或再次打开小程序，又会从后台进入前台，只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

　　28、App() 必须在 app.js 中注册，且不能注册多个。

　　不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。

　　不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。

　　通过 getApp() 获取实例之后，不要私自调用生命周期函数。

　　29、tabBar 是一个数组，只能配置最少2个、最多5个tab，tab 按数组的顺序排序。(底部导航栏)

　　30、可以设置各种网络请求的超时时间。

　　1. Get和Post请求的返回数据不支持二进制流。

　　小程序支持通过post获取小程序码(有点像菊花)。尝试通过wx.request向微信服务器获取小程序码的图片，结果发现返回的结果无法显示。开始怀疑代码有问题，调试之后，发现微信服务器返回的结果正确，而小程序会自动把二进制结果转码。更郁闷的是，这种转码丢失了文件内容，并且转换是不可逆的。

　　于是，我们改方案，把服务器当中转站，让小程序使用wx.downloadFile从服务器下载图片。在收到小程序下载图片的请求之后，服务器直接和微信服务器获取小程序码的图片，然后以附件的形式返回给小程序。

　　问题解决。

　　2. Canvas和Image对图片的各种不支持。

　　①扫码签到中用到了二维码。

　　在开始的版本中，我们准备在Canvas上直接绘制二维码，接着使用wx.canvasToTempImage函数保存为image文件，然后通过Image组件加载。

　　经过调试，一切顺利。运行的时候呢，发现有时候在绘制完图片之后，调用wx.canvasToTempImage函数失败。这种情况在调试无法重现，运行的时候偶尔出现，不稳定。

　　仔细检查了代码，没问题啊。Google之后，有网友提出了解决方案，在drawImage完成之后，最好等3秒钟再调用wx.canvasToTempImage，以保证保存成功。

　　② Canvas和Image都不支持Base64图片，Image无法保存。

　　最初的方案中，我们自己生成二维码，后来为了兼容微信的“扫一扫”功能，我们决定改用小程序码。

　　开始，我们把Image的src设置为Base64格式，从服务器上通过request获取图片的Base64编码。小程序开发工具和iPhone上面测试都没有问题，唯独Android手机上无法正常显示图片。哦，原来在Android上，Canvas和Image都不支持Base64图片。可是...小程序开发文档中并没有这方面的说明啊。

　　怎么解决Android手机上的这个问题呢?如果把Image改成URL形式呢，小程序无法保存图片，以致即使是相同的图片，每次都要从服务器获取，这又加重了服务器的负担。这样吧，使用wx.downloadFile把文件下载到本地，然后再处理。

　　3. 小程序码的识别率太低。

　　上文提到，最初我们使用的签到二维码是自己生成的二维码(QRCode)，正方形的那种。识别率高，缺点是不支持微信“扫一扫”。在使用过程中，我们发现，相当数量的用户看见二维码，第一反应会使用微信“扫一扫”去扫二维码。为了满足这个需求，那就把二维码替换成微信的小程序码(有点像菊花)吧。

　　可是，和方形二维码相比，识别小程序码的成功率非常低。小程序码距离远点、稍微有些变形或方向没有对正都可能造成识别失败。一种典型的使用场景是：签到发起者把小程序码投影到大屏幕上，由于投影仪的分辨率和电脑不一致，图片可能产生变形。这种情况下，签到者怎么扫都无法识别。而以上所有这些，对于方形的二维码，全都不是问题。

　　由于小程序码的实现和识别原理没有开放，我们也没法采取图片纠错、还原等措施改善识别效果。

　　鱼和熊掌，真的很难兼得。

　　4. 转发小程序时默认带参数。

　　关于转发，在官方文档里是这么写的。

　　在 Page 中定义 onShareAppMessage 函数，设置该页面的转发信息。

　　只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮

　　用户点击转发按钮的时候会调用

　　于是，在实现中，我们定义了此方法，把方法体留空。然后纰漏出现了，当用户签到之后再分享，收到的人一点击分享的链接会进入签到状态。

　　查了很久，才发现原因是在分享的时候，把当前页面加载时候的参数也给分享过去了，可是，onShareAppMessage函数里面什么都没做啊。

　　看来，什么都不做的话，它就会默认分享页面加载时的参数。为了修复这个bug，就尝试return一个object，并给这个object赋值path和title两个参数。

　　终于解决了。

　　scroll-view组件

注意事项：

　　不要在scroll-view 中使用 textarea、map、canvas、video 组件

　　scroll-into-view 的优先级高于 scroll-top

　　在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh

　　还有在开发过程中背景图片如果是在本地，真机调制预览是不显示的，display：flex，在ios会中存在一些问题。

　　js里面也有许多坑，就说他们的执行顺序吧，在开发者工具中执行先执行aap.js然后执行其他js文件，但在手机上app.js和其他js是同时执行的，就比如说你在app.js里面向本地存储一个变量，然后再去index.js里面取这个变量，在开发者工具中是可以取到的，但在手机上它会取不到的，当然这也是我的逻辑问题，在开发过程中使用api也要注意，因为微信版本不同，所以在使用api时一定要仔细看文档，做好兼容处理，比如友好提示不兼容，不然报错就game over喽，还有就是小程序页面跳转打开最多五层，超出五层不会跳转了，所以大家要注意，可以在跳转的时候关闭前一个页面。

　　除了上面提到的之外，还有不少微小的bug，不一而足。虽然很快就解决了，相对开发源生代码而言，还是有些影响开发效率的。

以上就是微信小程序开发需要注意的坑，希望能对大家有所帮助。