最近不(bu)想寫(xie)論文(wen)，就想搗鼓點新東西吧，就邊(bian)看官(guan)方(fang)文(wen)檔，花了3天(tian)時(shi)間寫(xie)了一個(ge)簡(jian)單的仿豆瓣(ban)電影的微信小程(cheng)序(xu)，給大家分(fen)享一下(xia)教程(cheng)吧。
源碼&效果圖
源碼(ma)點擊這(zhe)里，歡迎star
運行方(fang)法：
- 下載微信web開發者工具
- 新建項目，項目目錄為代碼存放目錄
- 點擊開發者工具中的編譯即可在模擬器里看到
效果圖如下
開發環境與項目簡介
微信提供了一個微信開發者工具，可以完成小程序的 API 和頁面的開發調試、代碼查看和編輯、小程序預覽和發布等功能。下載地址
下載后，打開該工具，選擇代碼目錄和申請的AppID，勾選quickStart選項，這樣會創建幾個基礎頁面。
正好在寫代碼的第二天，微信開發者工具就全新改版，比原來好多了，原來的console調試界面與編輯代碼不在同一個頁面，十分麻煩，現在就像平時前端調試一樣，調試界面與代碼編輯頁面在同一個界面，方便多了。
項目代碼結構
這里(li)說一下，在新(xin)建目錄后(hou)，可以選擇添加(jia)page,js,wxml,wxss,json文(wen)(wen)件，如果直接添加(jia)page文(wen)(wen)件的(de)話，會直接在該(gai)目錄下生成(cheng)與(yu)目錄相同名字的(de)四個不同后(hou)綴(zhui)(zhui)文(wen)(wen)件的(de)組成(cheng)，如：index.js、index.wxml、index.wxss、index.json。.js后(hou)綴(zhui)(zhui)的(de)文(wen)(wen)件是(shi)(shi)腳(jiao)本文(wen)(wen)件，.json后(hou)綴(zhui)(zhui)的(de)文(wen)(wen)件是(shi)(shi)配(pei)置(zhi)文(wen)(wen)件，.wxss后(hou)綴(zhui)(zhui)的(de)是(shi)(shi)樣(yang)式表文(wen)(wen)件，.wxml后(hou)綴(zhui)(zhui)的(de)文(wen)(wen)件是(shi)(shi)頁(ye)面(mian)結構文(wen)(wen)件。
豆瓣電影API
-
【獲取正在上映電影】
//api.douban.com/v2/movie/in_theaters -
【獲取豆瓣TOP250電影】
//api.douban.com/v2/movie/top250 -
【 獲取即將上映電影】
//api.douban.com/v2/movie/coming_soon -
【獲取具體某一電影信息】
//api.douban.com/v2/movie/subject/:id
詳細數據情況可看
//developers.douban.com/wiki/?title=movie_v2
其實前三個API返回的數據都是一致的，只是返回的電影類型數據不一樣而已，所以在list頁面，我們只要傳入不同的類型即可。在電影列表頁和首頁，都有展示電影的基礎信息（海報，名字，評分），所以可以把這個部分拿出來做一個模板公用。
大體的思路就(jiu)是(shi)這樣，比較(jiao)簡單。
配置小程序窗口和導航欄
在根目錄下的app.json文件中配置小程序的窗口樣式和導航欄
屬性信息如圖，來自官網
點擊上方的“編譯”，就可以看到效果
我們在調試具體某一個頁面的時候，可以添加面板上方中間的”添加編譯模式”，填寫相關參數，這樣就不用從首頁進去調試了。
具體代碼編寫
這(zhe)里(li)只講一下首頁代碼的情況，其他(ta)頁面用到的屬性基本雷(lei)同。這(zhe)里(li)不介(jie)紹小程序的使用語法，請先(xian)在官網上瀏覽個(ge)大概
wx.showLoading()
在最開始進入頁面時，還沒加載完數據時，我們想要有一個loading效果，可直接使用小程序的api
wx.showLoading(OBJECT)
顯示(shi) loading 提示(shi)框, 需主動調用 wx.hideLoading 才(cai)能關閉提示(shi)框
|
1
2
3
4
5
6
|
onLoad: function () {
wx.showLoading({
title: '全力加載中...',
})
}
|
加載完，需要關閉時，就只需要調用即可wx.hideLoading(); onLoad 表(biao)示監聽頁面(mian)加(jia)載(zai)
wx.request()
請求數據調(diao)用wx.request(); 詳(xiang)細屬性(xing)介紹點擊這里(li)
因為請求(qiu)電(dian)影(ying)列(lie)表在(zai)list和index頁(ye)面(mian)都需(xu)要用到，所(suo)以(yi)我在(zai)app.js作為一個全局的方法來寫
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
getFilminfo:function(pageType,start,count,cb) {//電影列表類型，開始數據下標，請求總數，callback函數
var that = this;
wx.request({
url: that.globalData.basicUrl +"/" + pageType + '?start=' + start + '&count=' + count,
// url:url,
header: {
"Content-Type": "json",
},
success: function (res) {
cb(res);
}
})
},
globalData: {
userInfo: null,
basicUrl:"//api.douban.com/v2/movie",
pageTypelist: {"coming_soon":"即將上映","in_theaters":"正在熱映","top250":"TOP250電影"}
}
|
然而，在調用接口的時候發現了這樣的錯誤 
原因是我在開發配置里，沒有豆瓣api的域名添加到request合法域名里， 所以只要在配置里加上需要的即可 
所以在index.js中，調用這個全局方(fang)法如(ru)下(xia)：
|
1
2
|
//獲取(qu)應用實例
var app = getApp()
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
Page({
data: {
motto: 'Hello World',
userInfo: {},
films:[{},{},{}]
},
onLoad: function () {
wx.showLoading({
title: '全力加載中...',
})
console.log('onLoad')
var that = this;
var typelist = ["in_theaters","coming_soon","top250"];
var titlelist = ["正在熱映","即將上映", "TOP250電影"];
for(let i = 0;i<typelist.length;i++){
var type = typelist[i];
app.getFilminfo(type, 0, 8, function (res) {
wx.hideLoading();
var data = res.data;
data.subjects.map(function (item) {
if (item.title.length > 8) {
item.title = item.title.slice(0, 7) + "...";
}
if (item.rating.average>=9.5){
item.rating.star = "star10";
}else{
item.rating.star = "star" + Math.round(item.rating.average);
}
console.log(item.rating.star);
})
that.data.films[i] = {title:titlelist[i],data:data.subjects,type:typelist[i]};
that.setData({
films: that.data.films
});
console.log(that.data.films);
})
}
}
})
|
我們通過“更多”按鈕跳轉到對應(ying)的電影列表(biao)list頁(ye)面，所以需(xu)要綁定事(shi)件(jian)
在(zai)index.wxml中(zhong)，
|
1
|
<button bindtap="toView" data-type="{{filminfo.type}}" class="more-btn" plain="false">更多></button>
|
bindtap就是(shi)對應是(shi)事件名字，同時我們需(xu)要設(she)置(zhi)data-type屬性，屬性值(zhi)即是(shi)電影列表類(lei)型 在index.js中
|
1
2
3
4
5
6
|
toView: function(e) {
var temp = e.currentTarget.dataset;//獲取當前組件上由data-開頭的自定義屬性組成的集合
wx.navigateTo({
url: '../list/list?type=' + temp.type//temp.type即是當時data-type屬性值
})
},
|
wx.navigateTo(）就是路(lu)由(you)跳轉的(de)api
模板
因(yin)為電影(ying)的基礎信息展示(shi)在多個頁(ye)面中都有用(yong)到，我們單獨提出(chu)來寫個電影(ying)預覽(lan)模板
|
1
2
3
4
5
6
7
8
9
10
11
|
<template name="movieThumb">
<view wx:key="id" class="film-item" data-title="{{title}}" data-id="{{id}}" bindtap="detail">
<image src="{{images.medium}}" alt="{{alt}}" class="film-image"></image>
<text class="film-title">{{title}}</text>
<view class="film-rate" wx:if="{{rating.average!=0}}">
<view class="film-star {{rating.star}}"></view>
<text>{{rating.average}}</text>
</view>
<text class="film-rate" wx:else>暫無評分</text>
</view>
</template>
|
模板名字(zi)設置(zhi)為(wei)“movieThumb”
例如(ru)在首頁中有用(yong)到該模塊，那(nei)在index.wxml中如(ru)下(xia)調用(yong)即(ji)可
|
1
2
3
4
5
6
|
<import src="../template/movieThumb.wxml" />
<scroll-view scroll-x="true" class="filmlist">
<template is="movieThumb" wx:for-items="{{filminfo.data}}" wx:for-item="film" wx:key="id" data="{{...film}}">
</template>
</scroll-view>
|
先寫到這里吧，其他代碼看github上(shang)的即可，具(ju)體(ti)還(huan)是(shi)要多看文檔，寫個(ge)項目練(lian)(lian)練(lian)(lian)，就(jiu)很(hen)容易(yi)上(shang)手(shou)啦！
