微信小程序长列表踩坑

坑1
安装组件

npm install --save miniprogram-recycle-view

在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置

{
  "usingComponents": {
    "recycle-view": "miniprogram-recycle-view/recycle-view",
    "recycle-item": "miniprogram-recycle-view/recycle-item"
  }
}

但是报了这个错[ pages/course/audioCourse/audioCourse.json 文件内容错误] pages/course/audioCourse/audioCourse.json: [“usingComponents”][“recycle-view”] 未找到(env: Windows,mp,1.05.2201240; lib: 2.25.0)

解决方法 构建npm

坑2
微信小程序没有找到可以构建的NPM包，请确认需要参与构建的npm在miniprogramroot目录
一、排查是否安装npm
通过npm -v 查看npm的版本，如果能显示相应出版本号，就说明是安装成功的。

二、如果没有安装
1.npm init 会提示不是内部命令
2.安装node环境
这时候就需要安装node环境，可以在http://nodejs.cn/download/ 下载对应的版本：

三、开始构建nmp
1.进入小程序根目录（app.js所在目录），打开cmd

输入：npm init -y

参数 -y 表示对 npm 要求提供的信息，都自动按下回车键，表示接受默认值。

坑3 itemSize如果用rpx传入要转px

  onReady: function() {
    var ctx = createRecycleContext({
      id: 'recycleId',
      dataKey: 'recycleList',
      page: this,
      itemSize: { // 这个参数也可以直接传下面定义的this.itemSizeFunc函数
        width: 698,
        height: 108
      }
    })
    ctx.itemSize = this.itemSizeFunc(ctx,698,108)
    // ctx.append(newList)
    // ctx.update(beginIndex, list)
    // ctx.destroy()
},
itemSizeFunc: function (ctx, width,height) {
  return {
      width: ctx.transformRpx(width),
      height: ctx.transformRpx(height)
  }
},

下面要注意的是 不能用wx:if !!! 页面里面没有这个dom 会直接报错 虽然不影响使用 但是控制台有红色的报错警告很恶心 用hidden不生效 所以 要么用display：none；要么设置hight：为0