美文网首页
小程序入门学习06--data、url传参、调用豆瓣api

小程序入门学习06--data、url传参、调用豆瓣api

作者: 阿墨呦 | 来源:发表于2020-02-13 21:05 被阅读0次

    豆瓣不能用了,可以用这个

    data-

    自定义数据属性 设置

          <view class='container movie-card' bindtap='f1' data-user-name="bla">
    
     f1: function(event) {
     //在控制台查看被封装到事件对象中的属性
        console.log(event.currentTarget)
        wx.navigateTo({
          //到转到detail页且不关闭本页面
          url: '/pages/detail/detail',
        })
      }
    
    在这里插入图片描述

    视频中实例
    weekly.js

     f1: function(event) {
        //从事件对象event中获取dataset属性的movievId并赋值给movieId
        var movieId = event.currentTarget.dataset.movieId
        console.log(movieId);
        wx.navigateTo({
          //到转到detail页且不关闭本页面(?后传参)
          url: '/pages/detail/detail?id=' + movieId
        })
      }
    
    <view class=''>
    <!-- swiper幻灯片轮播  默认生成像素150px,image为240 -->
    <!-- indicator-dots='{{true}}'显示面板指示 -->
    <!-- current 幻灯片默认页面,默认为0 -->
      <swiper class='movie-swiper' indicator-dots='{{true}}'
      previous-margin='50rpx' next-margin='50rpx' current='{{currentIndex}}'>
        <swiper-item class='movie' wx:for="{{weeklyMovieList}}">
          <view class='container movie-card' bindtap='f1' data-movie-id="{{item.id}}">
            <image class='movie-image'src='{{item.imagePath}}'></image>
            <!-- index:item下标 -->
              <text>{{item.id}}</text>
              <text>第{{index+1}}周:{{item.name}}</text>
              <text>点评:{{item.comment}}</text>
              <text wx:if="{{item.isHighlyRecommended}}" 
              style="font-size:16px;color:red;">强烈推荐</text>
              <!-- bindtap会向上冒泡触发f1,所以此处用catchtap -->
              <text catchtap='f0' wx:if='{{index<(weeklyMovieList.length - 1)}}'class='return-button'>返回本周</text>
          </view>
        </swiper-item>
      </swiper>
    </view>
     
    

    获取url传来参数

    detail.js

      //获取本次被打开时传入的参数对象options
      onLoad: function(options) {
        console.log(options.id)
        this.setData({
          mid:options.id
        })
      }
    
    

    request发送请求

    //获取本次被打开时传入的参数对象options
      onLoad: function(options) {
        console.log(options.id)
        this.setData({
          mid:options.id
        })
         //要写在onLoad内部
        //异步调用发送请求 请求完立即返回(不管回调函数),调用其他方法
        wx.request({
          //请求目标
          url: "https://api.douban.com/a/b.jsp",
          //http方法
          method: "GET",
          //捎带的数据
          data: {
            x: 1, y: 2
          },
          //设置header字段(元数据)
          header: {
    
          },
          //成功收到response,success回调函数处理
          success: function (res) {
            console.log(res)
          },
          //失败才执行
          fail: function () {
    
          },
          //不论成功还是失败都执行
          complete: function () {
    
          }
        })
      }
    
    • request请求的url要在下图中配置


      在这里插入图片描述

    调用豆瓣api

    小程序请求豆瓣API报403的三种解决方法
    不知道怎么说,请看我完整的代码
    detail.js

    Page({
      data: {
    
      },
      //获取本次被打开时传入的参数对象options
      onLoad: function(options) {
        console.log(options.id)
        this.setData({
          mid:options.id
        })
    
        var that= this
    
        //异步调用发送请求 请求完立即返回(不管回调函数),调用其他方法
        wx.request({
          //请求目标
          url: "https://douban.uieee.com/v2/movie/subject/" + options.id,
          header: {
            "content-type": "json"
          },
          //成功收到response,success回调函数处理
          success: function (res) {
            console.log(res)
            //找到电影才返回movie
            if(res.statusCode==200){
              //引用外部对象使用setData方法
              that.setData({
                movie: res.data
              })
            }
          },
          //失败才执行
          fail: function () {
    
          },
          //不论成功还是失败都执行
          complete: function () {
    
          }
        })
      }
    })
    

    detail.wxml

    <view class='container'>
      <image class='detail-image' src='{{movie.images.small}}'></image>
      <text style='font-weight:bold; font-size:50px;'>{{movie.title}}</text>
      <text>想看: {{moview.wish_count}}</text>
      <text>看过: {{movie.collect_count}}</text>
      <text>评分: {{movie.rating.average}}</text>
      <text>简介: {{movie.summary}}</text>
    </view>
    

    detail.wxss

    .detail-image {
      width: 300rpx;
      height: 300rpx;
    }
    
    在这里插入图片描述

    相关文章

      网友评论

          本文标题:小程序入门学习06--data、url传参、调用豆瓣api

          本文链接:https://www.haomeiwen.com/subject/sltrfhtx.html