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

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

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;
}

在这里插入图片描述