위 챗 애플 릿 의 영화 평론 애플 릿 제작 코드

본 논문 의 사례 는 여러분 에 게 위 챗 애플 릿 이 영화 평론 애플 릿 을 만 드 는 구체 적 인 코드 를 공유 하여 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
이것 은 블 로 거들 의 프로젝트 에 포 함 된 파일 캡 처 입 니 다.

우선 그림 과 같이 폴 더 와 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": "    "
 },{
 "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">
   :{{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>

그리고 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: '/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);
 }
})

실행 프로그램 결 과 는 그림 과 같 습 니 다.

그리고 hotPage.wxss:

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

이 어 두 번 째 페이지 의 레이아웃 이 첫 번 째 페이지 와 같 기 때문에 첫 번 째 페이지 hotPage.wxml 코드 를 복사 하면 됩 니 다.
마찬가지 로 comingSoon.js 코드 와 hotPage.js 코드 도 차이 가 많 지 않 습 니 다.유일 하 게 변경 해 야 할 곳 은 하나 입 니 다.

url 과 data 를 고 쳤 으 면 좋 겠 어 요.
.wxss 코드 일치;
실행 결 과 는 다음 과 같 습 니 다.

다음은 세 번 째 페이지 의 코드 입 니 다.
search.wxml 페이지 코드:

<input placeholder="     " 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">
   :{{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
 })
 }
 })
 }


})

.wxss 코드 는 hotPage.wxss 코드 와 일치 합 니 다.
실행 코드 결 과 는 다음 과 같 습 니 다.

마지막 으로 상세 한 페이지 입 니 다.영 화 를 클릭 하면 상세 한 페이지 로 이동 하여 영화 의 상세 한 정 보 를 얻 을 수 있 습 니 다.
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>

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

})

실행 코드 결 과 는 다음 과 같 습 니 다.

자,모든 코드 가 올 라 왔 습 니 다.화 이 팅!
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.