微信小程序电影实战

达达前端

发布于 2019-08-14 15:05:36

1.6K0

发布于 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事件

<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 : 数据的开始项

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语句

数据绑定

// index.wxml
<view>
 <text>{{msg}}</text>
</view>

Page({
 data: {
  msg: 'hello'
 }
})

属性绑定

<view class="container" data-name="{{name}}">
 <text>{{msg}}</text>
</view>

// index.js
Page({
 data: {
  msg: "hello",
  name: "dashu"
 }
})

条件渲染

<view hidden="{{falg: true:false}}'>
 hidden
</view>

// index.js
Page({
 data: {
  flag: true
 }
})

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

block wx:for渲染数组

<view wx:for="{{array}}">
 {{index}}{{item.name}}
</view>

Page({
 data: {
 array: [{
  name: '',
 },{
  name: ''
 }]
 }
})

<view wx:for="{{array}}" wx:for-item="myItem" wx:for-index="ind">
 {{ind}}{{myItem.name}}
</view>

block wx:for

<block wx:for="{{[1,2,3]}}">
 <view>{{index}}:</view>
 <view>{{item}}</view>
</block>

<view wx:for="{{array}}" wx:for-item="item" wx:key="index">
 {{index}}{{item.name}}
</view>

wx:if

<view wx:if="{{data==1}}">
1
</view>
<view wx:elif ="{{data==2}}">
2
</view>
<view wx:else>
3
</view>

Page({
    data:{
        data: Math.floor(Math.random()*3+1)
    }
 })

实现图片切换

<image bindtap = "click" wx:if="{{show}}" src="/.png"/>
<image bindtap = "click" wx:else src="/.png"/>

//js
Page({
  data: {
    show:false
  },
  click(){
    if(this.data.show){
      this.setData({
        show:false
      })
    }else{
      this.setData({
        show:true
      })
    }
  }
})

<image bindtap = "click"  src="{{show? '/.png' : '/.png' }}"/>

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

//定义模板
<template name="w">
  <view>
    <view>你好：{{name}}</view>
    <view>你好: {{name}}</view>
  </view>
</template>

//is使用模板
<template is="w" data ="{{...item}}">
</template>

<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。