微信小程序:电影日历,基于node

作者:funny 服务端依赖安装 假设你已经装好了node、npm,在该文件夹中执行下面的命令来安装…

作者:funny
服务端依赖安装

假设你已经装好了node、npm,在该文件夹中执行下面的命令来安装服务端依赖。

[AppleScript]
npm install node server.js

打开小程序开发工具

现在,本示例服务端已经跑在了你的 localhost:5000 端口上了,这就是你的小程序请求地址,注意在小程序开发工具的项目里开启“开发环境不校验请求域名以及TLS版本”。

用小程序开发工具打开movieCalendar项目,就可以看见效果啦。

项目简介:

电影日历。它很简单,只有一个启动页和一个日历页面。在日历页面会显示今天的日期,以及随机挑选的一部电影信息,包括名称、导演、上映时间、豆瓣评分和随机显示的一条热评。

过程和web开发类似,但得有app开发的思想
时刻注意this的指代,最好每次都用_this把它存起来
要清晰的理解小程序的生命周期来处理不同任务
将任务尽量拆分,保证代码可读性

微信小程序:电影日历,基于node

代码示例:

[AppleScript]
//index.js //获取应用实例 var app = getApp() Page({   data: {     "year":0,     "month":0,     "day":0,     "week":0,     "show_year":0,     "comment":'',     "directors":'',     "title":'',     "average":'',     "stars":'',     "loading_opacity": 1,     "animationData":''   },   //页面初次渲染完成   onReady: function (e) {     this.showDate();     var _this = this,todayDate = this.data.year+''+this.data.month+''+this.data.day;     wx.getStorage({       key: 'movie',       success: function(res) {         // console.log(res.data)         if(res.data.date==todayDate){           _this.setData(res.data.movieData);           _this.loading();         }else{           _this.loadMovie();         }       },       fail: function() {         _this.loadMovie();       }     })   },   // 页面初始化   onLoad:function(options){},   //显示日期,年月日   showDate:function(){     var today = new Date(),_this = this,year = today.getFullYear()+'',i = 0,chineseYear='',week = today.getDay();     //将年份转换为中文     do{       chineseYear = chineseYear+app.chineseDate.years[year.charAt(i)]       i++;     }while(i<year.length)     //设置数据     _this.setData({        "year":chineseYear,        "month":app.chineseDate.months[today.getMonth()],        "day":today.getDate(),        "week":app.chineseDate.years[week]       })   },   //加载top250电影信息   loadMovie: function(){     var _this = this,         //请求发送的数据,随机的起始值和条数(只需要一条)         reqData = {           start:Math.floor(Math.random()*250),           count:1         };     //发送请求,获取电影数据     wx.request({       url:"http://localhost:5000",       data:reqData,       header:{         'Content-Type':'application/json'       },       success:function(res){         var movieData = res.data.subjects[0];         // console.log(movieData);         //设置数据,评分是整数需要补上小数点和0         var now = new Date(),thisYear = now.getFullYear();         var average = movieData.rating.average%1 === 0?movieData.rating.average+'.0':movieData.rating.average;         var date = _this.data.year+''+_this.data.month+''+_this.data.day,             renderData = {               "show_year":thisYear-movieData.year,               "comment":movieData.comment,               "directors":movieData.directors,               "title":movieData.title,               "average":average,               "stars":_this.starCount(movieData.rating.stars),               "loading_opacity": 0             };         _this.setData(renderData);         _this.storeData(date,renderData);         _this.loading();       }     });   },   //计算行星显示规则   starCount:function(originStars){     //计算星星显示需要的数据,用数组stars存储五个值,分别对应每个位置的星星是全星、半星还是空星     var starNum = originStars/10,stars = [],i = 0;     do{       if(starNum>=1){         stars[i] = 'full';       }else if(starNum>=0.5){         stars[i] = 'half';       }else{         stars[i] = 'no';       }       starNum--;       i++;     }while(i<5)     return stars;   },   //加载动画   loading:function(){     var animation = wx.createAnimation({       duration: 1000,       timingFunction: "ease"     })     animation.opacity(1).step()     this.setData({       animationData:animation.export()     })   },   //将数据进行本地存储   storeData: function(date,movieData){     wx.setStorage({       key:"movie",       data:{         date:date,         movieData:movieData       }     })   } })

项目地址及下载:
https://github.com/leadream/funny/tree/master/calendar-movie
微信小程序:电影日历,基于node calendar-movie.zip (206.76 KB, 下载次数: 51)

小鱼源码网www.51xyyx.com

作者: zhenchao

为您推荐

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 2805477110@qq.com

工作时间:周一至周刘,9:00-17:30,节假日休息
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
切换注册

登录

忘记密码 ?

切换登录

注册