微信小程序开发问题记录

1. 页面跳转过程的参数传递

• 单个普通参数

  wx.navigateTo({url: "../api/getOrderList?orderStatus="+0})

• 多个普通参数

  // 多个参数之间使用 "&" 分割
  wx.navigateTo({url: "../api/getOrderList?orderStatus="+0+"&psize="+10+"&pno="1})

• 传递对象

  // 对象中不带 "?"
  let params = { 
      orderStatus:0, 
      psize:10,
      pno:1
  };
  wx.navigateTo({ url: "../api/getOrderList?params="+JSON.stringify(params) })
  
  // 接收页
  onLoad: function(options) {
      let params = JSON.parse(options.params)
  }
  
  // 对象中带 "?"
  let params = {
      orderStatus:0,
      psize:10,
      pno:1,
      picUrl:"https://pic.bonwebuy.com/sources/images/goods/MB/653434255.png?x-oss-process=image/resize,m_fill,w_500,h_500/quality,q_90
  };
  wx.navigateTo({ url: "../api/getOrderList?params="+encodeURIComponent(JSON.stringify(params)) })
  
  // 接收页
  onLoad: function(options) {
      let params = JSON.parse(decodeURIComponent(options.suitGoodsList))
  }

2. input高度设置小于45prx时无效

在调试购物车商品数量框时，发现中间输入框与左右两侧数量增减框高度不一致，CSS中调小输入框高度仍无效，在微信开发者工具中调节输入框高度值，发现小于45rpx时，高度不再变化。
解决：设置高度的同时也要设置line-height

.input {
    height：40rpx;
    line-height: 40rpx;
}

3. 自定义顶部导航栏计算

/**
 * 小程序自定义导航栏情况下，获取导航栏高度
 * @return {Object} 返回状态栏高度和导航栏高度以及胶囊高度
 */
export const getNavigationBarHeight = () => {
	//  设备信息
	const systemInfo = wx.getSystemInfoSync();

	// 状态栏高度
	const { statusBarHeight } = systemInfo;

	// 右上角胶囊按钮位置信息
	const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
	const { top, height } = menuButtonInfo;

	// 计算公式
	// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度，这里是最小高度
	return {
		navigationBarHeight: 2 * (top - statusBarHeight) + height,
		statusBarHeight,
		menuButtonHeight: height
	};
}

4. 页面中存在定时器导致点击事件出现延迟的问题

应用场景： 计时答题，计时器在运行时，按钮的点击事件感觉很卡顿，要反应一会才会有选中效果，去掉计时器，按钮点击效果就很顺畅。H5中不存在这个问题，只有小程序中有这种情况。暂时没找到解决方案。
解决思路：

• 启用多线程worker

5. new Date('2020-11-11 13:23:32')在IOS中报错问题

const time = '2020-11-11 23:23:32';
const transformedTime = new Date(time.replace(/-/g, '/'))

6. wx.canvasToTempFilePath导出的图片在IOS中无法显示

解决思路：

• 确认画布尺寸是否过大，超出了屏幕尺寸（IOS中canvas尺寸超出屏幕，会绘制的图片有可能会出现空白）
• 确认canvas中的图片是否绘制正确，然后再导出
• 确认canvasapi是否是旧版接口，若是旧版接口，wx.canvasToTempFilePath()需要在draw()回调中调用