微信小程序之踩坑与填坑记录(持续更新...)

之前主要做Java开发，前些时间有机会接触了小程序开发，也挺有意思的，不过在开发微信小程序过程中也遇到了很多坑，特此记录一下所有的坑和解决方案，持续更新······

一. 注意事项

1.微信小程序的缓存是共通的

开发版，体验版，正式版的微信小程序的缓存居然是通用的。

这个真的有点惊吓，当时开发账号缓存直接显示在正式版微信小程序上，吓得以为要被祭天了，排查了半天才知道原来缓存是通用的。

解决方案

在登录前先清除缓存，再重新请求获取。

// 清空所有缓存
wx.clearStorageSync();

2.WXML 中的属性绑定是单向的

在 WXML 中，普通的属性的绑定是单向的，比如：

<input value="{{value}}" />

如果使用 this.setData({ value: '123' })，this.data.value 和输入框显示的值都会被更新；但如果用户修改了输入框里的值，却不会改变 this.data.value 的值。

如果需要双向绑定机制，可以在之前加入 model: 前缀：

<input model:value="{{value}}" />

这样，如果输入框的值被改变， this.data.value 就能同时改变了。

3.快速滑动无法及时触发底部事件

微信小程序中的reachBottom 触底事件有 350ms 的频率限制，如果快速滑动就可能会导致数据不能继续加载。

解决方案

下拉触底后，添加一个加载中的显示效果，延迟350ms显示下一页数据。

4.特殊机型的触底高度设置

之前设置全局下拉触底事件的触发高度参数 onReachBottomDistance 为 0，在其他机型显示没有问题，只有红米和小米手机下拉几次后就无法再加载更多数据了，猜测可能是因为小米系列手机有什么特别的通用设计。

解决方案

将 onReachBottomDistance 改大一点，也就是在距离底部 100px 的时候就触发，这样就能够提前加载下一页数据了。

"window": {
    "onReachBottomDistance": 100
 }

5.自定义组件拿不到app.wxss样式

自定义组件后，发现所有公共样式都会失效，当时我的解决方案是直接导入，看网上也有直接添加配置的，我没有试过，大家也可以试一下。

解决方案

(1) 直接导入

@import '/app.wxss';

(2) 添加配置

options:{
	addGlobalClass:true
}

6. background图片url不能为本地图片

背景图片设置为本地图片不能正常显示，解决方案可以参考以下博客：

微信小程序之 如何添加背景图片 & 包大小超限解决方案

7. app.js的回调

因为 app.js 中的 onLaunch 是异步的，当小程序首页打开时，app.js中在onLaunch里的接口还没有返回，globalData的值还未来得及设置，但index.js已经执行了，所以会遇到获取不到globalData的问题。

解决方案

在 onLaunch 请求返回之后，再执行index.js中的onLoad方法。

app.js 代码

App({
	onLaunch: function () {
		wx.request({
			url: 'https://www.xxx.com/test',
			data: {
			},
			success: function(res) {
				//设置全局变量
				this.globalData.userId = res.userId;
				//由于是网络请求，可能会在Page.onLoad后才返回,加入callback以防止这种情况
				if (this.userIdCallback){
					this.userIdCallback(res.userId);
				}
			}
		})
	},
    globalData: {
    	userId: ''
    }
})

index.js 代码

//获取应用实例
const app = getApp()

Page({
  data: {
    showPic: false
  },
  onLoad: function () {
    //判断是用户是否绑定
    if (app.globalData.userId && app.globalData.userId != '') {
      this.setData({
        showPic: true
      });
    } else {
      app.userIdCallback = userId => {
        if (userId != '') {
          this.setData({
            showPic: true
          });
        }
      }
    }
  }
})

8. 微信小程序wx.login 获取的code只能用一次

这个是因为我们的场景比较特殊，首先要判断用户是否绑定，没有的话就跳转到登录界面进行账号绑定，此时再根据code获取openId就失效了，最后采用后端缓存的方式解决的，具体方案见之前我写的另外一篇博客：

微信小程序登录流程（自定义账号绑定功能）

9. 微信小程序中的生命周期管理

这个其实是很重要的，了解生命周期和页面的加载销毁机制能够让我们更好的把控全局。

比如一个刚绑定的用户，点击后退按钮退回到上一个页面，会触发onShow事件而不是onLoad事件，所以我们需要把身份判断写在onShow中才能显示已经绑定后的内容。

二. 踩坑与完善

除了以上的注意事项，微信小程序还有很多官方的坑以及需要完善的地方：

1.微信小程序没有table效果

堂堂微信小程序居然没有 table 效果，但是项目有需求，只能通过view来模拟了，具体实现代码可以参照我之前写的博客：

微信小程序之实现隔行变色表格

2.input 输入框聚焦时闪烁

官方BUG最为致命，搜索了很多方法都不是很完美，如果要求不高，可以使用textarea来模拟实现。

3.textarea最大值超限输入

textarea有maxlength属性，可以用来限制用户输入的最大字数，但是有的时候不停的复制粘贴是可以输入超出限制值的字数的，还也不会显示在文本框中，这样就需要在提交数据时进行二次判断：

js代码

if (this.data.content && this.data.content.length > 200) {
      wx.showToast({
        title: '内容不得超过200个字符',
        icon: 'none'
      });
      return;
}

4.tab切换高度无法自适应

swiper 的 tab 选项卡高度默认为 150px，不能做到自适应，如果tab页面的内容较多，就会出现无法完全显示的问题。

解决方案

微信小程序之 swiper 的 tab 选项卡高度自适应问题解决方案

5.上传图片出现unknown后缀

拍照时选原图，出现"unknown"扩展名，不选原图正常。

属于官方BUG，至今仍未解决，不过测试发现虽然后缀格式不对，但是不影响显示，根据该格式图片生成缩略图也能正确显示，所以暂时不做处理，希望官方尽快修复。

6.安卓和 ios 下的样式适配

微信小程序虽然尽可能屏蔽了安卓和 ios 下的各种差异，但是一些样式上还是会存在问题，比如，ios 中 input 的 placeholder 属性字体不居中。

解决方案

• 对 placeholder 设置 line-height 及 font-size
• 对 input 设置高度

其实安卓和 ios 的样式差异还是挺多的，平时开发中需要多测试多调整。

做久了后端，发现小程序和前端开发真的需要很多的耐心，虚心请教，坚持学习非常重要，继续加油！

欢迎关注我的公众号，用讲故事的方式学技术。

这里有脑洞大开的奇葩故事，也有温暖文艺的心灵感悟。

技术知识，也可以很有趣。