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

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

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

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

　　首先如圖建立文件夾和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;

　　}

　　頁面顯示如圖：

　　然后是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é)果如圖：

　　然后是hotPage.wxss:

　　image{

　　width:350rpx;

　　height:280rpx;

　　}

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

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

　　url和data改一下就好了

　　.wxss代碼一致;

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

　　接著是第三個(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é)果如下：

　　最后是詳情頁面，點(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ā)教程和小程序請(qǐng)繼續(xù)關(guān)注hishop的更新!