基于微信小程序平臺電影播放功能的設(shè)計與實現(xiàn)

瞿 蘇，管乾文

（江蘇旅游職業(yè)學院，江蘇 揚州225000）

一、引言

縱觀目前的產(chǎn)業(yè)布局，移動互聯(lián)網(wǎng)可謂無孔不入。移動互聯(lián)網(wǎng)滲透到各行各業(yè)并促進行業(yè)發(fā)展升級，例如餐飲業(yè)、零售業(yè)等，眾多的B2B網(wǎng)站數(shù)不甚數(shù)。基于微信公眾號平臺推出了訂閱號、服務(wù)號和企業(yè)號。微信小程序無需下載，只需要掃一掃即可在線使用，使用完也無需卸載，非常方便快捷。同時，微信小程序開發(fā)過程簡單容易，基于微信框架，無需太復雜的基礎(chǔ)知識也可以開發(fā)自己的小程序。

二、播放電影設(shè)計過程

（一）需求分析

電影應用小程序包括如下3個主要模塊。

（1）正在熱映：各大影院正在上映的電影列表。（2）即將上映：即將上映的電影列表。（3）電影詳情：電影相關(guān)的介紹信息。

（二）數(shù)據(jù)庫設(shè)計

在“電影”項目中涉及到的主要實體類是電影信息，為了能把焦點放在小程序開發(fā)流程上，可以使用一張單表來保存電影的相關(guān)信息，用一個類型字段來表示是否正在熱映。表結(jié)構(gòu)設(shè)計如表1所示。

表1 電影信息表結(jié)構(gòu)

其中，pic字段只是保存影片圖片的路徑，真正的圖片保存在服務(wù)器public目錄下。

（三）頁面設(shè)計

該小程序主要包括1個項目主體文件、3個頁面、公共函數(shù)文件function.js和通用工具文件util.js，其中，1個項目主體文件和3個頁面構(gòu)成整個項目的主體部分。

項目的主體文件包括：app.js,app.json,app.wxss.3個頁面分別為“正在熱映”、“即將上映”、“電影詳情”。 “正在熱映”位于in_theathers目錄下，包括如下4個文件：in_theathers.js, in_theathers.json, in_theathers.wxml, in_theathers.wxss?！凹磳⑸嫌场蔽挥赾oming_soon 目錄下，包括如下4個文件：coming_soon.js, coming_soon.json, coming_soon.wxml,coming_soon.wxss?！半娪霸斍椤蔽挥赿etail目錄下，包括如下4個文件：detail.js, detail.json,detail.wxml,detail.wxss。

（四）功能實現(xiàn)

1.小程序后臺連接數(shù)據(jù)庫

后臺采用SpringMVC+MyBatis來實現(xiàn)，數(shù)據(jù)庫采用MySQL。為了優(yōu)化數(shù)據(jù)庫連接性能，采用連接池的方式來管理后臺數(shù)據(jù)庫連接，選擇阿里的druid數(shù)據(jù)庫連接池。首先，在pom文件中加入依賴包。保存后，Maven會自動下載依賴包。

在“src”——“main”下創(chuàng)建resources目錄，并在該目錄下新建spring-dao.xml文件和springservice.xml文件，用于配置spring的dao層和service層。如圖1所示。

圖1 工程文件結(jié)構(gòu)

首先看dao層配置文件spring-dao.xml，主要配置了數(shù)據(jù)源連接池datasource、sqlSessionFactory工廠和dao掃描路徑。通過引入連接配置文件，接下來的配置中引用到j(luò)dbc.properties的變量。

在配置sqlSessionFactory時，引入了MyBaties全局配置文件mybatis-config.xml，以及sqkdemapper映射文件路徑，這些文件都位于resource目錄下。Spring-service.xml文件主要配置了服務(wù)掃描包路徑和聲明式事務(wù)管理器。

最后在mybatis-config.xml中添加代碼。這樣就完成了在外面的項目中集成數(shù)據(jù)庫連接池的配置。

2.首頁設(shè)計

首頁設(shè)計首頁電影列表，每個列表項都是如圖所示的形式，主要包括縮略圖、電影名稱、年份、評分、導演和主演，而且可以瀑布流下拉刷新。

對于即將上映列表來說，同樣采用這樣的頁面布局。點擊列表頁面后，進入電影詳情頁面,如圖2所示。

經(jīng)過初步分析，可以確定選擇圖片組件和text文本組件來布局該頁面。接下來創(chuàng)建項目目錄結(jié)構(gòu),如圖3所示。

圖2 電影詳情頁效果

圖3 詳情頁面文件結(jié)構(gòu)

對各目錄的說明如下：

（1）coming_soon:“即將上映”電影列表頁

（2）detail:電影詳情頁。

（3）in_theathers:“正在熱映”電影頁。

（4）functions：公共函數(shù)模塊。

“正在熱映”電影頁in_theathers 的代碼：

因為要實現(xiàn)瀑布流滾動，所以選擇scroll-view組件作為最外層框架，并且通過scroll-y=“true”設(shè)置只允許上下滾動。該滾動視圖上綁定一個滾動到底部事件bindscrolltolowrt=“scrolltolower”，在該事件中刷新影片列表。整個滾動視圖組件的代碼如下：

在滾動視圖內(nèi)部，用來迭代輸出每部電影的信息，這樣在block內(nèi)部，就可以通過film變量來引用整個電影數(shù)據(jù)。接著在block wx:for內(nèi)部添加一個外層view，用于包裝單個影片，并且定義點擊事件。在點擊事件上自定義兩個事件參數(shù)id和title,分別用于當事件發(fā)生時傳遞電影的id和標題到事件處理方式。在最內(nèi)層，用多個分層的view分別展示電影的相關(guān)信息。當電影的評分大于0時顯示評分，小于或等于0時顯示“暫無評分”。

在滾動視圖組件的最底部，根據(jù)標志變量hasMore來決定是否有更多未加載的電影，如果有，則顯示“玩命加載中”；如果沒有，則顯示“沒有更多內(nèi)容了”。此外，還需要將enablePullDownRefresh屬性設(shè)置為true來開啟下拉刷新功能。

3.首頁邏輯層

接下來完成頁面邏輯層處理，在頁面數(shù)據(jù)域定義如下屬性：films用于保存后臺發(fā)送過來的電影數(shù)據(jù)列表。當后臺沒有更多數(shù)據(jù)時，將hasMore設(shè)置為“false”，這樣頁面底部會顯示“沒有更多數(shù)據(jù)”，start表示獲取電影列表的開始索引號。利用頁面的onload函數(shù)可以在后臺查詢電影列表信息。

4.首頁后臺實現(xiàn)

為了在后臺程序中提供電影信息查詢功能，首先將電影封裝成一個實體類Film，其中的屬性和后臺數(shù)據(jù)庫字段對應，采用MyBatils實現(xiàn)持久化層：

5.詳細頁設(shè)計

單擊列表頁的電影項時，會打開電影詳細頁。通過e-currentTarget.dataset獲取當前電影的id和標題，并作為參數(shù)傳遞到detail頁。

6.詳細頁后臺實現(xiàn)

在后臺添加一個處理方法來獲取電影的詳情數(shù)據(jù)。

首先在后臺的FilmService.java中增加一個服務(wù)方法Public film getFilmDetail(string id)，用于獲取單條電影記錄的詳情，代碼如下：

該方法中調(diào)用Dao層的getFilmById方法，并將電影id 作為參數(shù)傳入。其中，filmDao是通過注解注入的dao對象。接著在dao層的實現(xiàn)類FilmVaoImpl.java中增加一個方法Public film getFilmDetail(string id)。再調(diào)用session.selectOne，向數(shù)據(jù)庫查詢單條記錄，其中第一個參數(shù)是映射文件FilmDao.xml中的語句id。

在控制器中添加方法getFilmDetail,該方法對應的處理器路徑是getDetail,并且通過注解@ResponseBody將返回的film對象自動轉(zhuǎn)換為Json格式的字符串。當在小程序調(diào)用時，將以json字符串的格式返回單條電影記錄的信息。

最后，將獲得的數(shù)據(jù)設(shè)置到詳情頁面數(shù)據(jù)域中的film屬性中，That.setData({film:data})。

三、結(jié)語

介紹了利用微信小程序平臺開發(fā)播放電影的過程，詳細介紹了播放電影小程序的需求分析、數(shù)據(jù)庫表設(shè)計、頁面設(shè)計、功能實現(xiàn)的過程，直到小程序?qū)崿F(xiàn)。