一个简单的仿豆瓣电影的微信小程序,给大家分享一下教程。

近不想写论文,想捣鼓点新东西吧,边看官方文档,花了3天时间写了一个简单的仿豆瓣电影的微信小程序,给大家分享一下教程吧。

源码&效果图

源码点击这里,欢迎star

运行方法:

下载微信web开发者工具新建项目,项目目录为代码存放目录点击开发者工具中的编译即可在模拟器里看到

效果图如下

微信小程序实例–仿豆瓣电影插图
微信小程序实例–仿豆瓣电影插图1
微信小程序实例–仿豆瓣电影插图2
微信小程序实例–仿豆瓣电影插图3

开发环境与项目简介

微信提供了一个微信开发者工具,可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。下载地址下载后,打开该工具,选择代码目录和申请的AppID,勾选quickStart选项,这样会创建几个基础页面。

微信小程序实例–仿豆瓣电影插图4

正好在写代码的第二天,微信开发者工具全新改版,比原来好多了,原来的console调试界面与编辑代码不在同一个页面,十分麻烦,现在像平时前端调试一样,调试界面与代码编辑页面在同一个界面,方便多了。

微信小程序实例–仿豆瓣电影插图5

项目代码结构

微信小程序实例–仿豆瓣电影插图6

这里说一下,在新建目录后,可以选择添加page,js,wxml,wxss,json文件,如果直接添加page文件的话,会直接在该目录下生成与目录相同名字的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

豆瓣电影API

【获取正在上映电影】https://api.douban.com/v2/movie/in_theaters【获取豆瓣TOP250电影】https://api.douban.com/v2/movie/top250【 获取即将上映电影】https://api.douban.com/v2/movie/coming_soon【获取具体某一电影信息】https://api.douban.com/v2/movie/subject/:id详细数据情况可看https://developers.douban.com/wiki/?title=movie_v2

其实前三个API返回的数据都是一致的,只是返回的电影类型数据不一样而已,所以在list页面,我们只要传入不同的类型即可。在电影列表页和首页,都有展示电影的基础信息(海报,名字,评分),所以可以把这个部分拿出来做一个模板公用。大体的思路是这样,比较简单。

配置小程序窗口和导航栏

在根目录下的app.json文件中配置小程序的窗口样式和导航栏

微信小程序实例–仿豆瓣电影插图7

属性信息如图,来自官网

微信小程序实例–仿豆瓣电影插图8微信小程序实例–仿豆瓣电影插图9

点击上方的编译,可以看到效果

微信小程序实例–仿豆瓣电影插图10

我们在调试具体某一个页面的时候,可以添加面板上方中间的添加编译模式,填写相关参数,这样不用从首页进去调试了。

微信小程序实例–仿豆瓣电影插图11

具体代码编写

这里只讲一下首页代码的情况,其他页面用到的属性基本雷同。这里不介绍小程序的使用语法,请先在官网上浏览个大概

wx.showLoading()

在开始进入页面时,还没加载完数据时,我们想要有一个loading效果,可直接使用小程序的apiwx.showLoading(OBJECT)显示 loading 提示框, 需主动调用 wx.hideLoading 才能关闭提示框

onLoad:function(){wx.showLoading({title:全力加载中…,})}

加载完,需要关闭时,只需要调用即可wx.hideLoading();onLoad 表示监听页面加载

wx.request()

请求数据调用wx.request();详细属性介绍点击这里

因为请求电影列表在list和index页面都需要用到,所以我在app.js作为一个全局的方法来写

getFilminfo:function(pageType,start,count,cb){//电影列表类型,开始数据下标,请求总数,callback函数varthat=this;wx.request({url:that.globalData.basicUrl+“/”+pageType+?start=+start+&count=+count,// url:url,header:{“Content-Type”:“json”,},success:function(res){cb(res);}})},globalData:{userInfo:null,basicUrl:“https://api.douban.com/v2/movie”,pageTypelist:{“coming_soon”:“即将上映”,“in_theaters”:“正在热映”,“top250”:“TOP250电影”}}

然而,在调用接口的时候发现了这样的错误

微信小程序实例–仿豆瓣电影插图12

原因是我在开发配置里,没有豆瓣api的域名添加到request合法域名里,所以只要在配置里加上需要的即可

微信小程序实例–仿豆瓣电影插图13微信小程序实例–仿豆瓣电影插图14

所以在index.js中,调用这个全局方法如下:

//获取应用实例varapp=getApp()
Page({data:{motto:Hello World,userInfo:{},films:[{},{},{}]},onLoad:function(){wx.showLoading({title:全力加载中…,})console.log(onLoad)varthat=this;vartypelist=[“in_theaters”,“coming_soon”,“top250”];vartitlelist=[“正在热映”,“即将上映”,“TOP250电影”];for(leti=0;i<typelist.length;i++){vartype=typelist[i];app.getFilminfo(type,0,8,function(res){wx.hideLoading();vardata=res.data;data.subjects.map(function(item){if(item.title.length>8){item.title=item.title.slice(0,7)+“…”;}if(item.rating.average>=9.5){item.rating.star=“star10”;}else{item.rating.star=“star”+Math.round(item.rating.average);}console.log(item.rating.star);})that.data.films[i]={title:titlelist[i],data:data.subjects,type:typelist[i]};that.setData({films:that.data.films});console.log(that.data.films);})}}})

我们通过更多按钮跳转到对应的电影列表list页面,所以需要绑定事件

在index.wxml中,

更多>

bindtap是对应是事件名字,同时我们需要设置data-type属性,属性值即是电影列表类型在index.js中

toView:function(e){vartemp=e.currentTarget.dataset;//获取当前组件上由data-开头的自定义属性组成的集合wx.navigateTo({url:../list/list?type=+temp.type//temp.type即是当时data-type属性值})},

wx.navigateTo()是路由跳转的api

模板

因为电影的基础信息展示在多个页面中都有用到,我们单独提出来写个电影预览模板

<templatename=“movieThumb”><viewwx:key=“id”class=“film-item”datatitle=“{{title}}”dataid=“{{id}}”bindtap=“detail”><imagesrc=“{{images.medium}}”alt=“{{alt}}”class=“film-image”></image><textclass=“film-title”>{{title}}</text><viewclass=“film-rate”wx:if=“{{rating.average!=0}}”><viewclass=“film-star {{rating.star}}”></view><text>{{rating.average}}</text></view><textclass=“film-rate”wx:else>暂无评分</text></view></template>

模板名字设置为movieThumb

例如在首页中有用到该模块,那在index.wxml中如下调用即可

<importsrc=“../template/movieThumb.wxml”/><scrollviewscrollx=“true”class=“filmlist”><templateis=“movieThumb”wx:foritems=“{{filminfo.data}}”wx:foritem=“film”wx:key=“id”data=“{{…film}}”></template></scroll-view>

先写到这里吧,其他代码看github上的即可,具体还是要多看文档,写个项目练练,很容易上手啦!

原作者: syean 来自:syean个人博客原文链接:微信小程序实例–仿豆瓣电影

作者 nasiapp

在线客服
官方客服
我们将24小时内回复。
12:01
您好,有任何疑问请与我们联系!

选择聊天工具: