midnight-coffee / miniprogram

这是一个文章和电影介绍Demo。使用微信开发者工具开发的。

MiniProgram

这是一个热门文章的推送，热门电影介绍的小程序Demo

一、前言

  这是一个热门文章的推送，热门电影介绍的小程序，主要由三个页面组成：主页，文章页面(包含文章详情页面)，电影页面(包含更多电影页面、电影详情页面)组成。

  1.通过组件化思维，构建页面；使用Flex进行布局；

  2.通过小程序自带组件及API实现tabBar切换页面、轮播图、音乐播放、点击收藏、上拉加载更多数据、下拉刷新数据等功能

  3.通过Lin-ui第三方组件实现登陆用户头像框、icon-font、搜索框、电影评分组件等功能

  4.通过小程序wx.request进行服务器数据请求，通过辅助函数进行数据预处理

  5.通过自定义属性、动态路由、triggerEvent等方法，进行页面间、页面与组件间的数据传递；

  6.通过自定义事件，外部样式类，保持自定义组件独立性；

---

二、小程序Demo

主要由三个页面组成：主页，文章页面(包含文章详情页面)，电影页面(包含更多电影页面、电影详情页面)组成。

主页：大致分两部分，登陆用户头像框和点击跳转按钮。主要功能，页面间的切换(主页→文章页面)，显示登陆用户的头像和昵称。

文章页面：大致分两部分，轮播图和文章简介列表组件post。主要功能，图片轮播，列表渲染，页面间的切换(文章页面→文章详情页面)，tabBar切换页面（文章页面→电影页面）。

文章详情页面：大致分三部分，收藏，音乐和文章详情。主要功能，背景音乐播放，点击收藏提示。

电影页面：大致分四部分，搜索框，搜索提示栏，电影列表组件movie-list，电影组件movie。主要功能，电影搜索功能，列表渲染，条件渲染，服务器数据请求，动态路由，页面间的切换(电影页面→更多电影页面，电影页面→电影详情页面)，外部样式类修改组件样式。

更多电影页面：主要模块一个，电影组件movie。主要功能，服务器数据请求，滑动到底部加载更多数据，顶部下拉刷新数据，导航条动态标题，动态路由，页面间的切换(更多电影页面→电影详情页面)。

电影详情页面：大致分两部分，电影详情和预览图。主要功能，图片预览，服务器数据请求，演员名单滑动设置。

另外还进行了功能优化和可维护性提高。

功能优化：通过设置全局变量解决音乐播放时，切换不同文章详情页面时音乐播放图标错误问题；通过服务器分页加载方法，减少数据加载量，减少页面渲染时间，根据用户触底上拉按需加载更多数据。

可维护性：通过组件的自定义事件和外部样式类，实现自定义组件的独立性。

完成这个项目可以体验到：

• 微信开发者工具的使用，小程序项目的搭建。
• 学习组件化、模块化开发。
• 学习第三方组件库的运用，提高开发效率。
• 了解自定义组件独立性

---

三、技术栈

微信小程序 + Lin-ui 

Build Setup

# install dependencies
npm install

# 请使用微信开发者工具打开