微信小程序开发教程:仿电影影评小程序开发

  2017年8月8日hi商学院最新消息,hishop了解到微信小程序开发教程是目前大家比较关心的问题,今天hishop为大家整理仿电影影评小程序开发相关开发步骤说明。

  微信小程序电影影评小程序开发步骤:

  这是博主的项目包含的文件截图:

微信小程序开发教程:仿电影影评小程序开发

  首先如图建立文件夹和page页面

  然后app.json页面更新代码如下:

  {

  "pages": [

  "pages/hotPage/hotPage",

  "pages/comingSoon/comingSoon",

  "pages/search/search",

  "pages/more/more"

  ],

  "window": {

  "backgroundTextStyle": "light",

  "navigationBarBackgroundColor": "#fff",

  "navigationBarTitleText": "WeChat",

  "navigationBarTextStyle": "black"

  },

  "tabBar": {

  "list": [{

  "pagePath": "pages/hotPage/hotPage",

  "text": "本地热映"

  },{

  "pagePath": "pages/comingSoon/comingSoon",

  "text": "即将上映"

  },{

  "pagePath": "pages/search/search",

  "text": "影片搜索"

  }]

  }

  }

  然后是app.wxss页面(为后面的页面样式写的):

  /**app.wxss**/.container {

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  padding: 200rpx 0;

  box-sizing: border-box;

  } /* hotPage.wxss */

  .movies{

  display:flex;

  }

  .myimage{

  flex: 1;

  }

  .moveInfo{

  flex: 2;

  }

  .yanyuanlist{

  display:flex;

  }

  .left{

  flex:1;

  }

  .right{

  flex:2;

  }

  页面显示如图:

微信小程序开发教程:仿电影影评小程序开发

  然后是hotPage.wxml页面:

  <view class="movies" wx:for="{{movies}}" id="{{item.id}}" bindtap="jumpTomore">

  <view class="myimage">

  <image src="{{item.images.medium}}"></image>

  </view>

  <view class="moveInfo">

  <view class="title">

  名称:{{item.title}}

  </view>

  <view class="daoyan">

  导演:{{item.directors["0"].name}}

  </view>

  <view class="yanyuanlist">

  <view class="left">演员:</view>

  <view class="right">

  <block wx:for="{{item.casts}}">{{item.name}} </block>

  </view>

  </view>

  <view class="fenlei">

  分类:{{item.genres}}

  </view>

  <view class="year">

  上映时间:{{item.year}}

  </view>

  </view>

  </view>

  然后是hotPage.js页面:

  var that;var page = 0;// more.js

  Page({

  /**

  * 页面的初始数据

  */

  data: {

  movies: []

  },

  /**

  * 生命周期函数--监听页面加载

  */

  onLoad: function (options) {

  that = this;

  that.linkNet(0);

  },

  jumpTomore: function (e) {

  console.log(e.currentTarget.id);

  wx.navigateTo({

  url: '/pages/more/more?id=' + e.currentTarget.id,

  })

  },

  linkNet: function (page) {

  wx.request({

  header: {

  "Content-Type": "json"

  },

  url: 'https://api.douban.com/v2/movie/in_theaters',

  data: {

  start: 10 * page,

  count: 10,

  city: '成都'

  },

  success: function (e) {

  console.log(e);

  if (e.data.subjects.length == 0) {

  wx.showToast({

  title: '没有更多数据',

  })

  } else {

  that.setData({

  movies: that.data.movies.concat(e.data.subjects)

  })

  }

  }

  })

  },

  onReachBottom: function () {

  that.linkNet(++page);

  }

  })

  运行程序结果如图:

微信小程序开发教程:仿电影影评小程序开发

  然后是hotPage.wxss:

  image{

  width:350rpx;

  height:280rpx;

  }

  接着是第二个页面的布局和第一个页面一样,所以直接把第一个页面hotPage.wxml代码copy过来就好了;

  同样comingSoon.js代码和hotPage.js代码也差不多,唯一需要改动的地方只有一个:

微信小程序开发教程:仿电影影评小程序开发

  url和data改一下就好了

  .wxss代码一致;

  运行结果如下:

微信小程序开发教程:仿电影影评小程序开发

  接着是第三个页面的代码:

  search.wxml页面代码:

  <input placeholder="输入关键字" bindinput="myInput" /><button bindtap="mySearch">搜索</button>

  <view class="movies" wx:for="{{movies}}" id="{{item.id}}" bindtap="jumpTomore">

  <view class="myimage">

  <image src="{{item.images.medium}}"></image>

  </view>

  <view class="moveInfo">

  <view class="title">

  名称:{{item.title}}

  </view>

  <view class="daoyan">

  导演:{{item.directors["0"].name}}

  </view>

  <view class="yanyuanlist">

  <view class="left">演员:</view>

  <view class="right">

  <block wx:for="{{item.casts}}">{{item.name}} </block>

  </view>

  </view>

  <view class="fenlei">

  分类:{{item.genres}}

  </view>

  <view class="year">

  上映时间:{{item.year}}

  </view>

  </view>

  </view>

  search.js页面代码:

  var input;var that;// search.js

  Page({

  /**

  * 页面的初始数据

  */

  data: {

  movies: []

  },

  /**

  * 生命周期函数--监听页面加载

  */

  onLoad: function (options) {

  that = this;

  },

  myInput: function (e) {

  input = e.detail.value;

  },

  mySearch: function () {

  wx.request({

  header: {

  "Content-Type": "json"

  },

  url: 'https://api.douban.com/v2/movie/search?q=' + input,

  success: function (e) {

  that.setData({

  movies: e.data.subjects

  })

  }

  })

  }

  })

  search.wxss代码同hotPage.wxss代码一致;

  运行代码结果如下:

微信小程序开发教程:仿电影影评小程序开发

  最后是详情页面,点击影片后会跳转到详情页面获得影片的详细信息:

  more.wxml页面代码:

  <!--more.wxml--><image src="{{imageUrl}}"></image><view class="moveInfo">

  <view class="title">名字:{{title}}</view>

  <view class="director">导演:{{director}}</view>

  <view class="castleft">主演:</view>

  <view class="casts" wx:for="{{casts}}">

  <block class="castright">{{item.name}}</block>

  </view>

  <view class="year">年份:{{year}}</view>

  <view class="rate">评分:{{rate}}</view>

  <view class="summary">介绍:{{summary}}</view></view>

  more.js代码:

  var that;

  // more.jsPage({

  /**

  * 页面的初始数据

  */

  data: {

  title: 0,

  imageUrl: 0,

  director: 0,

  casts: [],

  year: 0,

  rate: 0,

  summary: 0

  },

  /**

  * 生命周期函数--监听页面加载

  */

  onLoad: function (options) {

  that = this;

  wx.request({

  header: {

  "Content-Type": "json"

  },

  url: 'https://api.douban.com/v2/movie/subject/' + options.id,

  success: function (e) {

  console.log(e)

  that.setData({

  title: e.data.original_title,

  imageUrl: e.data.images.large,

  director: e.data.directors["0"].name,

  casts: e.data.casts,

  year: e.data.year,

  rate: e.data.rating.average,

  summary: e.data.summary

  })

  }

  })

  }

  })

  运行代码结果如下:

微信小程序开发教程:仿电影影评小程序开发

  以上就是微信小程序开发教程仿电影影评小程序开发流程,更多的小程序开发教程和小程序请继续关注hishop的更新!


【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿,由于未联系到知识产权人或未发现有关知识产权的登记,如有知识产权人并不愿意我们使用,如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!



▼点击进入科汛官网了解更多



上/下篇
  • 微信小程序开发教程零基础(实例代码视频大全

  • 公众号关联小程序规则调整(最新调整)

换一换相关推荐
精选内容
热点精选