首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序电影实战

微信小程序电影实战

作者头像
达达前端
发布于 2019-08-14 07:05:36
发布于 2019-08-14 07:05:36
1.8K00
代码可运行
举报
文章被收录于专栏:达达前端达达前端
运行总次数:0
代码可运行

查询影院热映,推荐电影,查询电影和查看电影详情功能 涉及内容: 网络通信,豆瓣电影接口,模板,网页引用,js封装引用,wxss引用,text,image,swiper,loading,modal,input,button,tabBar

image.png

image.png

image.png

image.png

swiper 滑块视图容器

indicator-dots 是否显示面板指示点

autoplay 是否自动切换

current 当前所在页面的index

interval 自动切换时间间隔

duration 滑动动画时长

bindchange current改变时会触发change事件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}">
  <swiper-item>
   <image src="{{item}}" class="slide-image" style="width: 100%"/>
  </swiper-item>
 </block>
</swiper>
</view>

image.png

image.png

请求名 请求地址 豆瓣电影最近热映 https://douban.uieee.com/v2/movie/in_theaters?start=0&count=10 豆瓣电影即将上映 https://douban.uieee.com/v2/movie/coming_soon 豆瓣电影top250 https://douban.uieee.com/v2/movie/top250?start=0&count=10 豆瓣电影搜索 https://douban.uieee.com/v2/movie/search?q=神秘巨星&start=0&count=10 豆瓣电影详情 https://douban.uieee.com/v2/movie/subject/26942674 豆瓣电影口碑榜 https://douban.uieee.com/v2/movie/weekly 豆瓣北美票房榜 https://douban.uieee.com/v2/movie/us_box 豆瓣电影新片榜 https://douban.uieee.com/v2/movie/new_movies 豆瓣电影剧照 https://douban.uieee.com/v2/movie/subject/26942674/photos 豆瓣电影短影评 https://douban.uieee.com/v2/movie/subject/26942674/comments 豆瓣电影长影评 https://douban.uieee.com/v2/movie/subject/26942674/reviews 豆瓣电影影人信息 https://douban.uieee.com/v2/movie/celebrity/1044707 豆瓣电影影人剧照 https://douban.uieee.com/v2/movie/celebrity/1044707/photos 豆瓣电影影人作品 https://douban.uieee.com/v2/movie/celebrity/1044707/works 豆瓣音乐 https://douban.uieee.com/v2/music/search?q=当年情&start=0 豆瓣音乐信息 https://douban.uieee.com/v2/music/3147318 豆瓣图书 https://douban.uieee.com/v2/book/search?q=我是传奇 豆瓣图书信息 https://douban.uieee.com/v2/book/3021566

获取正在热映的电影:https://douban.uieee.com/v2/movie/in_theaters 访问参数: start : 数据的开始项

count:单页条数

city:城市

获取电影Top250:https://douban.uieee.com/v2/movie/top250 访问参数: start : 数据的开始项

count:单页条数

获取即将上映电影:https://douban.uieee.com/v2/movie/coming_soon 访问参数: start : 数据的开始项

count:单页条数

电影搜索:https://douban.uieee.com/v2/movie/search 访问参数: start : 数据的开始项

count:单页条数

q:要搜索的电影关键字

tag:要搜索的电影的标签

电影详情:https://douban.uieee.com/v2/movie/subject/:id 访问参数:电影id 如:电影《小飞象》的电影id为:25924056,搜索此电影的详细信息: https://api.douban.com/v2/movie/subject/25924056 豆瓣音乐 搜索 https://douban.uieee.com/v2/music/search?q=欧美&count=15? 详情 https://douban.uieee.com/v2/music/:id 豆瓣图书 搜索,例如: https://douban.uieee.com/v2/book/search?q=虚构类&count=8 https://douban.uieee.com/v2/book/search?q=非虚构类&count=8 https://douban.uieee.com/v2/book/search?q=旅行&count=8

豆瓣接口

https://douban.uieee.com/v2/movie/top250 https://douban.uieee.com/v2/movie/in_theaters //正在热映 https://douban.uieee.com/v2/movie/coming_soon //即将上映 https://douban.uieee.com/v2/movie/us_box //北美票房 https://douban.uieee.com/v2/movie/new_movies //新片榜 https://douban.uieee.com/v2/movie/weekly //本周口碑榜 复制 //搜索

1.小程序注册 2.安装开发者工具 3.获取appID 4.vscode插件安装

minapp 小程序助手 vscode weapp api vscode wxml vscode-wechat WeApp Snippets

wxml语句

数据绑定

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// index.wxml
<view>
 <text>{{msg}}</text>
</view>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
 data: {
  msg: 'hello'
 }
})

属性绑定

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view class="container" data-name="{{name}}">
 <text>{{msg}}</text>
</view>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// index.js
Page({
 data: {
  msg: "hello",
  name: "dashu"
 }
})

条件渲染

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view hidden="{{falg: true:false}}'>
 hidden
</view>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// index.js
Page({
 data: {
  flag: true
 }
})

使用wx:for-item可以自定义数组当前元素的变量名 使用wx:for-index可以自定义数组当前下标的变量名

block wx:for渲染数组

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view wx:for="{{array}}">
 {{index}}{{item.name}}
</view>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
 data: {
 array: [{
  name: '',
 },{
  name: ''
 }]
 }
})
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view wx:for="{{array}}" wx:for-item="myItem" wx:for-index="ind">
 {{ind}}{{myItem.name}}
</view>

block wx:for

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<block wx:for="{{[1,2,3]}}">
 <view>{{index}}:</view>
 <view>{{item}}</view>
</block>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view wx:for="{{array}}" wx:for-item="item" wx:key="index">
 {{index}}{{item.name}}
</view>

wx:if

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view wx:if="{{data==1}}">
1
</view>
<view wx:elif ="{{data==2}}">
2
</view>
<view wx:else>
3
</view>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
    data:{
        data: Math.floor(Math.random()*3+1)
    }
 })

实现图片切换

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<image bindtap = "click" wx:if="{{show}}" src="/.png"/>
<image bindtap = "click" wx:else src="/.png"/>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//js
Page({
  data: {
    show:false
  },
  click(){
    if(this.data.show){
      this.setData({
        show:false
      })
    }else{
      this.setData({
        show:true
      })
    }
  }
})
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<image bindtap = "click"  src="{{show? '/.png' : '/.png' }}"/>

模板引用 template import只引入template模板

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//定义模板
<template name="w">
  <view>
    <view>你好:{{name}}</view>
    <view>你好: {{name}}</view>
  </view>
</template>

//is使用模板
<template is="w" data ="{{...item}}">
</template>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

WXML 提供两种文件引用方式import和include。

image.png

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.08.13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序实战–集阅读与电影于一体的小程序项目(五)
21.电影页面数据绑定 movies.js var app = getApp(); Page({ data: { inTheaters: {}, comingSoon: {}, top250: {}, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var baseUrl = app.globalData.g_baseUrl; var inTheatersUrl = base
zhang_derek
2018/08/30
7310
微信小程序实战–集阅读与电影于一体的小程序项目(五)
豆瓣电影api系列
豆瓣电影api 1、获取正在热映的电影: 接口:https://api.douban.com/v2/movie/in_theaters?apikey=0b2bdeda43b5688921839c8ec
江一铭
2022/06/16
3.4K0
第四个页面:制作电影资讯页面
之前的文章列表页面还有一个小功能没有实现,就是点击点击轮播图就能跳转到相应的文章详情页面,这个和点击文章列表跳转到文章详情页面的实现方式是一样的。
端碗吹水
2020/09/23
1.6K0
第四个页面:制作电影资讯页面
微信小程序HTTP封装请求
http.js import utils from "../../utils/utils" var http = utils.http; const douban = "https://douban.
达达前端
2019/08/25
1.1K0
微信小程序实战–集阅读与电影于一体的小程序项目(七)
27.实现上滑加载更多数据 movie-grid-template.wxml <import src="../movie/movie-template.wxml" /> <template name="movieGridTemplate"> <scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower"> <block wx:for="{{movies}}
zhang_derek
2018/08/30
7090
微信小程序实战–集阅读与电影于一体的小程序项目(七)
微信小程序实战–集阅读与电影于一体的小程序项目(六)
24.更多电影 app.json "pages": [ "pages/posts/post", "pages/welcome/welcome", "pages/posts/post-detail/post-detail", "pages/movies/movies", "pages/movies/more-movie/more-movie" ], more-list-template.wxml <view class="more" catchtap='onMor
zhang_derek
2018/08/30
6910
微信小程序实战–集阅读与电影于一体的小程序项目(六)
小程序笔记篇
豆瓣top250的数据https://api.douban.com/v2/movie/top250
达达前端
2019/07/03
6730
小程序笔记篇
第五个页面:更多电影页面
我们需要实现两个功能,一是点击电影资讯页面上的 “更多” 时,跳转到更多电影页面中,二是跳转时要获取相应的电影类型。
端碗吹水
2020/09/23
9630
第五个页面:更多电影页面
最后一个页面:构建电影详情页面
我们想要有一个搜索电影的功能,需要在电影资讯页面顶部编写一个搜索框,当我们的鼠标焦点位于该搜索框时,就会显示出电影搜索页面,而点击搜索框的关闭图标时,需要隐藏电影搜索页面。所以这个电影搜索页面不是一个单独的页面文件,而是用隐/显的方式来做。
端碗吹水
2020/09/23
7460
最后一个页面:构建电影详情页面
微信小程序前端promise封装
config.js const config = { base_url_api : "https://douban.uieee.com/v2/movie/", } export {config} http.js import { config } from "../config"; class HTTP { requset({ url, method = "GET", data = {} }) { const promise = new Promise((resolve,
达达前端
2019/08/25
1.1K0
数据获取:​如何写一个基础爬虫
写好一个爬虫最基本的是做好页面分析,找到链接和规律,这样在写爬虫的时候就可以有方向和目的性。接下来,我们就以爬虫最常用的豆瓣评分TOP250的内容作为爬虫的demo,以此来学习使用相关知识。
马拉松程序员
2023/09/02
4010
数据获取:​如何写一个基础爬虫
微信小程序class封装http
config.js var config = { base_api_url:"https://douban.uieee.com/v2/" } export {config} utils/http.js import {config} from "../config"; class HTTP{ request(params) { if (!params.method) { params.method = "GET" } wx.request({ ur
达达前端
2019/08/25
6900
爬虫实战-豆瓣电影Top250
首先是对书上案例进行学习,了解如何定位网站中我们需要的信息,并使用re提供的正则表达式匹配我们的信息。然后为了加快爬虫速度,我们使用了多进程multiprocessing。最后进入实战,对真实的网站进行爬取。在实战中,我们遇到了一些新问题,需要处理网站的反爬虫机制。
一只大鸽子
2022/12/06
6800
爬虫实战-豆瓣电影Top250
豆瓣电影top250爬虫及可视化分析
  人类社会已经进入大数据时代,大数据深刻改变着我们的工作和生活。随着互联网、移动互联网、社交网络等的迅猛发展,各种数量庞大、种类繁多、随时随地产生和更新的大数据,蕴含着前所未有的社会价值和商业价值!!!
小孙同学
2022/01/17
6.8K0
豆瓣电影top250爬虫及可视化分析
微信小程序电影模板
Vant Weapp UI库使用Vant Weapp 地址: https://youzan.github.io/vant-weapp
达达前端
2019/08/08
4.9K0
微信小程序电影模板
不会 Python 没关系,手把手教你用 web scraper 抓取豆瓣电影 top 250 和 b 站排行榜
如果要抓取数据,一般使用Python是很方便的,不过如果你还不会推荐使用Chrome扩展 web scraper,下面就分别用Python和 web scraper 抓取豆瓣电影top 250 和b站排行榜的数据。
苏生不惑
2020/11/10
1.5K0
不会 Python 没关系,手把手教你用 web scraper 抓取豆瓣电影 top 250 和 b 站排行榜
微信小程序 开发笔记
参考:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
yiyun
2022/04/01
5560
微信小程序 开发笔记
Python 实战(5):拿来主义
有了列表,有了详细信息,有了搜索,这个电影网站已经有了基本的结构。现在要做的是:获取更多的内容。 我们没有必要也不可能自己去生产数量庞大的电影信息,互联网上的资源已足够满足我们的需求。(不过如果你要使用这些资源进行商业用途,请尊重内容来源方的版权。) 这个项目里,我将用豆瓣电影的 API 来获取内容。不要问我如何知道豆瓣有 API 可以做这样的事。我只是觉得它应该有,然后就去搜索引擎里搜索“豆瓣 api”,结果真的有。大概扫了下文档和示例,发现还挺好用的,于是就它了。 类似的情况还有之前的“查天气”系列课程
Crossin先生
2018/04/16
7640
Python 实战(5):拿来主义
微信开发--微信小程序(一)
微信小程序开发相对于微信公众号的开发显得更为重要,下面就来简单介绍一下微信小程序的开发.
生南星
2019/07/22
18.2K0
微信开发--微信小程序(一)
实验八 网络信息提取程序设计
获取网络数据的方式很多,常见的是先抓取网页数据(这些数据是html或其它格式的网页源代码),再进行网页数据解析,而有的网站则直接提供了数据文件供下载,还有的网站提供了Web API供用户使用。后两种方式一般能获得直接的数据,不需要再进行解析。
背雷管的小青年
2020/06/08
2.6K0
相关推荐
微信小程序实战–集阅读与电影于一体的小程序项目(五)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档