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 :
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": "影片搜索" }] } }
/**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; }
<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>
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); } })
image{ width:350rpx; height:280rpx; }
Idem Le code comingSoon.js est similaire au code hotPage.js. La seule chose qui doit être modifiée est :
<. 🎜>Changez 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>
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 }) } }) } })
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 :
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>
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: '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 }) } }) } })
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!