/ WEB  

做了个电影排行列表小程序

前言

小程序叫:TOP 电影看不完

截图

最近把这个小程序给基本完成了,这个‘完成’,是指最初我设想的功能都实现了。其实半年前就开始着手了,不过断断续续的,后来还回家学车、过年等等,一直没有把它完成。最近又把它捡起来,主要是把后端给完成了。

我爱拿两个东西来做练手的项目🤪🤪,一是天气,二是电影列表。主要原因还是因为有免费的 API,然后是功能明确。

设计

功能:

  • 搜索
    • 先初步建立 top250 的列表,然后搜索
    • 搜索内容包括片名、类型、时间、主演、评分、排名
  • 已看
    • 标记看过的电影,看过就看过了,没有撤销选项😎
  • 收藏
    • 点击收藏,加入收藏列表
  • 评论
    • 发表评论

前端

  • 小程序本身就是 MVVM 架构的
  • 与后端配合登录:wafer2-client-sdk
  • 视图
    • 豆瓣 top250 列表
      • 按排名排列列表,显示基本信息
      • 上拉加载 25 条数据,防止数据过多造成加载缓慢
    • 搜索
      • 搜索结果按排名排列,视图同首页
    • 电影详情
      • 显示电影详细信息,总看过数、收藏数、评论数
      • 用户可进行评论
    • 个人中心
      • 头像、姓名、等级、看过数、收藏数、评论
      • 等级数据综合看过电影数据和评论得出
    • 看过、收藏列表
      • 同首页视图

前端目录结构

前端目录结构

后端

  • 采用 MVC 架构
  • 采用 nodejs,使用 wafer-node-sdk
  • Web 框架:Koa2
  • 请求体解析:koa-better-body
  • 数据库(电影数据来自豆瓣):
    • toplist:top250 部分数据
      • 电影 id、影名、排名、评分、类型、时间、导演、主演、封面
    • user:用户信息
      • openid、session、已看、收藏
    • mov:电影详情
      • 电影 id、详细描述、地区、原名、又名、已看数、收藏数、评论数
    • comment:评论
      • 电影 id、openid、评论内容、评论时间、片名

后端目录结构

后端目录结构

技术栈

HTML
CSS
JavaScript
Node.js
MySQL
Nginx

动手做

本地部署

本地搭一个 https 服务器,因为小程序只支持 https,在微信公众平台设置域名等基础设置。

注意,要想扫码调试、预览,需要在路由器设置 hosts,把域名指向电脑的 IP。

敲代码

其实就是正常的 web 编程,小程序就是一个和 vue 很像的框架,数据是双向绑定的。因为接触过 vue 所以上手很简单。想想之前从节点驱动跳出,初次接触数据驱动,让我感觉很新奇也很爽。

首先是,微信开发者工具,之前第一次用的时候,真他妈难用,现在更新越来越好了,不过编辑器还是同样垃圾,敲代码还得用 VS code 或其他熟悉的编辑器,我用的是 sublime 因为各种插件啥的我都装好了,快捷键什么的都调的很舒服。开发者工具就拿来做调试吧。

顺便提一下,因为开发者工具里用的是 chrome 做调试工具,如果后端使用的是 nodejs,可以使用 node –inspect,配合调试。

然后,讲真,开发真的没什么可说的,官方的开发文档很详细,API 都很丰富,做一个电影列表没什么难度。

后端方面简单说一下,因为豆瓣的 API 有请求数限制,所以我冒昧的使用了自己的 VPS 做中转,做数据缓存。

另外,实现登录功能和登录态储存,使用的是 wafer-node-sdk,这个需要仔细看官方的说明。

发布

  1. 开发者工具点击上传
  2. 微信公众平台提交审核
  3. 等个一两天就能审核完成

注意,有些功能在个人认真的小程序是不能被审核通过的,比如我这里边的评论,我是通过先关闭评论功能,通过审核后再远程打开的😎,机智如我。

后话

本来还打算写点什么的,后来发现,没啥可写,终究是肚子里墨水不够,技术积累还不行,得加油啊。

本文章发表于底噪博客 https://zhih.me , 转载请注明