小程序-豆瓣电影项目实战(新增WePY实现)

小程序-豆瓣电影项目实例，包含三个功能模块（首页列表、搜索列表、详情页） ，适合刚入门学习的同学

资料

1. 小程序官方文档
2. 微信web开发者工具下载地址
3. 微信小程序解决方案专辑
4. 豆瓣电影API

效果

豆瓣电影.gif

开始

这里先说明下，此案例使用的是体验模式，未使用AppID，这是因为我们的请求用的是第三方豆瓣API，配置安全域名的话也是没有权限访问，所以我就偷了个懒，直接使用自己写的一个node代理服务来请求资源。如果使用了AppID的话，那就配置一个自己能访问的域名信息。

打开微信web开发者工具，新建个小程序

新建项目.png

选择体验小程序，确定后小程序自动会帮助我们生成一个项目目录。下面是我的项目的整体结构

// 目录结构
.
├── common
│   ├── images
│   ├── filter.wxs // 自己封装的过滤器
│   └── head.wxml  // 头部模板
├── node-proxy     // node服务器
│   ├── index.js
│   ├── package.json
├── component      // 自定义公共组件
│   └── movies     // 电影列表组件目录
├── store
│   ├── index      // 首页：展示正在上映电影列表
│   ├── search     // 搜索页：展示搜索后电影列表
│   └── detail     // 电影详情
├── app.js         // 注册小程序
├── app.json       // 小程序全局配置文件
├── app.wxss       // 全局样式
└── project.config.json // 工具配置文件
.

node服务

在node-proxy目录下创建我们的服务，怎么搭建这里不做多介绍，不会的直接拷贝文件后运行命令npm install或者淘宝的镜像cnpm install即可

// node-proxy/package.json
{
  "name": "node-proxy",
  "version": "1.0.0",
  "description": "豆瓣电影服务器端",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.2",
    "superagent": "^3.8.2"
  }
}

// node-proxy/index.js
// 引入模块
const express = require('express'),
    request = require('superagent');

// 创建APP
const app = express();

// 豆瓣电影API
const host = 'https://api.douban.com/v2';

app.all('*', function (req, res, next) {
    if (!req.get('Origin')) return next();
    // use "*" here to accept any origin
    res.set('Access-Control-Allow-Origin', '*');
    res.set('Access-Control-Allow-Methods', 'GET');
    res.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
    if ('OPTIONS' == req.method) return res.send(200);
    next();
});

// 正在上映 API
app.get('/movie/in_theaters', function (req, res) {
    reqHttp(req, res);
});

// 搜索
app.get('/movie/search', function (req, res) {
    reqHttp(req, res);
})

// 详情
app.get('/movie/subject/:id', function (req, res) {
    reqHttp(req, res);
})

function reqHttp(req, res){
    let reqHttp = request.get(host + req.originalUrl);
    reqHttp.pipe(res);
    reqHttp.on('end', (err, res) => {
    });
}

// 监听
app.listen(5200);

然后我们通过node index.js 来启动服务

全局配置

我们有三个模块（首页、搜索、详情页），所以先配置好他们的路由

{
  "pages":[
    "pages/index/index",
    "pages/search/search",
    "pages/detail/detail"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序-豆瓣电影",
    "navigationBarTextStyle":"black"
  }
}

首页

首页有两大块：头部和电影列表
头部： 我们把头部设想为一个公共的模板页面来引入
电影列表： 因为首页和搜索页面都需要展示电影列表，那就让它们也共用吧，直接使用小程序的自定义组件来来实现此功能，关于自定义组件，请参考官方文档

// pages/index/index.wxml