豆瓣电影

豆瓣电影

要我用Markdown重新写,弄得我特地去学习了一下语法,瞎搞了几下,不管了

上一节写了一个首页列表的展示,现在我们需要一个效果:

点击每个列表项,能后看到更多的细节和大图。在本页面展示或者加个弹窗是基本不可能的了。下面我们就创建一个新的页面来展示更多细节(我们之前已经创建了2个页面,其中rank页面还是空的,这里故意先不写,后面自然会补在)

在pages下创建新的文件夹:detail,同时创建4个detail文件js,json,wxml,wxss

对于每一个页面都需要写到app.json的pages中,因此要将我们新增的"pages/detail/detail"添加到“pages”数组中去。如果新增的页面是底部tabBar栏中的一项,还需要添加到tabBar中的List数组,我们这里是列表点击时的新页面,所以不需要写到list中。

我们希望的效果大概是这样的:

现在有一个问题时:我如何在点击的时候获取到对应的每一项的数据,并且在新的页面展示出来呢?
这里要解决2个问题:

  • ###导航;
  • 参数的传递;

导航 :

实现导航的方法有2种,一种是直接利用navigator组件, 另一种是利用导航api,通过给列表添加点击事件,实现wx.navigateTo(保留当前页面,有左上角返回)或者wx.redirectTo(关闭当前页面,没有右上角返回按钮)。

为了方便我们这里直接采用组件来写

<block wx:for="{{moivelist}}">   //在这之后插入导航标签
    <navigator url="../detail/detail">
        //url对应文件的路径,不需要写后缀wxml
        xxxxx还是原来的配方xxxxxxxx
    </navigator>
</block>

然后我们就可以实现点击跳转的效果了,但是这时候detail.wxml还是空白的。

下面开始写detail.wxml

<view class="container">
    <image class="imgs" style="" mode="" src="{{item.images.large}}" binderror="" bindload=""></image>
    <text> {{item.title}} </text>
    <text> {{"评分"+item.original_title}} </text>
    <text> {{"导演"+item.directors[0].name}} </text>
    <text> {{"主演"+item.rating.average}} </text>
</view>
<view>
    {{item.summary}}
</view>

跟之前index一样,我们这里的数据也是从js拿过来,不过这里是从detail.js拿的,但是这个时候detail.js中的data是没有数据的,因为我们希望数据是从index列表的每一项点击时传过来的,而不是我们直接写到detail.js里面的,这个时候就需要用到生命周期函数的onload函数了

也就是说,每个页面在Onload时,都可以获取上一个页面传递给你的参数(假如有的话),那么现在要解决2个问题:1是上一个页面如何传给我,2是我如何接收数据。

  • 旧页面传递参数:
  • 我们刚才在index里面加了一个导航并且 url="../detail/detail" ,需要传递参数时,仅需要在url后面:+?+数据
  • 例如:url="../detail/detail?id=test"
  • 例如:https://i.cnblogs.com/EditPosts.aspx?opt=1
  • 可以发现格式其实就是get提交数据时的格式,写过html表单form的一定很熟悉了,需要提交多个参数时,需要在后面加 & 符号
  • 例如: url="../detail/detail?id=test1&name=test2&age=12345"
  • 新页面接受数据 (注意只有在Onload时才可以接受传过来的数据)

在新页面js中 onLoad: function(options) {console.log(options)} 即可打印出传过来的数据,你会发现这是一个对象,我们需要将这个对象,通过this.setData转化为新页面的数据,



//我们这里为什么要用item是因为我们上面的数据绑定用的是{{item.xxx}}, 需要对应好,如果一个发生变动,另一个也要跟着改变

//detai.js代码如下:

Page({
  data:{
    title:"加载中",
    item:{},
    loading:false
  },

    onLoad:function(options){
      this.setData({
        item:options
      })
    },

    onReady:function(){

     },

    onShow:function(){

    },

    onHide:function(){

    },

    onUnload:function(){

    }
})

detail.js就算写完了,CSS方面就不写了,比较无脑,没什么好讲的,简单设置一下样式不要太丑即可,整个detail的文件都搞定了。

目前我们前面的第二个导航rank还空着呢,从表象上看,rank的格式跟index是一样,仅仅是数据不同,那么我们只要把index的文件复制一份过来就可以了,把模拟的数据改一下即可。
虽然可以,但是代码很多重复,下面我们就引进一个新的东西叫模板 template 。

定义一个name为test的模板


<template name="test">

  <view>hhahahha我是模板{{item}}</view>

</template>

使用时,需要先引入所写的模板所在的位置

例子:

<template is="test" data={{item:"你好模板"}}></template>

因此,同样的我们再创建一个文件夹template放模板,同时创建.js和.wxml文件这2个即可。 template.js并不需要数据,只是用来注册一下页面(不注册控制台有报错提示你page.js xxx什么的),将其他页面的.js复制过来,并将data里面的数据和其他的事件都出掉,保留最基本的空数据和空函数。

template.wxml内容如下:

<template name="try" >
    <navigator url="../detail/detail?imgsrc={{item.imgsrc}}&title={{item.title}}&author={{item.author}}&introduce={{item.introduce}}&rank={{item.rank}}">

        <view class="moive-item">

            <image class="moive-img" style="" mode="" src="{{item.imgsrc}}" binderror="" bindload=""></image>

            <view class="moive-content">

                <view class="content-titile">
                    <text>{{item.title}}</text>
                </view>

                <view class="content-introduce">
                    <text>{{item.introduce}}</text>
                </view>

                <view class="content-author">
                    <text>{{item.author}}</text>
                </view>
            </view>

            <text class="content-rank">{{item.rank}}</text>
        </view>
    </navigator>
</template>

定义好模板好,将rank.wxml内容写为:

<view class="head-title" ">
    <text>电影top20</text>
</view>

<scroll-view class="main" scroll-y="true" bindscrolltoupper="" bindscrolltolower="" bindscroll="" scroll-into-view="" scroll-top="">
      <import src="../temple/temple.wxml"></import>
      //引入模板
     <block wx:for="{{moivelistB}}">
        <template is="try" data="{{item}}"></template>
         //使用模板,并通过wx:for将数据循环展示出来
     </block>
</scroll-view>

将index.wxss和index.js文件复制一份到rank.js,同时将rank.js中data的数据稍微修改一下,不要让数据都跟index的一样.同时将我们的index.wxml中列表也修改为使用上面的模板,至此就基本完成了。

回顾一下我们主要的知识点:导航写法,如何传递参数,声明周期函数,如何获取传递过来参数,如何定义和使用模板及使用参数。

到此我们使用的都是虚拟的数据,下一篇我们将调用豆瓣提供的接口来调用数据,模拟跟后台的交互。

demo2源文件见 https://github.com/linrunzheng/wx-samll-demo

时间: 2024-11-10 01:29:58

豆瓣电影的相关文章

微信小程序豆瓣电影项目的改造过程经验分享

在学习微信小程序开发过程中,一部分的难点是前端逻辑的处理,也就是对前端JS的代码编辑:一部分的难点是前端界面的设计展示:本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整,把其中遇到的相关难点和改进的地方进行讨论介绍,希望给大家提供一个参考的思路,本篇随笔是基于前人小程序的项目基础上进行的改进,因此在开篇之前首先对原作者的辛劳致敬及感谢. 1.豆瓣电影接口的小程序项目情况 豆瓣电影接口提供了很多相关的接口给我们使用,豆瓣电影接口的API地址如下所示:https://developers.d

用python+selenium抓取豆瓣电影中的正在热映前12部电影并按评分排序

抓取豆瓣电影(http://movie.douban.com/nowplaying/chengdu/)中的正在热映前12部电影,并按照评分排序,保存至txt文件 #coding=utf-8 from selenium import webdriver import unittest from time import sleep class DoubanMovie(unittest.TestCase):     def setUp(self):          self.dr = webdriv

小程序进价(2)豆瓣电影_JS逻辑篇

从上一篇小程序进阶(1)豆瓣电影_布局搭建中我们知道了 双大括号是{{}}用来JS和wxml绑定事件的,比如,数据更新,显示规则,等等的一些有规则有章法的操作. 那么我们就需要引用这种机制,为我们的image和text控件做数据更新的操作. 很好知道这点,后面的事情都交给JS去完成. 现在开始,分析步骤,(前面三步为一体,第四步则分出来讲.) 1. 首先要有一个函数用来向网络发送请求这一步看官方文档发送请求 2. 关注文档中的三个关键字,url.header.success, url,就不多说了

Node.js学习 爬虫下载豆瓣电影top250图片

利用node.js实现爬虫,并且爬取豆瓣电影top250的列表和图片. 1 什么是node.js 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎 2 什么是爬虫 (又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本. 3

从零开始写个一个豆瓣电影 (小程序教程1)

微信小程序内测至今也有20天左右,也有很多人作出了很多不错的DEMO并发布到github了.前几日看见了豆瓣电影这个demo,感觉很不错,也跟着做了一个,作为复习巩固文档API用. 废话不多说,直接进入正题: 第一节只写一个首页的展示,数据用的是自己写的虚拟的数据 新建一个demo,不要使用微信自带的DEMO,直接从零开始写起: 首先创建3个文件: app.json app.js apps.wxss app.json  : 主要写配置项:内容如下,具体的每个key值对应的意思,这里就不再细说了,

用三方做的豆瓣电影页面

代码如下: // // RootViewController.m // UI__本地数据豆瓣电影 // // Created by dllo on 16/3/16. // Copyright © 2016年 dllo. All rights reserved. // #import "RootViewController.h" #include "Movie.h" #import "Cinema.h" #import "MovieTab

练习:一只豆瓣电影TOP250的爬虫

练习:一只豆瓣电影TOP250爬虫 练习:一只豆瓣电影TOP250爬虫 ①创建project ②编辑items.py import scrapy class DoubanmovieItem(scrapy.Item): # define the fields for your item here like: # name = scrapy.Field() rank = scrapy.Field() title = scrapy.Field() link = scrapy.Field() rate

团队-爬取豆瓣电影TOP250-需求分析

需求:爬取豆瓣电影TOP250 *向用户展示电影的排名,分数,名字,简介,导演,演员,前10条影评信息,链接信息 实现思路: 分析豆瓣电影TOP250的url规则, 编写模块获取相关url 获取全部相关页面的html代码 分析html中有关"排名,分数,名字,简介,导演,演员,前10条影评信息,链接信息"的标签 结合第三方工具包实现信息的提取 编写将"搜集信息"展示出来的模块

团队-Python 爬取豆瓣电影top250-需求分析

需求:爬取豆瓣电影TOP250 *向用户展示电影的排名,分数,名字,简介,导演,演员,前10条影评信息,链接信息 实现思路: 分析豆瓣电影TOP250的url规则, 编写模块获取相关url 获取全部相关页面的html代码 分析html中有关"排名,分数,名字,简介,导演,演员,前10条影评信息,链接信息"的标签 结合第三方工具包实现信息的提取 编写将"搜集信息"展示出来的模块