Taro+node爬虫做一个微信小程序《追剧小管家》

技术栈

前端：taro + mobx

后端：koa2 + sequelize

界面效果

后端数据获取

这块主要是找一个电影网站，然后爬虫直接获取就好了 爬虫这块推荐一篇不错的文章爬虫，其实本就是这么简单

本项目爬虫核心代码如下

;(async () => {
  console.log(`------------[movie crawler run]------------`)
  for(let pageIndex = maxPage; pageIndex > 0; pageIndex--) {
    let result = []
    await rp({
      uri: `${apiBase}/movies?pageIndex=${pageIndex}`,
      json: true
    }).then(data => {
      result = data
    })
    .catch(err => {
      console.log('getlist error')
    })
    for (let i = 0; i < result.length; i++) {
      await rp({
        uri: `${apiBase}/movie?id=${result[i].ID}`,
        json: true
      }).then(data => {
        result[i].MoviePlayUrls = JSON.stringify(data.MoviePlayUrls)
        result[i].Introduction = data.Introduction
      })
      .catch(err => {
        console.log('getdetail error')
      })
    }
    process.send({ pageIndex, result })
  }
  process.exit(0)
})()

前端

参考taro的文档做起来也还是很方便的，主要就实现了，电影列表，电影详情，电影搜索，以及用户授权这几个功能

MovieItem.js

import Taro, { Component } from '@tarojs/taro'
import { observer, inject } from '@tarojs/mobx'
import { View, Image, Text } from '@tarojs/components'
import './Movieitem.scss'

@inject('commonStore')
@observer
export default class Movieitem extends Component {

  constructor (props) {
    super(props)
  }

  seeDetail (data) {
    const { commonStore } = this.props
    if (commonStore.userInfo.openid) {
      Taro.navigateTo({
        url: `/pages/detail/index?id=${data.skyID}`
      })
    } else {
      Taro.navigateTo({
        url: `/pages/login/index`
      })
    }
  }

  render () {
    const data= this.props.data || {}
    let $movieTitle = null
    if (data.MovieTitle) {
      $movieTitle = <View className='movie-title'>{data.MovieTitle.substring(0, 6)}</View>
    }
    return (
      <View className='movie-item' onClick={() => this.seeDetail(data)}>
        {$movieTitle}
        <Image
          className='cover'
          mode='aspectFill'
          src={data.Cover}
        ></Image>
        <Text className='name'>{ data.Name }</Text>
      </View>
    )
  }
}

login.js

import Taro, { Component } from '@tarojs/taro'
import { observer, inject } from '@tarojs/mobx'
import { Button, View } from '@tarojs/components'
import './index.scss'

@inject('commonStore')
@observer
export default class Login extends Component {
  config = {
    navigationBarTitleText: '微信授权'
  }

  onGetUserInfo (res) {
    console.log('onGetUserInfo=>', res)
    const { commonStore } = this.props
    const { userInfo } = res.detail
    if (userInfo) {
      commonStore.register(userInfo).then(res1 => {
        if (res1.status === 1) {
          commonStore.setUserInfo(res1.data)
          Taro.showModal({
            title: '提示',
            content: '授权成功',
            showCancel: false,
            confirmColor: '#EE7600',
            confirmText: '确定'
          }).then(() => {
            Taro.navigateBack()
          })
        }
      })
    } else {
      Taro.showToast({
        title: `授权失败`,
        icon: 'none',
        duration: 3000
      })
    }
  }

  render () {
    return (
      <View className='login'>
        <View className='tip'>为了保证功能正常使用，请先授权</View>
        <Button
          open-type='getUserInfo'
          onGetUserInfo={res => this.onGetUserInfo(res)}
          className='button'
        >微信授权</Button>
      </View>
    )
  }
}

具体的代码，我会在周末抽时间整理出来发到git上，有啥问题可以先留言