• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序开发---豆瓣电影展示页面

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一. request promise的安装
首先新建云函数,使用终端打开,输入以下代码

npm install --save request
npm install --save request-promise

注:NPM是随同NodeJS一起安装的包管理工具

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

二. 在云函数 index.js中

var rp = require(\'request-promise\');//引入库

return rp(\'当前请求的地址\').then(function(res){
console.log(res);
return res;
}).catch(function(err){
console.err(err);
});

注:ES6字符串模板

三 上传并部署云函数

四 page文件中js文件 onload函数:监听页面加载

onLoad: function(options){
	wx.cloud.callFunction({
		name: \'movielist\'
		data:{
			start: this.data.movieList.length,
			count: 10
		}
	}).then(res =>{
	console.log(res);
	this.setDate({
		movieList: this.data.novieList.concat(JOSN.parse(res.result).subjects)//将传来的数据拼接在之前的数据上面
	})
	}).catch(err=> {console.err(err);});
}

五 将数据结果显示到页面中

<view class ="movie" wx:for="{{movieList}}" wx:key="{{index}}">//循环遍历
<image class="movi-img" src="{{item.image.small}}" ></image>
<view class ="movie-info">
<view class="movie-title">{{item.tittle}}</view>
<view>观众评分: {{}}分</view>
</view>

六 拉到底后继续加载内容


wx.showloading({
	title: "加载中"
})




// pages/movie/movie.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    movieList: []
  },

  getMovieList: function() {
    wx.showLoading({
      title: \'加载中\',
    })
    wx.cloud.callFunction({
      name: \'movielist\',
      data: {
        start: this.data.movieList.length,
        count: 10
      }
    }).then(res => {
      // console.log(res);
      this.setData({
        movieList: this.data.movieList.concat(JSON.parse(res.result).subjects)
      });
      wx.hideLoading();
    }).catch(err => {
      console.error(err);
      wx.hideLoading();
    });
  },
  gotoComment: function(event) {
    wx.navigateTo({
      url: `../comment/comment?movieid=${event.target.dataset.movieid}`,
    });

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.getMovieList();
  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    this.getMovieList();
  },

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

  }
})

界面展示


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序---电影商城--娱乐组件发布时间:2022-07-18
下一篇:
经典小程序源码及其下载地址发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap