前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序电影实战

微信小程序电影实战

作者头像
达达前端
发布2019-08-14 15:05:36
1.7K0
发布2019-08-14 15:05:36
举报
文章被收录于专栏:达达前端

查询影院热映,推荐电影,查询电影和查看电影详情功能 涉及内容: 网络通信,豆瓣电影接口,模板,网页引用,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
复制
<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
复制
// index.wxml
<view>
 <text>{{msg}}</text>
</view>
代码语言:javascript
复制
Page({
 data: {
  msg: 'hello'
 }
})

属性绑定

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

条件渲染

代码语言:javascript
复制
<view hidden="{{falg: true:false}}'>
 hidden
</view>
代码语言:javascript
复制
// index.js
Page({
 data: {
  flag: true
 }
})

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

block wx:for渲染数组

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

block wx:for

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

wx:if

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

实现图片切换

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

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

代码语言:javascript
复制
//定义模板
<template name="w">
  <view>
    <view>你好:{{name}}</view>
    <view>你好: {{name}}</view>
  </view>
</template>

//is使用模板
<template is="w" data ="{{...item}}">
</template>
代码语言:javascript
复制
<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 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • wxml语句
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档