Heim  >  Artikel  >  WeChat-Applet  >  Das WeChat-Applet implementiert Beispielcode zum Erstellen eines Filmrezensions-Applets

Das WeChat-Applet implementiert Beispielcode zum Erstellen eines Filmrezensions-Applets

黄舟
黄舟Original
2017-09-13 09:20:538250Durchsuche

Dieser Artikel stellt hauptsächlich den Produktionscode des WeChat-Applets vor. Er hat einen gewissen Referenzwert.

Die Beispiele in diesem Artikel werden mit allen geteilt Das WeChat-Applet zum Erstellen eines Filmrezensions-Applets dient als Referenz. Der spezifische Inhalt lautet wie folgt:

Dies ist ein Screenshot der im Projekt des Bloggers enthaltenen Datei:

Das WeChat-Applet implementiert Beispielcode zum Erstellen eines Filmrezensions-Applets

Erstellen Sie zunächst den Ordner und die Seite wie in der Abbildung gezeigt

Dann lautet der Aktualisierungscode der app.json-Seite wie folgt:

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

ist eine App-.wxss-Seite (geschrieben für den folgenden Seitenstil):

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

Die Seite wird wie im gezeigt angezeigt Abbildung:

Das WeChat-Applet implementiert Beispielcode zum Erstellen eines Filmrezensions-Applets

Dann die Seite 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>

Dann die hotPage.js-Seite:

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

Das Ergebnis der Ausführung des Programms ist wie folgt:

Dann hotPage.wxss:

image{
 width:350rpx;
 height:280rpx;
}

Dann ist das Layout der zweiten Seite dasselbe wie das der ersten Seite, also kopieren Sie einfach das hotPage.wxml-Code der ersten Seite;
Der kommendeSoon.js-Code ähnelt dem hotPage.js-Code. Das einzige, was geändert werden muss, ist:

Das WeChat-Applet implementiert Beispielcode zum Erstellen eines Filmrezensions-Applets

Ändern Sie einfach die URL und die Daten

.wxss-Code ist konsistent

Die laufenden Ergebnisse sind wie folgt:

Dann der Code der dritten Seite:

search.wxml-Seitencode:




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

Seitencode:

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


})

.wxss-Code ist derselbe wie hotPage.wxss-Code;

Das Ergebnis der Ausführung des Codes ist wie folgt:

Das WeChat-Applet implementiert Beispielcode zum Erstellen eines Filmrezensions-Applets

Schließlich ist die Detailseite. Nachdem Sie auf das Video geklickt haben, gelangen Sie zur Detailseite, um detaillierte Informationen zum Video zu erhalten:

more.wxml-Seitencode:

<!--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>

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

})

Das Ergebnis der Ausführung des Codes ist wie folgt:

Okay, alle Codes sind oben angegeben

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet implementiert Beispielcode zum Erstellen eines Filmrezensions-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn