Maison > Applet WeChat > Développement de mini-programmes > Production du mini-programme de revue de film du programme WeChat

Production du mini-programme de revue de film du programme WeChat

不言
Libérer: 2018-06-23 17:02:23
original
5804 Les gens l'ont consulté

Cet article présente principalement en détail le code de production de l'applet de revue de film WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article sont partagés avec tout le monde. l'applet WeChat pour créer une applet de critique de film est pour votre référence. Le contenu spécifique est le suivant

Ceci est une capture d'écran du fichier inclus dans le projet du blogueur :

Production du mini-programme de revue de film du programme WeChat

Créez d'abord le dossier et la page comme indiqué dans la figure

Ensuite, le code de mise à jour de la page app.json est le suivant :

{
 "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": "影片搜索"
 }]
 }
}
Copier après la connexion

est une page app .wxss (écrite pour le style de page suivant) :

/**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;
}
Copier après la connexion

La page s'affiche comme indiqué dans le figure :


Production du mini-programme de revue de film du programme WeChat

Puis la page 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>
Copier après la connexion

Puis la Page 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: &#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);
 }
})
Copier après la connexion

Le résultat de l'exécution du programme est le suivant :


Puis hotPage.wxss :

image{
 width:350rpx;
 height:280rpx;
}
Copier après la connexion

Ensuite, la mise en page de la deuxième page est la même que celle de la première page, il suffit donc de copier le Code hotPage.wxml de la première page ;

Idem Le code comingSoon.js est similaire au code hotPage.js. La seule chose qui doit être modifiée est :

<. 🎜>Production du mini-programme de revue de film du programme WeChatChangez simplement l'URL et les données


Le code .wxss est cohérent

Les résultats en cours sont les suivants :


<🎜 ; >

Puis le code de la troisième page :

code de la page search.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>
Copier après la connexion
Code de la page :

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
 })
 }
 })
 }


})
Copier après la connexion
Le code .wxss est le même que le code hotPage.wxss

Le résultat de l'exécution du code est ; comme suit :


Enfin se trouve la page de détails, après avoir cliqué sur la vidéo, vous accéderez à la page de détails pour obtenir les informations détaillées de la vidéo : Production du mini-programme de revue de film du programme WeChat

code de la page 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>
Copier après la connexion
code de la page more.js :

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
 })
 }
 })
 }

})
Copier après la connexion
Le résultat de l'exécution du code est le suivant :


D'accord, tous les codes sont donnés ci-dessus Allez.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos du développement du centre commercial WeChat Mini Program (ecshop)


WeChat Mini Program - Introduction aux livres Xiaodouban


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal