一个简单的微信小程序，模仿豆瓣电影。让我与您分享一个教程。

最近，我不想写论文，我只是想做些新东西。只需看一下官方文档，花3天时间编写一个模仿微电影的简单微信小程序即可。让我与您分享本教程。

源代码和效果图

单击此处获取源代码，欢迎加星标

如何运行：

效果图如下

开发环境和项目简介

提供了一个开发人员工具，该工具可以完成的API和页面的开发和调试，代码查看和编辑以及的预览和发布。下载链接

下载后，打开工具，选择代码目录和应用程序，然后检查选项，这将创建几个基本页面。

在编写代码的第二天，微信开发人员工具进行了新修订，比原始版本要好得多。原始的调试界面和编辑代码不在同一页面上，这很麻烦。现在，它就像通常的前端调试一样。调试界面与代码编辑页面位于同一界面，更加方便。

项目代码结构

在这里，创建新目录后，您可以选择添加页面，js，wxml，wxss，json文件。如果直接添加页面文件，将在目录中直接生成四个与目录名称相同的后缀文件。的组成，例如：.js，.wxml，.wxss，.json。后缀.js的文件是脚本文件，后缀.json的文件是配置文件，后缀.wxss的文件是样式表文件，后缀.wxml的文件是页面结构文件。

杜邦电影API

实际上，前三个API返回的数据是相同的，但是返回的电影类型数据是不同的，因此在列表页面中，我们只需要传递不同的类型。电影的基本信息（海报，名称，等级）显示在电影列表页面和主页上，因此该部分可以作为模板使用，以供公众使用。

总体思路是这样，相对简单。

配置小程序窗口和导航栏

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

属性信息如图所示，来自官方网站

点击顶部的“编译”以查看效果

在调试特定页面时，我们可以在面板顶部的中间添加“添加编译模式”，并填写相关参数，因此我们无需从主页进行调试。

特定代码的准备

这里仅讨论主页代码，其他页面上使用的属性基本相同。小程序的语法此处未介绍，请先浏览官方网站

wx。（）

在刚开始进入页面时，当尚未加载数据时，我们希望发挥作用，我们可以直接使用的API

wx。（）

显示提示框，您需要主动调用wx以关闭提示框

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

加载后，当您需要关闭时，只需调用wx。（）;

用于监视页面加载的方法

wx。（）

请求数据以调用wx。（）;

单击此处以获取详细的属性介绍

由于需要在列表和页面中同时使用所请求的电影列表，因此我将其作为全局方法写在app.js中

但是，在调用接口时发现了这样的错误

原因是在我的开发配置中，豆瓣api的域名未添加到合法域名中。

因此，只需在配置中添加所需的内容即可。

因此，在.js中，请按以下方式调用此全局方法：

//获取应用实例 var app = getApp()

Page({ data: { motto: 'Hello World', userInfo: {}, films:[{},{},{}] }, onLoad: function () { wx.showLoading({ title: '全力加载中...', }) console.log('onLoad') var that = this; var typelist = ["in_theaters","coming_soon","top250"]; var titlelist = ["正在热映","即将上映", "TOP250电影"]; for(let i = 0;i<typelist.length;i++){ var type = typelist[i]; app.getFilminfo(type, 0, 8, function (res) { wx.hideLoading(); var data = 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); }) } } })

我们使用“更多”按钮跳转到相应的电影列表列表页面，因此我们需要绑定事件

在.wxml中，

更多>

它对应于事件的名称微信小程序商城开发界面豆瓣，我们需要设置data-type属性。属性值为电影列表类型

在.js

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

wx。（）是用于路由跳转的api

模板

由于电影的基本信息会显示在多个页面上，因此我们建议单独编写电影预览模板

<template name="movieThumb"> <view wx:key="id" class="film-item" data-title="{{title}}" data-id="{{id}}" bindtap="detail"> <image src="{{images.medium}}" alt="{{alt}}" class="film-image"></image> <text class="film-title">{{title}}</text> <view class="film-rate" wx:if="{{rating.average!=0}}"> <view class="film-star {{rating.star}}"></view> <text>{{rating.average}}</text> </view> <text class="film-rate" wx:else>暂无评分</text> </view> </template>

模板名称设置为“”

例如，如果该模块在主页上有用，则可以在.wxml中按以下方式调用它

<import src="../template/movieThumb.wxml" /> <scroll-view scroll-x="true" class="filmlist"> <template is="movieThumb" wx:for-items="{{filminfo.data}}" wx:for-item="film" wx:key="id" data="{{...film}}"> </template> </scroll-view>

首先在这里书写，您可以只看其他代码，仍然需要阅读更多文档，编写一个项目进行练习，很容易上手！