练手项目总结构建一个集阅读和电影资讯为一体的小程序

Posted 2022-05-11 ingots

本项目是一个集阅读和电影资讯为一体的微信小程序主要分为启动页，阅读部分和电影部分3大块。以下是这次项目的总结：

GitHub地址：https://github.com/wkx1214108696/FirstApplets.git

启动页

• 页面布局：自适应的rpx和flex进行布局（之后所有的页面都是用flex布局）
• 使用`wx.switchTab(Object object)`跳转至阅读和电影资讯页面，设置了tab选项卡的部分必须使用`wx.switchTab(Object object)`

阅读部分

使用本地模拟的数据。新闻列表页面通过自定义属性及获取，得到每个新闻的postId，然后url将postId传递给新闻详情页面，然后得到每个详情页对应的信息。

• 新闻列表页面
  • Swiper滑动组件
  • 单个新闻item模块
• 新闻详情页面
  • 收藏与取消收藏，因为无服务器，所以使用缓存来实现此功能。
  • 背景音乐（问题最多的部分）
    • 总控开关点击之后页面不同步，解决方案：在onLoad监听音乐播放与暂停。
    • 点击返回后，重新进入页面音乐在播放但是页面图片还是初始图片，解决方案：在全局变量中记录音乐是否播放。
    • 在开启一个音乐时，切换到另一个页面的音乐发现音乐图片错误显示的问题，是因为全局变量指的还是上一次页面的状态，解决方案：播放时在全局变量中记录当前音乐id，暂停时清空音乐id

电影部分

使用豆瓣API，实现电影资讯页面、更多电影页面，电影详情页面，搜索功能等。模版：星星评分，单个电影，电影资讯页面的单个列表，搜索页和更多页的公共部分。

• 电影资讯页面
  • 采用同一模板完成正在热映、即将上映、前250三部分
  • 跳转至更多页面同上述新闻部分的跳转，使用自定义属性，然后url传值，在更多页面进行switch判断是那种类型。
  • 搜索功能和搜索页面，使用v-if控制搜索页和资讯页的显示。
  • 巧用setData(a)和setData(a)
• 更多电影页面
  • 根据电影资讯页面传来的信息发出不同的请求来显示页面。
  • 上滑加载更多和下拉刷新，上滑要新老数据进行拼接，刷新则不用管，目前刷新存在点小问题为实现。特别要注意scroll-view和flex同时使用的情况。，
• 电影详情页面
  • 同文章详情页

其他收获

• <text>直接包含文字部分不用换行，否则页面会有一行换行。

• this.setData(a)可以将数据绑定到data中。此时的a只是一个临时变量，外部无法访问到，解决办法this.setData(a_key:a),此时访问a_key就可以访问到a。

• this.data与this.setData的关系就是this.setData里面存储的是this.data的副本，而界面是从this.setData里面托管的this.data的副本取数据的。所以我们更改this.data并不会直接更新界面，因为这个时候的this.setData里面的副本还是没有更新前的。 想要更新界面就得使用this.setData()

• e.target 指向触发事件监听的对象。e.currentTarget 指向添加监听事件的对象。

• 在使用template中的类名时最好加一个特有的前缀。否则其他相同类名的样式可能会层叠。

• data-xxx=""自定义属性,固定以data-开头，可以连接若干-xx,注意:会将xx转化成小写，连字符连接的首字母大写。

• 要细心，字段要写对。对于有些不报错的真的很头疼。

---

 

每天进步一点点。