一個豆瓣電影小程序

前言

這個小程序很簡單：只包括如下功能，無廣告、非盈利；只是一些信息的展現及電影排行榜、評分等

• 數據來源豆瓣電影api，相關接口網上一堆，這個能夠在微信小程序上面使用（記得設置合法域名）；
• 使用到的接口有：'院線熱映'，'即將上映'，'Top250'，'電影詳情'；
• 因爲搜索接口不可用，這裏的搜索數據是在Top250中匹配的。。。

侵刪，請跟我說一下。。。

PS: 可能過段時間會把 網頁版、App版（Flutter）搞一下

更新： 2019.10.30，網頁版 (React+Typescript) ，源碼， 預覽

能夠在線體驗（已發佈）:

源碼戳👇這裏

項目結構：

.
├── _readme
│   ├── ...
├── api
│   ├── config.js
│   ├── index.js
│   └── movie.js
├── assets
│   ├── iconfont
│   └── images
├── components
│   ├── icon-button
│   ├── loading
│   ├── search
│   └── star
├── pages
│   ├── index
│   ├── movie-detail
│   └── search-list
├── utils
│   └── util.js
├── README.md
├── app.js
├── app.json
├── app.wxss
├── project.config.json
└── sitemap.json
複製代碼

一些頁面截圖：

API管理

api封裝處理

就是使用 Promise 包裝一下

// api/config.js
module.exports = {
  baseUrl: "https://douban-api.uieee.com"
}


// api/index.js
const ApiConfig = require('./config');

/** * ### 基於wx.request的api封裝 * @HttpUtil HttpUtil(url, options); * @param url {*} 請求地址 * @param options.method {*} 請求方式 * @param options.header {*} 請求頭 * @param options.data {*} 請求數據 */
module.exports = function HttpUtil(url = '', { method = 'GET', header = { 'content-type': 'json' }, data } = {}) {
  return new Promise((resolve, reject) => {
    wx.request({
      method: method,
      header: header,
      url: ApiConfig.baseUrl + url,
      data: data,
      success(res) {
        if (res.statusCode == 200) resolve(res.data);
        else reject(res.statusCode);
      },
      fail(err){
        reject(err);
      }
    });
  });
}
複製代碼

api 使用

模塊：

// api/movie.js
const HttpUtil = require('./index.js');

export function getMovieLine(params=null) {
  return HttpUtil('/v2/movie/in_theaters', {
    data: params
  });
}

export function getMovieComing(params=null) {
  return HttpUtil('/v2/movie/coming_soon', {
    data: params
  });
}

export function getMovieTop250(params=null) {
  return HttpUtil('/v2/movie/top250', {
    data: params
  });
}

export function getMovieDetail({ id }) {
  return HttpUtil('/v2/movie/subject/'+id);
}

// 這個接口掛了。。。
export function searchMovie(params=null) {
  return HttpUtil('/v2/search', {
    data: params
  });
}
複製代碼

組件使用：

// pages/movie-detail/movie-detail.js
const Api = require('../../api/movie.js');

Api.getMovieDetail({
  id: '1'
}).then(res => {
  // ...
}).catch(err => {
  // ...
});
複製代碼

數據監聽

observers，官方文檔

// components/search/search.js
// loading
Component({
  properties: {
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      data: ''
    }
  },
  data: {
    inputValue: '',
    inputTimer: null,
    showClearIcon: false
  },
  ready() {},
  observers: {
    'value': function(value) {
      this.setData({
        inputValue: value
      })
    },
    'inputValue': function(inputValue) {
      this.setData({ showClearIcon: inputValue !== '' });
    }
  },
  methods: {
    input(e) {
      const input = e.detail.value;
      if (this.data.inputTimer) clearTimeout(this.data.inputTimer);
      const timer = setTimeout(() => {
        this.triggerEvent('change', input)
      }, 500);
      this.setData({
        inputValue: input,
        inputTimer: timer
      });
    },
    confirm(e) {
      const input = e.detail.value;
      this.triggerEvent('confirm', input);
    },
    clear() {
      this.setData({
        inputValue: ''
      })
    }
  }
});
複製代碼

版本更新

// app.js
const Api = require('./api/movie.js');

App({
  onLaunch() {
    if (wx.canIUse("getUpdateManager")) {
      this.checkUpdate();
    } else {
      wx.showModal({
        title: "提示",
        content: "當前微信版本太低，沒法使用版本更新！"
      });
    }
  },
  // 檢查新版本
  checkUpdate() {
    const updateManager = wx.getUpdateManager()

    updateManager.onCheckForUpdate(function (res) {
      // 請求完新版本信息的回調
      console.log(res.hasUpdate)
    })

    updateManager.onUpdateReady(function () {
      wx.showModal({
        title: '更新提示',
        content: '新版本已經準備好，是否重啓應用？',
        success: function (res) {
          if (res.confirm) {
            // 新的版本已經下載好，調用 applyUpdate 應用新版本並重啓
            updateManager.applyUpdate();
          }
        }
      })
    })

    updateManager.onUpdateFailed(function () {
      // 新版本下載失敗
      wx.showModal({
        title: "提示",
        content: "版本更新失敗，請清除緩存後再試！"
      });
    })
  },
  // ...
})
複製代碼

分享

能夠手動觸發(使用button open-type)，也能夠默認觸發（點擊右上角三個點）

// pages/movie-detail/movie-detail.js

Page({
  // ...
  onShareAppMessage() {
    return {
      title: `${this.data.movieInfo.title}|介紹、評分`,
      imageUrl: this.data.movieInfo.images.medium,
      path:`pages/movie-detail/movie-detail?id=${this.data.id}`
    };
  }
})
複製代碼

說明

• 忽略的文件(project.config.json)
  

  設置的文件/文件夾不會被上傳到微信服務器（使用開發者工具上傳代碼會有提示哪些文件不上傳），如 _readme 中存放一些 README.md 的引用文件

  // project.config.json
  "packOptions": {
  	"ignore": [
  		{
  			"type": "folder",
  			"value": "_readme"
  		}
  	]
  },
  複製代碼

最後

就這樣