猫眼电影(微信小程序)的制作
工具
微信开发者工具
app.json里面是配置文件
{ "pages": [ "pages/movie/movie", "pages/profile/profile", "pages/comment/comment" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#E54847", "navigationBarTitleText": "最新电影", "navigationBarTextStyle": "white" }, "tabBar": { "color": "black", "selectedColor": "#E54847", "list": [ { "pagePath": "pages/movie/movie", "text": "电影", "iconPath": "images/movie.png", "selectedIconPath": "images/movie-actived.png" }, { "pagePath": "pages/profile/profile", "text": "我的", "iconPath": "images/user.png", "selectedIconPath": "images/user-actived.png" } ] }, "sitemapLocation": "sitemap.json"}
cloudfunctions里面是构建的云函数,里面的云函数文件夹每改动一次就要上传并部署
函数的入口文件:
// 云函数入口文件const cloud = require('wx-server-sdk');cloud.init()var rp = require('request-promise');// 云函数入口函数exports.main = async (event, context) => { return rp(`http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${event.start}&count=${event.count}`) .then(function (res) { // console.log(res); return res; }) .catch(function (err) { console.error(err); }); }
在miniprogram文件夹里面:
// pages/movie/movie.jsPage({ /** * 页面的初始数据 */ data: { movieList:[] }, getMovieList:function(){ wx.showLoading({ title: '加载中', }) wx.cloud.callFunction({ name: 'movieList', data: { start: this.data.movieList.length, count: 10 } }).then(res => { // console.log(res); this.setData({ movieList: this.data.movieList.concat(JSON.parse(res.result).subjects) }); wx.hideLoading(); }).catch(err => { console.error(err); wx.hideLoading(); }) }, gotoComment:function(event){ wx.navigateTo({ url: `../comment/comment?movieid=${event.target.dataset.movieid}`, }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getMovieList(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { this.getMovieList(); }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }})
项目源码
https://gitee.com/duladula/cats_eye_movie_program.git
我在这个账号里也有上传