2|weekly movie

小程序运行环境与基本架构

条件渲染

什么时候用hidden或者wx:if呢，就是用户不会频繁去切换的时候，比较固定的时候用wx:if，然后用户去频繁会切换的的时候用hidden

列表渲染

第一种重复的渲染生成组件也就是有多少条数据就要写多少个wxml中的那些组件们

/* pages/weekly/weekly.wxss */
.movie{
  display: flex;
}
.movie-details{
  display:flex;
  flex-direction: column;
  width: 550rpx;
}
.movie-image{
  width: 200rpx;
  height: 200rpx;
}

<!--pages/weekly/weekly.wxml-->
<view class="">
<text>本周推荐</text>
<view class="movie" wx:for="{{weekMovieList}}">
<image class="movie-image" src="{{item.imagePath}}"></image>
<view class="movie-details">
<text>第{{index+1}}周：{{item.name}}</text>
<text>点评：{{item.comment}}</text>
<text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px;color:red;">强烈推荐</text>
 </view>
</view>
</view>

// pages/weekly/weekly.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    weekMovieList:[
      {
        name:"泰塔尼克号",
        comment:"失去的才是永恒的。",
        imagePath:"/images/icon/titanic.jpg",
        isHighlyRecommended:true
      },
      {
        name:"这个杀手不太冷",
        comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事",
        imagePath:"/images/icon/leon.jpg",
        isHighlyRecommended:false
      },
    {
      name:"教父",
      comment:"最精彩的剧本，最真实的黑帮电影。",
      imagePath:"/images/icon/jf.jpg",
      isHighlyRecommended:false
    },
  ],
    count:24,
    score:36,
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

使用swiper组件

因为swiper默认高度：150px,而图片默认高度240px

next:

/* pages/weekly/weekly.wxss */
.movie{
  display: flex;
}
.movie-details{
  display:flex;
  flex-direction: column;
  width: 550rpx;
}
.movie-image{
  width: 200rpx;
  height: 200rpx;
}
.movie-swiper{
  height: 90vh;
}
.movie-card{
  height: 100%;
  width: 100%;
background:#eee;
margin: 0 20rpx;
}

// pages/weekly/weekly.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    weekMovieList:[
      {
        name:"泰塔尼克号",
        comment:"失去的才是永恒的。",
        imagePath:"/images/icon/titanic.jpg",
        isHighlyRecommended:true
      },
      {
        name:"这个杀手不太冷",
        comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事",
        imagePath:"/images/icon/leon.jpg",
        isHighlyRecommended:false
      },
    {
      name:"教父",
      comment:"最精彩的剧本，最真实的黑帮电影。",
      imagePath:"/images/icon/jf.jpg",
      isHighlyRecommended:false
    },
  ],
    count:24,
    score:36,
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

/**app.wxss**/
/* .container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}  */
.container{
  background-color: #fff;
  height: 100vh;

  display: flex;
  flex-direction: column;
 
  justify-content: space-around;
   align-items: center;

}

页面的生命周期函数

必须在视图渲染之前完成赋值

<!--pages/weekly/weekly.wxml-->
<view class="">
<!-- <text>本周推荐</text> -->
<swiper class="movie-swiper" indicator-dots="{{true}}" previous-margin="50rpx" next-margin="50rpx" current="{{currentIndex}}">
  <swiper-item class="movie" wx:for="{{weekMovieList}}">
      <view class="container movie-card">
          <image class="movie-image" src="{{item.imagePath}}"></image> 
          <text>第{{index+1}}周：{{item.name}}</text>
          <text>点评：{{item.comment}}</text>
          <text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px;color:red;">强烈推荐</text>
          <text wx:if="{{index<(weekMovieList.length-1)}}"   class="return-button">返回本周</text>
          
      </view>
  </swiper-item>
</swiper>
</view>

// pages/weekly/weekly.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    weekMovieList:[
      {
        name:"泰塔尼克号",
        comment:"失去的才是永恒的。",
        imagePath:"/images/icon/titanic.jpg",
        isHighlyRecommended:true
      },
      {
        name:"这个杀手不太冷",
        comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事",
        imagePath:"/images/icon/leon.jpg",
        isHighlyRecommended:false
      },
    {
      name:"教父",
      comment:"最精彩的剧本，最真实的黑帮电影。",
      imagePath:"/images/icon/jf.jpg",
      isHighlyRecommended:false
    },
  ],
    count:24,
    score:36,
    currentIndex:0
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   this.setData({
     currentIndex:this.data.weekMovieList.length-1
   })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

/* pages/weekly/weekly.wxss */
.movie{
  display: flex;
}
.movie-details{
  display:flex;
  flex-direction: column;
  width: 550rpx;
}
.movie-image{
  width: 200rpx;
  height: 200rpx;
}
.movie-swiper{
  height: 90vh;
}
.movie-card{
  height: 100%;
  width: 100%;
background:#eee;
margin: 0 20rpx;
position: relative;
}
.return-button{
  position: absolute;
  right:0;
  top: 40px;
  font-size: 26rpx;
  font-style:italic;
  border:1px solid green;
  border-right: 0;
  border-radius: 10%;
}

更新数据this.setData()

setData 函数用于将数据从逻辑层发送到视图层 （异步），同时改变对应的 this.data 的值（同步）。

以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。
其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

事件机制–响应用户交互

catchtap是非冒泡，bindtap是冒泡

组件的自定义数据属性

<!--pages/weekly/weekly.wxml-->
<view class="">
<!-- <text>本周推荐</text> -->
<swiper class="movie-swiper" indicator-dots="{{true}}" previous-margin="50rpx" next-margin="50rpx" current="{{currentIndex}}">
  <swiper-item class="movie" wx:for="{{weekMovieList}}">
      <view class="container movie-card"  bindtap="f2" data-movie-id="{{item.id}}">
          <image class="movie-image" src="{{item.imagePath}}"></image> 
          <text>第{{index+1}}周：{{item.name}}</text>
          <text>点评：{{item.comment}}</text>
          <text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px;color:red;">强烈推荐</text>
          <text bindtap="f0" wx:if="{{index<(weekMovieList.length-1)}}"   class="return-button">返回本周</text>
          <text>{{count}}</text>
          <button bindtap="f1">+1</button>
      </view>
  </swiper-item>
</swiper>
</view>

// pages/weekly/weekly.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    weekMovieList:[
      {
        name:"泰塔尼克号",
        comment:"失去的才是永恒的。",
        imagePath:"/images/icon/titanic.jpg",
        isHighlyRecommended:true,
        id:1
      },
      {
        name:"这个杀手不太冷",
        comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事",
        imagePath:"/images/icon/leon.jpg",
        isHighlyRecommended:false,
        id:2
      },
    {
      name:"教父",
      comment:"最精彩的剧本，最真实的黑帮电影。",
      imagePath:"/images/icon/jf.jpg",
      isHighlyRecommended:false,
      id:3
    },
  ],
    count:0,
    score:36,
    currentIndex:0
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   this.setData({
     currentIndex:this.data.weekMovieList.length-1
   })
  },
  f0:function(event){
    console.log(event);
    this.setData({
      currentIndex:this.data.weekMovieList.length-1
    })
  },
  f1:function(event){
    console.log(this.data.count);
    //错误的方式，不能直接复制 this.data.count=this.data.count+1
    this.setData({
      count:this.data.count+1,
      "weekMovieList[2].name":"教父3"
    })
  },
  f2:function(event){
    var movieId=event.currentTarget.dataset.movieId;
    console.log(event.currentTarget);
    console.log(movieId);
     wx.navigateTo({
       url: '/pages/detail/detail?id'+movieId
     })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

{
  "usingComponents": {},
  "navigationBarTitleText": "每周推荐"
}

/* pages/weekly/weekly.wxss */
.movie{
  display: flex;
}
.movie-details{
  display:flex;
  flex-direction: column;
  width: 550rpx;
}
.movie-image{
  width: 200rpx;
  height: 200rpx;
}
.movie-swiper{
  height: 90vh;
}
.movie-card{
  height: 100%;
  width: 100%;
background:#eee;
margin: 0 20rpx;
position: relative;
}
.return-button{
  position: absolute;
  right:0;
  top: 40px;
  font-size: 26rpx;
  font-style:italic;
  border:1px solid green;
  border-right: 0;
  border-radius: 10%;
}

{
  "pages":[
    "pages/about/about",
    "pages/weekly/weekly",
    "pages/detail/detail"


   
  ],
  
  "window":{
    "enablePullDownRefresh": true,
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor":  "#F0F8FF",
    "navigationBarTitleText": "电影周周看",
    "navigationBarTextStyle":"black"

  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#66CDAA",
    "borderStyle": "black",
    "backgroundColor": "#F0F8FF",

     "list": [
      {
      "pagePath":  "pages/weekly/weekly",
      "text": "每周推荐",
      "iconPath": "images/tabbar/weekly.png",
      "selectedIconPath": "images/tabbar/weekly-selected.png"
    },
    {
      "pagePath":   "pages/about/about",
      "text": "关于",
      "iconPath": "images/tabbar/about.png",
      "selectedIconPath": "images/tabbar/about-selected.png"
    }
  ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

实现电影详情页的基本框架

用navigator访问的时候会发先到detail的onload方法去，在调用onload方法时，
首先会将url中?后面的参数解析出来，然后组成一个javascript对象，然后将这个对象作为实参值传递给onload方法





上面图中少了个=号，在id='movieId

// pages/weekly/weekly.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    weekMovieList:[
      {
        name:"泰塔尼克号",
        comment:"失去的才是永恒的。",
        imagePath:"/images/icon/titanic.jpg",
        isHighlyRecommended:true,
        id:1
      },
      {
        name:"这个杀手不太冷",
        comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事",
        imagePath:"/images/icon/leon.jpg",
        isHighlyRecommended:false,
        id:2
      },
    {
      name:"教父",
      comment:"最精彩的剧本，最真实的黑帮电影。",
      imagePath:"/images/icon/jf.jpg",
      isHighlyRecommended:false,
      id:3
    },
  ],
    count:0,
    score:36,
    currentIndex:0
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   this.setData({
     currentIndex:this.data.weekMovieList.length-1
   })
  },
  //返回本周按钮
  f0:function(event){
    console.log(event);
    this.setData({
      currentIndex:this.data.weekMovieList.length-1
    })
  },
  //+1按钮
  f1:function(event){
    console.log(this.data.count);
    //错误的方式，不能直接复制 this.data.count=this.data.count+1
    this.setData({
      count:this.data.count+1,
      "weekMovieList[2].name":"教父3"
    })
  },
  //点weekly的某个电影就进入相应电影的详情页detail
  f2:function(event){
    var movieId=event.currentTarget.dataset.movieId;
    console.log(event.currentTarget);
    console.log(movieId);
     wx.navigateTo({
       url: '/pages/detail/detail?id='+movieId
     })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

<!--pages/weekly/weekly.wxml-->
<view class="">
<!-- <text>本周推荐</text> -->
<swiper class="movie-swiper" indicator-dots="{{true}}" previous-margin="50rpx" next-margin="50rpx" current="{{currentIndex}}">
  <swiper-item class="movie" wx:for="{{weekMovieList}}">
      <view class="container movie-card"  bindtap="f2" data-movie-id="{{item.id}}">
          <image class="movie-image" src="{{item.imagePath}}"></image> 
          <text>第{{index+1}}周：{{item.name}}</text>
          <text>点评：{{item.comment}}</text>
          <text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px;color:red;">强烈推荐</text>
          <text catchtap="f0" wx:if="{{index<(weekMovieList.length-1)}}"   class="return-button">返回本周</text>
          <text>{{count}}</text>
          <button bindtap="f1">+1</button>
      </view>
  </swiper-item>
</swiper>
</view>

/* pages/weekly/weekly.wxss */
.movie{
  display: flex;
}
.movie-details{
  display:flex;
  flex-direction: column;
  width: 550rpx;
}
.movie-image{
  width: 200rpx;
  height: 200rpx;
}
.movie-swiper{
  height: 90vh;
}
.movie-card{
  height: 100%;
  width: 100%;
background:#eee;
margin: 0 20rpx;
position: relative;
}
.return-button{
  position: absolute;
  right:0;
  top: 40px;
  font-size: 26rpx;
  font-style:italic;
  border:1px solid green;
  border-right: 0;
  border-radius: 10%;
}

发起请求API

data 参数说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：

对于 GET 方法的数据，会将数据转换成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化
对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
示例代码：

wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})

在微信公众平台上配置下需要的服务器域名：



异步调用

调用豆瓣API获取电影详情数据并展示

http://www.doubanapi.com/movie.html



https://movie.douban.com/subject/1291841/

以上是调用豆瓣的API+Nginx，但是我自己随便找了个接口用：【我自己瞎弄的】

如下：
https://movie.querydata.org/


将weekly.js中的三部电影的id改成豆瓣的id

// pages/weekly/weekly.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    weekMovieList:[
      {
        name:"泰塔尼克号",
        comment:"失去的才是永恒的。",
        imagePath:"/images/icon/titanic.jpg",
        isHighlyRecommended:true,
        id:1292722
      },
      {
        name:"这个杀手不太冷",
        comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事",
        imagePath:"/images/icon/leon.jpg",
        isHighlyRecommended:false,
        id:1295644
      },
    {
      name:"教父",
      comment:"最精彩的剧本，最真实的黑帮电影。",
      imagePath:"/images/icon/jf.jpg",
      isHighlyRecommended:false,
      id:1291841
    },
  ],
    count:0,
    score:36,
    currentIndex:0
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   this.setData({
     currentIndex:this.data.weekMovieList.length-1
   })
  },
  //返回本周按钮
  f0:function(event){
    console.log(event);
    this.setData({
      currentIndex:this.data.weekMovieList.length-1
    })
  },
  //+1按钮
  f1:function(event){
    console.log(this.data.count);
    //错误的方式，不能直接复制 this.data.count=this.data.count+1
    this.setData({
      count:this.data.count+1,
      "weekMovieList[2].name":"教父3"
    })
  },
  //点weekly的某个电影就进入相应电影的详情页detail
  f2:function(event){
    var movieId=event.currentTarget.dataset.movieId;
    console.log(event.currentTarget);
    console.log(movieId);
     wx.navigateTo({
       url: '/pages/detail/detail?id='+movieId
     })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

在detail.js中去请求下看得到的数据是什么【有点慢，耐心等待，爬取成功后第一次后再请求就会快点】

// pages/detail/detail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   var that=this;
     console.log(options)
    wx.request({
      url: 'https://movie.querydata.org/api?id='+options.id,
      method:"GET",
      data:{
      },
      header:{
         "content-type":"json"
      },
      success:function(res){
  console.log(res);
  that.setData({
    movie:res.data
  })
      },
      fail:function(){

      },
      complete:function(){

      }
    })
      
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

然后写detail.wxml和wxss把这些数据展示在视图中

<!--pages/detail/detail.wxml-->
<view class="container">
  <image class="detail-image" src="{{movie.data[0].poster}}"></image>
  <text style="font-weight:bold;font-size:50rpx;">{{movie.data[0].name}}</text>
  <text>年份：{{movie.year}}</text>
  <text>类型：{{movie.data[0].genre}}</text>
  <text>评分：{{movie.doubanRating}}</text>
  <text selectable="true">简介：{{movie.data[0].description}}</text>
</view>

/* pages/detail/detail.wxss */
.detail-image{
  width: 300rpx;
   height: 300rpx;
}

最后结果：

动态设置导航栏loading状态和标题

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   var that=this;
     console.log(options)
    wx.request({
      url: 'https://movie.querydata.org/api?id='+options.id,
      method:"GET",
      data:{
      },
      header:{
         "content-type":"json"
      },
      success:function(res){
  console.log(res);
  that.setData({
    movie:res.data
  })
  wx.hideNavigationBarLoading()
  
      },
      fail:function(){

      },
      complete:function(){

      }
    })
    wx.showNavigationBarLoading()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

<!--pages/detail/detail.wxml-->
<view class="container">
  <image class="detail-image" src="{{movie.data[0].poster}}"></image>
  <text style="font-weight:bold;font-size:50rpx;">{{movie.data[0].name}}</text>
  <text>年份：{{movie.year}}</text>
  <text>类型：{{movie.data[0].genre}}</text>
  <text>评分：{{movie.doubanRating}}</text>
  <text selectable="true">简介：{{movie.data[0].description}}</text>
</view>

// pages/detail/detail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   var that=this;
     console.log(options)
    wx.request({
      url: 'https://movie.querydata.org/api?id='+options.id,
      method:"GET",
      data:{
      },
      header:{
         "content-type":"json"
      },
      success:function(res){
  console.log(res);
  that.setData({
    movie:res.data
  })
  wx.setNavigationBarTitle({
    title:res.data.doubanRating+"分："+res.data.data[0].name,
  })
  wx.hideNavigationBarLoading()
  
      },
      fail:function(){

      },
      complete:function(){

      }
    })
    wx.showNavigationBarLoading()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

页面事件处理函数和自定义页面转发

weekly.js

// pages/weekly/weekly.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    weekMovieList:[
      {
        name:"泰塔尼克号",
        comment:"失去的才是永恒的。",
        imagePath:"/images/icon/titanic.jpg",
        isHighlyRecommended:true,
        id:1292722
      },
      {
        name:"这个杀手不太冷",
        comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事",
        imagePath:"/images/icon/leon.jpg",
        isHighlyRecommended:false,
        id:1295644
      },
    {
      name:"教父",
      comment:"最精彩的剧本，最真实的黑帮电影。",
      imagePath:"/images/icon/jf.jpg",
      isHighlyRecommended:false,
      id:1291841
    },
  ],
    count:0,
    score:36,
    currentIndex:0
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   this.setData({
     currentIndex:this.data.weekMovieList.length-1
   })
  },
  //返回本周按钮
  f0:function(event){
    console.log(event);
    this.setData({
      currentIndex:this.data.weekMovieList.length-1
    })
  },
  //+1按钮
  f1:function(event){
    console.log(this.data.count);
    //错误的方式，不能直接复制 this.data.count=this.data.count+1
    this.setData({
      count:this.data.count+1,
      "weekMovieList[2].name":"教父3"
    })
  },
  //点weekly的某个电影就进入相应电影的详情页detail
  f2:function(event){
    var movieId=event.currentTarget.dataset.movieId;
    console.log(event.currentTarget);
    console.log(movieId);
     wx.navigateTo({
       url: '/pages/detail/detail?id='+movieId
     })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title:"每周推荐"
    }
      
  }
})

detail.js

// pages/detail/detail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   var that=this;
     console.log(options)
    wx.request({
      url: 'https://movie.querydata.org/api?id='+options.id,
      method:"GET",
      data:{
      },
      header:{
         "content-type":"json"
      },
      success:function(res){
  console.log(res);
  that.setData({
    movie:res.data
  })
  wx.setNavigationBarTitle({
    title:res.data.doubanRating+"分："+res.data.data[0].name,
  })
  wx.hideNavigationBarLoading()
  
      },
      fail:function(){

      },
      complete:function(){

      }
    })
    wx.showNavigationBarLoading()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return{
      title:"向你推荐:"+this.data.movie.data[0].name,
    }
  }
})