微信小程序开发 day02 - 列表流搭建、wsx文件、下拉上

一、视频列表流搭建

1、如何去除项目运行的 sitemap 警告？

• 在 project.config.json 文件中配置

    "checkSiteMap": false,

2、新建项目出现微信开发者工具【代码错误没有日志】的情况怎么办？

• 切换 基础库，灰度中的库极有可能导致不提示

image.png

3、wx:for推荐提供wx:key，主要原因有哪两方面？

• ①更新列表时，希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch的选中状态）
• ②在更新列表时，会进行diff算法，提高列表渲染时的效率

4、认识 .wxs文件 ？

• ① 【.wxs】作用是为 【.wxml】提供数据或者方法
• ② 【.wxs】仅支持 es5以下的JavaScript代码（还是阉割版）
• ③ 导入导出需要用commonJS语法【module.export】
• ④ 使用语法

<wxs src="./../comm.wxs" module="some_comms"></wxs>

5、列表页【下拉刷新】和【上拉加载更多】的实现？

-【下拉刷新】

// 配置文件中开启下拉功能【index.json】
{
  "usingComponents": {
    "vide-item-v1": "../../components/video-item-v1/index"
  },
  "enablePullDownRefresh": true
}

// 监听下拉事件【index.js】
onPullDownRefresh: function () {
    console.log("onPullDownRefresh");
    this.getTopMVData(0);
  },

-【上拉加载更多】直接监听即可

// index.js
onReachBottom: function () {
    console.log("onReachBottom");
    this.getTopMVData(this.data.list.length);
  },

6、自定义组件监听点击事件，并且传递参数？

// index.wxml
<vide-item-v1 bindtap="handleTapItem" item="{{item}}" data-item="{{item}}" />

// index.js
handleTapItem: function (event) {
    console.log("handleTapItem" );
    let movID = event.currentTarget.dataset.item.id;
    wx.navigateTo({
      url: `../detail-video/index?id=${movID}`,
    })
  },