Home > WeChat Applet > Mini Program Development > WeChat applet implements example code for making movie review applet

WeChat applet implements example code for making movie review applet

黄舟
Release: 2017-09-13 09:20:53
Original
8269 people have browsed it

This article mainly introduces the WeChat applet movie review applet production code in detail. It has certain reference value. Interested friends can refer to it.

The examples in this article are shared with everyone. The specific code of the WeChat applet to create a movie review applet is for your reference. The specific content is as follows

This is a screenshot of the file included in the blogger’s project:

WeChat applet implements example code for making movie review applet

First create the folder and page page as shown

Then the app.json page update code is as follows:

{
 "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": "影片搜索"
 }]
 }
}
Copy after login

is app.wxss Page (written for the following page style):

/**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;
}
Copy after login

The page is displayed as shown in the figure:

WeChat applet implements example code for making movie review applet

Then the hotPage.wxml page:

<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>
Copy after login

Then the hotPage.js page:

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: &#39;/pages/more/more?id=&#39; + e.currentTarget.id,
 })
 },
 linkNet: function (page) {
 wx.request({
 header: {
 "Content-Type": "json"
 },
 url: &#39;https://api.douban.com/v2/movie/in_theaters&#39;,
 data: {
 start: 10 * page,
 count: 10,
 city: &#39;成都&#39;
 },
 success: function (e) {
 console.log(e);
 if (e.data.subjects.length == 0) {
 wx.showToast({
 title: &#39;没有更多数据&#39;,
 })
 } else {
 that.setData({
 movies: that.data.movies.concat(e.data.subjects)
 })
 }
 }
 })
 },
 onReachBottom: function () {
 that.linkNet(++page);
 }
})
Copy after login

The result of running the program is as shown below:

Then hotPage.wxss:

image{
 width:350rpx;
 height:280rpx;
}
Copy after login

Then the layout of the second page is the same as the first page, so just copy the hotPage.wxml code of the first page;
The same comingSoon.js code and hotPage.js code are also Almost the same, the only thing that needs to be changed is:

WeChat applet implements example code for making movie review applet

Just change the url and data

.wxss code is the same;

The running results are as follows:

Then the code for the third page:

search.wxml page Code:




<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>
Copy after login

Page code:

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: &#39;https://api.douban.com/v2/movie/search?q=&#39; + input,
 success: function (e) {
 that.setData({
 movies: e.data.subjects
 })
 }
 })
 }


})
Copy after login

.wxss code is the same as hotPage.wxss The code is the same;

The result of running the code is as follows:

WeChat applet implements example code for making movie review applet

The last is the details page. After clicking on the video, you will jump to the details page to get the details of the video. Information:

more.wxml page code:

<!--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>
Copy after login

more.js code:

var that;
// more.js
Page({

 /**
 * 页面的初始数据
 */
 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: &#39;https://api.douban.com/v2/movie/subject/&#39; + 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
 })
 }
 })
 }

})
Copy after login

The result of running the code is as follows:

Okay, all the codes are given above. Come on

The above is the detailed content of WeChat applet implements example code for making movie review applet. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template