微信小程序 —— 仿製豆瓣（一）

先預覽一下效果

歡迎掃碼查看

碼雲地址：https://gitee.com/mk_23/little_chen_xu.git

預覽完成，首先進入app.json文件中配置參數，主要就是配置咱們要用的頁面在pages中寫好，刷新後他會自動生成咱們所須要的頁面

"pages": [

"pages/hot/hot",

"pages/wait/wait",

"pages/search/search",

"pages/search/searchResult/searchResult",

"pages/top/top",

"pages/details/details",

"pages/personDetail/personDetail"

 

剩下的就是配置咱們的底部導航，須要注意的是微信的導航圖片是分爲兩個部分的一個至關因而點擊的一個是點擊後的因此咱們一個菜單導航須要兩張圖片

 

"list": [

{

"pagePath": "pages/hot/hot",

"iconPath": "images/hot_icon.png",

"selectedIconPath": "images/hot_active_icon.png",

"text": "熱映"

},

{

"pagePath": "pages/wait/wait",

"iconPath": "images/wait_icon.png",

"selectedIconPath": "images/wait_active_icon.png",

"text": "待映"

},

{

"pagePath": "pages/search/search",

"iconPath": "images/search_icon.png",

"selectedIconPath": "images/search_active_icon.png",

"text": "搜索"

},

{

"pagePath": "pages/top/top",

"iconPath": "images/top_icon.png",

"selectedIconPath": "images/top_active_icon.png",

"text": "口碑"

}

 

 

配置完成後進入咱們剛剛配置生成的第一個目錄

pages/hot/hot，這個將目錄將是咱們小程序的第一個頁面也是咱們的首頁，下面具體來看咱們的首頁是怎麼完成的。

1.進入hot.json，配置標題

{

"navigationBarTitleText": "正在熱映"

}

2.進入hot.wxml開始寫咱們的第一個頁面，在這裏我用了模板，因此這個頁面看起來並無太多的東西。

 

<import src="../template/movie.wxml"/>

<block wx:if="{{showLoading}}">

<view class="loading">玩命加載中…</view>

</block>

<block wx:else>

<view class="film">

<template wx:for="{{movies}}" wx:for-item="movies" wx:key="movies" is="listNone" data="{{...movies}}"></template>

</view>

</block>

 

紅色部分就是咱們引入的模板，由於幾乎每一個頁面的展現基本同樣，爲了方便起見，因此用了模板，這樣也便於咱們後期的維護與修改。咱們的hot.wxss,一樣也是引入

movie.wxss。

 

@import "../template/movie.wxss";

既然引入了他們倆個，那就具體來看看是什麼樣的。

首先是movie.wxml

<template name="listNone">

<view class="film-item" data-id="{{movieId}}" bindtap="filmDetail">

<view class="film-cover">

<image src="{{imgUrl}}" class="film-cover-img"></image>

<view class="film-rating">

<block wx:if="{{score}}">

{{score}}

</block>

<block wx:else>

暫無評分

</block>

</view>

</view>

<view class="file-intro">

<view class="film-title">{{title}}</view>

<view class="film-tag" >

<view class="film-tag-item" wx:for="{{genres}}" wx:for-item="genres" wx:key="genres">{{genres}}</view>

</view>

</view>

</view>

</template>

其次是咱們的樣式

這個樣式使咱們用了加載數據是初始化的頁面也就是咱們的等待頁面，（等頁面加載完成後，自動取消這個動態效果）

@import "../../comm/animation.wxss";

 

等這些都弄完了，咱們來看一下最重要的東西，咱們的hot.js

var app = getApp(); //引入全局函數（做用域）

var util = require("../../utils/util.js");

Page({

data: {

movies: [],

totalCount: 0,

isEmpty: true,

showLoading:true

},

onLoad: function(options) {

// 正在上映

var in_theaters = app.globalURrl.doubanUrl + '/v2/movie/in_theaters';

this.setData({

in_theaters: in_theaters,

showLoading: true

});

util.http(in_theaters, this.callback);

var timestamp = Date.parse(new Date());

wx.showNavigationBarLoading();

},

//上拉加載

onReachBottom: function () {

var nextUrl = this.data.in_theaters + "?start=" + this.data.totalCount + "&count=20";

util.http(nextUrl, this.callback);

wx.showNavigationBarLoading();

},

callback: function (res) {

// 處理數據

var movies = [];

for (var idx in res.subjects) {

var subject = res.subjects[idx];

var title = subject.title;

if (title.length >= 2) {

title = title.substring(0, 2) + "...";

}

var imgUrl = subject.images.large;

var score = subject.rating.average

var movieId = subject.id;

var genres = subject.genres;

var temp = {

title: title,

imgUrl: imgUrl,

score: score,

movieId: movieId,

genres: genres

}

movies.push(temp);

}

var totalMovies = [];

if (!this.data.isEmpty) {

totalMovies = this.data.movies.concat(movies);

} else {

totalMovies = movies;

this.data.isEmpty = false;

}

this.setData({

movies: totalMovies,

showLoading: false

});

this.data.totalCount += 20;

wx.hideNavigationBarLoading()

},

filmDetail: function(e) {

var data = e.currentTarget.dataset;

wx.navigateTo({

url: '../details/details?id=' + data.id

})

},

onShareAppMessage: function (res) {

return {

title: "電影潮訊",

path: '/pages/hot/hot'

}

}

})

 

 

上面紅色部分是咱們的全局函數與工具方法最後將介紹這兩個

util.js

 

function http(url, callback) {

wx.request({

url: url,

header: {

"Content-Type": "applciation/xml"

},

method: 'GET',

success: function (res) {

var data = res.data;

callback(data);

}

})

}

module.exports = {

http: http

}

 

 

全局函數在咱們的app.js中添加

 

app.js

App({

globalURrl: {

doubanUrl:'https://douban.uieee.com'

}

})

等這些完成後就能夠看到咱們的首頁的樣子了。下面這個用微信掃一下，將會看到咱們要完成的最終樣子。