注冊(cè)

微信小程序開發(fā)教程:仿電影影評(píng)小程序開發(fā)

2017-08-08
導(dǎo)讀:2017年8月8日hi商學(xué)院最新消息,hishop了解到 微信小程序開發(fā)教程 是目前大家比較關(guān)心的問題,今天hishop為大家整理 仿電影影評(píng)小程序開發(fā) 相關(guān)開發(fā)步驟說明。 微信小程序電影影評(píng)小程...

  2017年8月8日hi商學(xué)院最新消息,hishop了解到微信小程序開發(fā)教程是目前大家比較關(guān)心的問題,今天hishop為大家整理仿電影影評(píng)小程序開發(fā)相關(guān)開發(fā)步驟說明。

  微信小程序電影影評(píng)小程序開發(fā)步驟:

  這是博主的項(xiàng)目包含的文件截圖:

微信小程序開發(fā)教程:仿電影影評(píng)小程序開發(fā)

  首先如圖建立文件夾和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": "本地?zé)嵊?quot;

  },{

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

  }

  頁面顯示如圖:

微信小程序開發(fā)教程:仿電影影評(píng)小程序開發(fā)

  然后是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">

  導(dǎo)演:{{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">

  上映時(shí)間:{{item.year}}

  </view>

  </view>

  </view>

  然后是hotPage.js頁面:

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

  Page({

  /**

  * 頁面的初始數(shù)據(jù)

  */

  data: {

  movies: []

  },

  /**

  * 生命周期函數(shù)--監(jiān)聽頁面加載

  */

  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: '沒有更多數(shù)據(jù)',

  })

  } else {

  that.setData({

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

  })

  }

  }

  })

  },

  onReachBottom: function () {

  that.linkNet(++page);

  }

  })

  運(yùn)行程序結(jié)果如圖:

微信小程序開發(fā)教程:仿電影影評(píng)小程序開發(fā)

  然后是hotPage.wxss:

  image{

  width:350rpx;

  height:280rpx;

  }

  接著是第二個(gè)頁面的布局和第一個(gè)頁面一樣,所以直接把第一個(gè)頁面hotPage.wxml代碼copy過來就好了;

  同樣comingSoon.js代碼和hotPage.js代碼也差不多,唯一需要改動(dòng)的地方只有一個(gè):

微信小程序開發(fā)教程:仿電影影評(píng)小程序開發(fā)

  url和data改一下就好了

  .wxss代碼一致;

  運(yùn)行結(jié)果如下:

微信小程序開發(fā)教程:仿電影影評(píng)小程序開發(fā)

  接著是第三個(gè)頁面的代碼:

  search.wxml頁面代碼:

  <input placeholder="輸入關(guān)鍵字" 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">

  導(dǎo)演:{{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">

  上映時(shí)間:{{item.year}}

  </view>

  </view>

  </view>

  search.js頁面代碼:

  var input;var that;// search.js

  Page({

  /**

  * 頁面的初始數(shù)據(jù)

  */

  data: {

  movies: []

  },

  /**

  * 生命周期函數(shù)--監(jiān)聽頁面加載

  */

  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代碼一致;

  運(yùn)行代碼結(jié)果如下:

微信小程序開發(fā)教程:仿電影影評(píng)小程序開發(fā)

  最后是詳情頁面,點(diǎn)擊影片后會(huì)跳轉(zhuǎn)到詳情頁面獲得影片的詳細(xì)信息:

  more.wxml頁面代碼:

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

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

  <view class="director">導(dǎo)演:{{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">評(píng)分:{{rate}}</view>

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

  more.js代碼:

  var that;

  // more.jsPage({

  /**

  * 頁面的初始數(shù)據(jù)

  */

  data: {

  title: 0,

  imageUrl: 0,

  director: 0,

  casts: [],

  year: 0,

  rate: 0,

  summary: 0

  },

  /**

  * 生命周期函數(shù)--監(jiān)聽頁面加載

  */

  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

  })

  }

  })

  }

  })

  運(yùn)行代碼結(jié)果如下:

微信小程序開發(fā)教程:仿電影影評(píng)小程序開發(fā)

  以上就是微信小程序開發(fā)教程仿電影影評(píng)小程序開發(fā)流程,更多的小程序開發(fā)教程和小程序請(qǐng)繼續(xù)關(guān)注hishop的更新!

重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)