小程序开发中的那些坑

前言

最近小程序特别火，不用安装，即开即用，用完就走。省流量，省安装时间等等优势吸引了大量用户，几乎所有大厂的APP都有小程序版本。我厂也有开发，所以我也加入了开发小程序的队伍，开发中的那些注意点和各位小伙伴们分享下。

一.css伪类看不到

在微信开发者工具中，Styles不会显示css伪类，喜欢写::before或:first-child的小伙伴们请注意了，你的伪类在控制台是看不到的。

建议不要在公共css文件夹下写伪类，本妹子就遇到过这个坑，某小伙伴在公共css上写了按钮的after加了个边框样式，找了好久才找到这个边框写在哪。

 button::after {
      border: 2rpx solid #000;  
 }

after.png

二.https

小程序的图片只支持https://...的URL，后台接口不能传//或http://,否则有些安卓机会不兼容

在微信开发者工具中，可勾选"不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书"规则即可用http，但是在实体里并没有这个选项，所以建议开发时就用https路径。

https.png

三.不要换行写，有空格不行

微信开发者工具不会对代码进行trim操作，如果代码中换行，页面也直接换行。

wrap.png

四.部分CSS3属性不能用

如transform:rotate(180deg)，不能用。

五.Git 状态展示

project.config.json和.git需要在同层目录,Git 状态才能显示，所以project.config.json最好放在根目录中

git.jpg

六.页面跳转

wx.navigateTo 新窗口打开页面 新页面有返回按钮

wx.redirectTo 关闭当前页面，跳转到应用内的某个页面 新页面没有返回按钮

七.IDE更换

微信开发者工具有很多快捷键都不能用，对于很多熟悉其他IDE的前端开发者来说很不习惯。
可以隐藏编辑器或分开窗口，把微信开发者工具只当作浏览器，然后然后小伙伴们就可以用自己熟悉的IDE了。

IDE.png

八.分享事件不支持同步

如果你想自定义分享图片，则在生命周期onShareAppMessage中编写如下所示：

Page({
  onShareAppMessage: function (res) {
    return {
      title: '自定义转发标题',
      imageUrl: 'https://raoenhui.github.io/images/logo.png'
    }
  }
})

但是onShareAppMessage不能支持异步，如果你想从接口里获取分享图片URL，必须在onLoad提前读取并放入Data中

九.小程序有并发限制

wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个。

所有为了保险起见，需要写个请求队列，如果并发量大于10，则等待请求。

十.小程序插件限制

image.png

插件上限个数为5个，推送消息不能用，web-view也不能用，所以不能内嵌H5。更多限制可以看 插件使用组件的限制和 插件调用 API 的限制。å

其他链接

• 原文地址为:https://raoenhui.github.io/wechat/2018/07/18/%E5%B0%8F%E7%A8%8B%E5%BA%8F

• https://developers.weixin.qq.com/miniprogram/dev/api

Happy coding .. :)