一：踩坑之路
前段时间公司要求做了一个微信小程序，现在趁着还算空闲，总结一下小程序中所遇到的问题。 有微信提供的文档接口和开发者工具，完成起来总是感觉那么畅快，但是在手机上预览后，总是会有这样那样的问题： 1、背景图片的问题 微信要求打包的小程序不超过1M，也许是出于这个原因，微信不允许用本地图片，但可以使用image标签来展示图片，或者将背景图转为base64，也或者用图片网络地址也可以，将图片存到服务器上，但是每次图片有修改都要重新上传，如此也是很麻烦；base64图片编码如果图片大的话编码会很长，但是这种也算方面些； 2、图片问题：一般页面背景图选择用png格式的图片，但是在小程序中，一般格式的图片作为背景图会很模糊，所以选择了矢量图svg来作为背景图base64转码； 3、数据接口：小程序规定接口必须是https的请求，必须在小程序的管理后台配置好请求域名，上传域名，开发工具可以是http； 4、页面之间的跳转：小程序的页面跳转有wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack四种跳转方式，同时规定跳转不能超过5层；跳转的实现通过bindtap点击事件或组件navigator <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
但是连续点击的话页面会进行多次跳转，这时候我的解决办法是判断仅让点击一次执行操作； 5、文本框的默认提示文字：当光标到文本框内，获取焦点时，默认提示文字会闪动，这个没有去解决； 6、文本框设置为密码框时：当文本框为密码框时，type="text"，手机键盘第一次输入数字后闪动到字母键盘，这个没有去解决； 7、按钮的点击效果：文档中提示当hover-class="none"时，没有点击效果，但是并不是如此；当button按钮设置为镂空时，仍然有效果的出现，因此不设置镂空就可以了； 8、消息提示框类型：小程序只提供了两种消息提示框类型：success、loading；对于有些需要提示的地方总是不合时宜，因此就自己写了一个； 9、小程序的布局：布局用了rpx布局，基本适应了大部分手机的大小，但是小屏手机就需要特别适应； 10、录音功能：小程序的录音格式是silk的，在其他播放控件上是不能播放的，wx.playVoice是可以播放本地缓存录音文件的；所以上传录音文件必须要进行转码，这个我们是有后台进行转码处理的。 二：坑点合集假如你有其中的解决方法或思路，欢迎回复在这里！ input 组件 placeholder 文字与 input 的值重叠 暂无解决方案
获取焦点 和 失去焦点 时，光标和文字跳动 暂无解决方案
当 input 设置为居中对齐时，光标会出现在奇怪的位置 暂无解决方案
bindconfirm 事件在失去焦点时也会触发，类似于 blur（微信版本 6.5.3） 暂无解决方案
对 input 做动画时，如果是获取焦点状态，会失效 暂无解决方案，因为 input 在获取焦点时是 native 组件，失去焦点后改回
web 组件
type 为 idcard, digit 时并不是调用数字键盘 暂无解决方案，目前起作用的只有 number
scroll-view 组件 安卓下列表较长时滚动白屏 目测是渲染性能的问题
动态渲染列表内容的时候，滚动条回到顶部 手动设置 scrollTop 值，组件自己并不会自动更新这个值
image 组件 image 标签的 url 需要添加协议 添加协议头
调试 控制台输出错误信息不正确，如 语法错误 等会输出错误指向文件顶部，而不是出错的位置 暂无解决方案
系统错误 {“baseresponse":{"errcode":-80002,"errmsg”:””}}` 无权限?
某些情况下 wxml 面板空白 暂无解决方案
某些奇怪的原因导致真机出现 $gwx 错误 检查 wx:key 是否配置正确
样式 nth-child、nth-of-type 不支持 单独使用 class 控制
元素设置为 inline-block时，调试工具 与 真机表现不一致，调试工具有间隔，真机无间隔 设置 font-size:0
navigator 标签 display: flex; 失效 暂无解决方案
hidden 指令值为 true 时无效 手动设置样式控制，因为某些情况下，微信的 display: none 的权重比较低，会被覆盖
background-iamge在真机环境下，无法使用相对路径的图片 可以使用 base64 或者外链，也可以使用 image 组件替代
clip-path 在安卓机上性能消耗严重，与 scroll-view 一起使用时，会导致 scroll-view 滚动严重卡顿 使用别的样式替换 clip-path
API 已拉起的键盘无法收起，wx.hideKeyboard() 方法无效 暂无解决方案
快速点击导致页面重复打开 暂无解决方案
onReachBottom 被重复触发 改用 scroll-view 或者 手动节流
Modal 弹窗中的内容无法换行 自定义弹窗组件
wx.request 只支持 UTF8 编码 转换编码
wx.previewImage 不会使用Image 组件已经加载过的图片缓存 暂无解决方案
兼容性 安卓下目前没有分享功能 暂无解决方案
scroll-view 使用 flex 布局，使用 flex: 1 撑起高度时，安卓下 scroll-view 会对下方元素造成不可见的遮挡 可再设置 height: calc(100% - xxx px); 进行兼容
安卓下使用的是 X5 内核，所以很多特性无法使用，比如 Promise、Object.assign、Array.prototype.includes 等等 单独引入 polyfill
其他
require 只能引入 .js 文件，没有文件后缀或者后缀不是.js 会在最后补上 ‘.js’ 暂无解决方案
wxml 和 wxss 文件引入文件可以使用绝对路径，以当前应用程序的目录为根目录，js 文件不行 暂无解决方案
模板中出现的某些特殊符号（如 word 中插入的符号）导致模板渲染失败 替换符号 或者 使用变量
通过 querystring 方式进行页面传值的时候，内容包含 % 会解码错误 将 % 进行 URL 编码为 %25，微信会自动解码
| 
收藏