基于小程序的合作式創(chuàng)新著書(shū)《VR 合書(shū)》創(chuàng)作與搭建＊

覃振濱，殷宇航

（1.廣西大學(xué)行健文理學(xué)院，廣西 南寧 530000；2.廣西大學(xué)數(shù)學(xué)與信息科學(xué)學(xué)院，廣西 南寧 530004）

1 設(shè)計(jì)背景

小程序已經(jīng)嵌套了面向眾多產(chǎn)業(yè)的功能，唯獨(dú)寫(xiě)書(shū)還是停留在幾年前的傳統(tǒng)寫(xiě)作模式上，已經(jīng)無(wú)法滿足用戶對(duì)科技前沿的體驗(yàn)感和創(chuàng)作外生驅(qū)動(dòng)力需求；對(duì)于寫(xiě)作、著書(shū)，由于方方面面壓力的制約，非專業(yè)作家無(wú)法堅(jiān)持地實(shí)現(xiàn)寫(xiě)作任務(wù)和目標(biāo)。如果結(jié)合兩方面，外加外生功能，嵌套新興技術(shù)，便可凝成合力，實(shí)現(xiàn)雙贏，提高社會(huì)福利，增進(jìn)國(guó)民體驗(yàn)，拉動(dòng)創(chuàng)新產(chǎn)業(yè)。

對(duì)于寫(xiě)作著書(shū)方面，有文章報(bào)道表明：截至2021年12 月，中國(guó)網(wǎng)民總體規(guī)模持續(xù)增長(zhǎng)，規(guī)模達(dá)10.32億，互聯(lián)網(wǎng)普及率達(dá)73.0%[1]。

同時(shí)，中國(guó)網(wǎng)絡(luò)文學(xué)用戶人數(shù)持續(xù)增長(zhǎng)，截至2020年，中國(guó)網(wǎng)絡(luò)文學(xué)用戶規(guī)模為4.6 億人，手機(jī)網(wǎng)絡(luò)文學(xué)用戶規(guī)模達(dá)到4.3 億人，手機(jī)網(wǎng)民經(jīng)常使用的各類APP中，網(wǎng)絡(luò)文學(xué)的占比達(dá)到了9%[2]。日均活躍用戶約757.75 萬(wàn)人，累計(jì)創(chuàng)作2 905.9 萬(wàn)部網(wǎng)絡(luò)文學(xué)作品，網(wǎng)絡(luò)文學(xué)作者累計(jì)超2 130 萬(wàn)人[3]。

2020 年11 月，黨的十九屆五中全會(huì)對(duì)文化建設(shè)從戰(zhàn)略和全局上作了規(guī)劃和設(shè)計(jì)，明確提出到2035 年建成文化強(qiáng)國(guó)的戰(zhàn)略目標(biāo)[4]。近年來(lái)，中國(guó)網(wǎng)絡(luò)文學(xué)共向海外傳播作品10 000 余部。其中，實(shí)體書(shū)授權(quán)超4 000部，上線翻譯作品3 000 余部。截至2021 年底，疫情期間，海外網(wǎng)文作家數(shù)量增長(zhǎng)超3 倍，其中“00 后”占比接近60%[5]。

由此可見(jiàn)，隨著自媒體時(shí)代的到來(lái)，寫(xiě)作的高度自由性、全息性和開(kāi)放性是網(wǎng)絡(luò)寫(xiě)作的基本特征。雖然創(chuàng)作門(mén)檻已經(jīng)降低，但出版書(shū)籍呈現(xiàn)出低水平、低質(zhì)量的增長(zhǎng)，主要是因?yàn)楫?dāng)前寫(xiě)作環(huán)境清一色，沒(méi)有創(chuàng)新沒(méi)有活力，主要原因就在于傳統(tǒng)寫(xiě)作思想“一人一書(shū)”，所以，筆者依托開(kāi)發(fā)一個(gè)新的寫(xiě)作環(huán)境，實(shí)現(xiàn)多人續(xù)寫(xiě)，制作一款創(chuàng)新型《ⅤR 合書(shū)》小程序。

2 設(shè)計(jì)思路

2.1 設(shè)計(jì)流程

小程序的開(kāi)發(fā)使用JSP 作為后端開(kāi)發(fā)，JSP 的特點(diǎn)是不需要專門(mén)的客戶端，也不需Java 運(yùn)行環(huán)境，因?yàn)镴SP 輸出到頁(yè)面是標(biāo)準(zhǔn)的HTML 文件，方便配合小程序的前端使用。

2.2 模塊功能

小程序管理后臺(tái)包括新增空白文章、新增特定內(nèi)容的書(shū)籍開(kāi)頭、分種類顯示書(shū)籍、根據(jù)書(shū)籍類型和關(guān)鍵字篩選書(shū)籍、編輯書(shū)籍、刪除書(shū)籍、查看書(shū)籍瀏覽量。

商品管理后端功能如下：①分頁(yè)展示書(shū)籍。將每一本書(shū)籍都展示在主頁(yè)面中，并且限制當(dāng)前頁(yè)面，只顯示部分商品，點(diǎn)擊換頁(yè)按鈕可以實(shí)現(xiàn)瀏覽剩下的商品。②新增書(shū)籍種類。點(diǎn)擊進(jìn)入增加新增商品品類的網(wǎng)頁(yè)中并填寫(xiě)表單添加即可成功添加商品品類。③新增書(shū)籍。點(diǎn)擊進(jìn)入增加新增書(shū)籍的網(wǎng)頁(yè)中并填寫(xiě)表單添加即可成功添加書(shū)籍（包括上傳書(shū)籍封面和書(shū)籍介紹）。④根據(jù)書(shū)籍種類和關(guān)鍵字篩選書(shū)籍。該功能與前端的差別就是不僅可以通過(guò)種類或關(guān)鍵字篩選出想要的商品，還可以聯(lián)合篩選（品牌和關(guān)鍵字的內(nèi)容同時(shí)進(jìn)行篩選）。⑤編輯書(shū)籍。類似于新增書(shū)籍，點(diǎn)擊進(jìn)入編輯書(shū)籍界面后，類似于新增書(shū)籍的頁(yè)面，進(jìn)行表單數(shù)據(jù)的更改后提交即可編輯成功。⑥刪除書(shū)籍。點(diǎn)擊展示的書(shū)籍的當(dāng)前行中的刪除按鈕即可刪除該書(shū)籍。⑦查看書(shū)籍占比。點(diǎn)擊查看書(shū)籍占比即可生成一個(gè)新頁(yè)面來(lái)展示書(shū)籍（通過(guò)餅圖按百分比展示）。

每個(gè)功能之間都是緊密聯(lián)系、不可分的。首先是分頁(yè)展示書(shū)籍功能和點(diǎn)擊書(shū)籍或輸入書(shū)籍名篩選書(shū)籍功能，要篩選出書(shū)籍，就必須要有展示書(shū)籍的功能。再其次，如果要展示書(shū)籍，就必須要有書(shū)籍的增加、編輯等；書(shū)籍刪除的前提也是擁有書(shū)籍，查看書(shū)籍占比也必須要有書(shū)籍才能進(jìn)行實(shí)現(xiàn)。

管理員登錄后頁(yè)面可以展示所有書(shū)籍信息，并且可對(duì)書(shū)籍進(jìn)行新增、刪除、編輯，根據(jù)書(shū)籍種類和關(guān)鍵字篩選書(shū)籍等操作（其他模塊不贅述），來(lái)給小程序前端中的用戶展示信息，同時(shí)也可以查看餅圖來(lái)了解各書(shū)籍在數(shù)據(jù)庫(kù)的占比。

2.3 設(shè)計(jì)思路

小程序搭配使用MySQL 數(shù)據(jù)庫(kù)進(jìn)行文章、評(píng)論和用戶數(shù)據(jù)的存儲(chǔ)。因?yàn)楝F(xiàn)階段MySQL 數(shù)據(jù)庫(kù)的社區(qū)版是免費(fèi)的，且微信小程序擁有以下6 個(gè)優(yōu)勢(shì)：①不用安裝，即開(kāi)即用，用完就走。省流量，省安裝時(shí)間，不占用桌面。②觸手可及。用戶通過(guò)掃碼或者公眾號(hào)等形式直接進(jìn)入小程序，實(shí)現(xiàn)線下場(chǎng)景與線上應(yīng)用的即時(shí)聯(lián)通。③對(duì)于整個(gè)團(tuán)隊(duì)來(lái)說(shuō)，因?yàn)樾〕绦蛴谐墒斓姆桨盖业讓踊贖TML、CSS 和JavaScript，開(kāi)發(fā)成本更低，團(tuán)隊(duì)可以將更多財(cái)力、人力、精力放在如何運(yùn)營(yíng)好產(chǎn)品，做好內(nèi)容本身。④對(duì)于用戶來(lái)說(shuō)，相較于各種APP，微信小程序UI 和操作流程會(huì)更統(tǒng)一，這也會(huì)降低用戶的使用難度。⑤可以隨時(shí)打開(kāi)。當(dāng)你需要的時(shí)候，在微信中有10 大入口50 個(gè)小入口讓你隨時(shí)找到它。⑥小程序?qū)τ脩舻姆?wù)路徑最短。

3 UI 設(shè)計(jì)

整體的前端UI 界面分為書(shū)籍主頁(yè)、書(shū)籍分類、我的書(shū)架、個(gè)人中心四大部分。

3.1 書(shū)籍主頁(yè)

書(shū)籍主頁(yè)從上至下依次為搜索框、循環(huán)輪播圖、熱門(mén)書(shū)籍。通過(guò)搜索框可以搜索具體的書(shū)籍以及用戶名，使用搜索功能的時(shí)候會(huì)記錄下搜索歷史，方便下次使用直接進(jìn)行操作。搜索框下面的輪播圖用來(lái)播放最近熱門(mén)的書(shū)籍和熱門(mén)的續(xù)寫(xiě)，也可以用來(lái)廣播平臺(tái)近期動(dòng)態(tài)。再下來(lái)便是最近熱度高的書(shū)籍，最近的書(shū)籍由運(yùn)營(yíng)人員進(jìn)行閱讀量和點(diǎn)贊評(píng)論的數(shù)據(jù)對(duì)比后顯示在首頁(yè)吸引更多人閱讀。

3.2 書(shū)籍分類

底欄從左到右第二部分為書(shū)籍分類。書(shū)籍分類界面左邊為書(shū)籍的分類，例如武俠、科幻、懸疑、古傳、當(dāng)代，用戶可以直接選擇自己感興趣的書(shū)籍進(jìn)行閱讀。

3.3 我的書(shū)架

底欄從左到右第二部分為我的書(shū)架，在這里會(huì)顯示用戶最近閱讀添加的書(shū)籍以及創(chuàng)作的續(xù)寫(xiě)，方便用戶直接找到未閱讀完的書(shū)籍和續(xù)寫(xiě)書(shū)籍，同時(shí)也增加批量管理和全選的按鈕，提供給用戶一鍵清除的操作。

3.4 個(gè)人中心

底欄的最右邊則為個(gè)人中心界面，用戶要進(jìn)行點(diǎn)贊評(píng)論寫(xiě)書(shū)等操作，就需要在個(gè)人中心登錄。登錄則直接調(diào)用微信小程序的官方接口，調(diào)用wx.login()獲取臨時(shí)登錄憑證code，并回傳到小程序后端的MySQL數(shù)據(jù)庫(kù)。

個(gè)人中心的界面分為消息中心、瀏覽歷史、我的積分、申請(qǐng)審核、幫助反饋、用戶協(xié)議等等。消息中心可以查看別人的評(píng)論并進(jìn)行回復(fù)，還可以查看自己發(fā)出的評(píng)論。瀏覽歷史可以選擇查看閱讀過(guò)的書(shū)籍、點(diǎn)贊過(guò)的書(shū)籍和評(píng)論。進(jìn)行評(píng)論和續(xù)寫(xiě)操作可以獲得積分，用戶續(xù)寫(xiě)稿件的質(zhì)量和通過(guò)率越高，就可以獲得更多積分，高積分的用戶可以解鎖更高難度文章的續(xù)寫(xiě)機(jī)會(huì)以及后期書(shū)籍出版后獲得一定的版權(quán)。申請(qǐng)審核界面用來(lái)提交做平臺(tái)審核。幫助反饋界面則用來(lái)提供常見(jiàn)問(wèn)題的回答，例如怎么進(jìn)行續(xù)寫(xiě)操作、續(xù)寫(xiě)完成該如何發(fā)布等等，以及提供意見(jiàn)反饋的通道。

3.5 書(shū)籍界面

點(diǎn)進(jìn)一本書(shū)籍后，從上到下為書(shū)籍的封面，書(shū)籍的數(shù)據(jù)（例如字?jǐn)?shù)、點(diǎn)贊數(shù)、評(píng)論數(shù)等等），書(shū)籍的介紹，聽(tīng)書(shū)、讀書(shū)、寫(xiě)書(shū)的跳轉(zhuǎn)按鈕，最下面則為參與續(xù)寫(xiě)的用戶，點(diǎn)進(jìn)用戶主頁(yè)還可以看到該用戶所參與續(xù)寫(xiě)的全部書(shū)籍。

3.6 聽(tīng)書(shū)界面

聽(tīng)書(shū)界面最上面為返回和分享按鈕。分享功能方便一鍵將本書(shū)分享給微信好友，中間則是書(shū)籍的封面和書(shū)籍的內(nèi)容，下面則為播放暫停，以及更多功能里面的快進(jìn)、倍速播放等。

3.7 讀書(shū)界面

讀書(shū)界面采用上下滑動(dòng)翻頁(yè)的設(shè)計(jì)，單擊屏幕顯示閱讀進(jìn)度，拖動(dòng)滑塊可以快速選擇章節(jié)，屏幕底欄有目錄、設(shè)置、深色模式切換按鈕。點(diǎn)擊目錄可以看到當(dāng)前書(shū)籍的章節(jié)，設(shè)置里可以調(diào)節(jié)字體大小、背景，可切換閱讀方式為上下滑動(dòng)或者左右翻頁(yè)。點(diǎn)擊深色模式即可切換為深色模式，方便用戶晚上閱讀。

3.8 寫(xiě)書(shū)界面

寫(xiě)書(shū)界面最上面為書(shū)籍的名稱，左右兩邊的按鈕可以快速切換續(xù)寫(xiě)的書(shū)籍，中間則為輸入框，底下為輸入、背景、保存、發(fā)布4 個(gè)按鈕。點(diǎn)擊背景可以切換動(dòng)態(tài)和默認(rèn)的輸入背景；保存按鈕可以保存當(dāng)前續(xù)寫(xiě)的進(jìn)度，方便下次進(jìn)行續(xù)寫(xiě)；發(fā)布按鈕則是發(fā)布續(xù)寫(xiě)完成的文章進(jìn)行審核。

3.9 總結(jié)

用戶首次打開(kāi)小程序即可進(jìn)行閱讀，如果想進(jìn)行點(diǎn)贊、評(píng)論、續(xù)寫(xiě)文章等操作，則需要登錄。登錄成功后，則可以進(jìn)行點(diǎn)贊和評(píng)論的操作。如若要續(xù)寫(xiě)文章，則需要先填寫(xiě)個(gè)人資料進(jìn)行審核，防止續(xù)寫(xiě)時(shí)出現(xiàn)涉政敏感信息，例如危害社會(huì)主義制度，攻擊、否定、違背中國(guó)特色社會(huì)主義制度，攻擊黨和國(guó)家領(lǐng)導(dǎo)人，涉及“臺(tái)獨(dú)”“港獨(dú)”“藏獨(dú)”“疆獨(dú)”，損害國(guó)家及軍警形象，破壞社會(huì)穩(wěn)定等內(nèi)容。所有用戶續(xù)寫(xiě)的文章里面，應(yīng)由運(yùn)營(yíng)人員進(jìn)行審核過(guò)后再發(fā)布。

本小程序核心的亮點(diǎn)為：與ⅤR 技術(shù)的結(jié)合，智能識(shí)別當(dāng)前閱讀和續(xù)寫(xiě)書(shū)籍的內(nèi)容，切換背景和播放音樂(lè)，展現(xiàn)和文章相匹配的場(chǎng)景，營(yíng)造氛圍感。用戶可通過(guò)ⅤR 視角翻書(shū)、聆聽(tīng)、沉浸式閱讀。

4 小程序的開(kāi)發(fā)與上線

4.1 小程序的開(kāi)發(fā)

小程序的開(kāi)發(fā)使用微信開(kāi)發(fā)者工具。

4.1.1 UI 設(shè)計(jì)

UI 設(shè)計(jì)，即我們看到小程序都會(huì)有界面、版面布局、顏色搭配、圖標(biāo)等等。

4.1.2 前端開(kāi)發(fā)

前端開(kāi)發(fā)即把設(shè)計(jì)的UI 還原成有代碼的頁(yè)面以及用戶在小程序里面可以操作的按鈕。比如搜索會(huì)執(zhí)行的MySQL 查詢命令、聽(tīng)書(shū)會(huì)播放音頻等等。

4.1.3 后臺(tái)以及數(shù)據(jù)庫(kù)

比如可以通過(guò)后臺(tái)可以給小程序添加一些內(nèi)容，可以查詢每天有多少用戶編寫(xiě)文章，有哪些新用戶等等。數(shù)據(jù)庫(kù)的作用主要是用于存儲(chǔ)小程序里面的數(shù)據(jù)。如果還用到一些小程序的API 接口，則必須把API 接口開(kāi)發(fā)加入進(jìn)去。

4.1.4 開(kāi)發(fā)小結(jié)

小程序的前端源碼使用微信官方的微信開(kāi)發(fā)者工具進(jìn)行開(kāi)發(fā)，由于小程序的底層是基于HTML、CSS和JavaScript，所以編寫(xiě)起來(lái)和網(wǎng)頁(yè)大致一樣，只是部分函數(shù)和交互需要做適當(dāng)變更。

如果之前用過(guò)Ⅴue 或者react，看著文檔寫(xiě)微信小程序不會(huì)很難。整體開(kāi)發(fā)思路很相似，包括其中的一些語(yǔ)法，基本上都是一樣的。但是筆者們開(kāi)發(fā)的時(shí)候沒(méi)有用框架，用的是原生的微信小程序語(yǔ)言。而且微信小程序有很多自己的API，比如圖片上傳、下載、音頻等等，項(xiàng)目中用到的時(shí)候再找文檔就來(lái)得及。

這次微信小程序開(kāi)發(fā)的難點(diǎn)應(yīng)該就是登錄。如果把登錄流程弄明白了，再開(kāi)發(fā)其他的功能，基本上就是時(shí)間的問(wèn)題了。

4.2 服務(wù)器的配置

平臺(tái)上線首先需要有一臺(tái)服務(wù)器，這里需要做以下五項(xiàng)準(zhǔn)備工作。

第一，在阿里云購(gòu)買(mǎi)一臺(tái)ECS 云服務(wù)器，這里選擇使用CentOS 操作系統(tǒng)，分配公網(wǎng)IPv4 地址，按使用流量計(jì)費(fèi)，這樣能降低花銷。購(gòu)買(mǎi)成功后，重置實(shí)例密碼，使用SSH 連接工具FinalShell 進(jìn)行連接。輸入服務(wù)器的IP 地址、用戶名和實(shí)例密碼即可登錄。

第二，連接上服務(wù)器后，需要給服務(wù)器安裝寶塔面板方便管理操作。打開(kāi)寶塔面板的官網(wǎng)，點(diǎn)擊立即安裝到服務(wù)器，復(fù)制CentOS 的安裝腳本粘貼到FinalShell 里回車(chē)執(zhí)行即可自動(dòng)安裝（大約需要2 min，根據(jù)網(wǎng)絡(luò)和性能而定）。

第三，寶塔面板安裝完成后，在FinalShell 輸入命令bt，即可看到寶塔面板的選項(xiàng)，選擇對(duì)應(yīng)序號(hào)查看面板的登錄賬號(hào)和密碼進(jìn)行登錄。

第四，首次登錄后便會(huì)彈出需要安裝的插件，選勾選Nginx 和MySQL 選擇編譯安裝，等待2 h 左右安裝完成，到這里服務(wù)器已經(jīng)配置完成。

第五，在阿里云選擇購(gòu)買(mǎi)一個(gè)域名，將域名解析定位到購(gòu)買(mǎi)的云服務(wù)器IP。

4.3 小程序的注冊(cè)審核

網(wǎng)頁(yè)搜索打開(kāi)微信公眾平臺(tái)，掃碼登錄，填寫(xiě)個(gè)人信息，注冊(cè)小程序，首次注冊(cè)小程序需要驗(yàn)證主體身份，支付300 元認(rèn)證費(fèi)。

認(rèn)證成功后，便可獲取APP ID（小程序ID）。下載使用微信開(kāi)發(fā)者工具，填入獲取的APP ID 進(jìn)行開(kāi)發(fā)。完成小程序的整體開(kāi)發(fā)后，便需要在微信平臺(tái)上線。

開(kāi)發(fā)完成后，在微信開(kāi)發(fā)者工具右上角點(diǎn)擊上傳，即可提交到微信官方平臺(tái)進(jìn)行審核，審核通過(guò)后，打開(kāi)程序開(kāi)發(fā)設(shè)置，在服務(wù)器配置里面，填上購(gòu)買(mǎi)的域名。

登錄寶塔面板，點(diǎn)擊網(wǎng)站→添加站點(diǎn)，配置為購(gòu)買(mǎi)的域名才可以與小程序進(jìn)行網(wǎng)絡(luò)通信。勾選安裝數(shù)據(jù)庫(kù)提交，這樣在微信搜索打開(kāi)小程序即可進(jìn)行訪問(wèn)。

5 結(jié)語(yǔ)

微信小程序有“無(wú)需安裝，即點(diǎn)即用”的特點(diǎn)，極大地方便了開(kāi)發(fā)者和用戶的使用。隨著互聯(lián)網(wǎng)的進(jìn)一步發(fā)展，小程序開(kāi)發(fā)者能夠獲取到的權(quán)限也在慢慢增加，方便開(kāi)發(fā)者創(chuàng)造更多的功能。

小程序中使用ⅤR 技術(shù)，開(kāi)發(fā)出一個(gè)擁有全新的創(chuàng)作體驗(yàn)和視聽(tīng)體驗(yàn)，可多人續(xù)寫(xiě)、多人參與一本書(shū)籍的創(chuàng)作的小程序，讓寫(xiě)作也實(shí)現(xiàn)共同協(xié)作、共享發(fā)展的理念。同時(shí)還兼顧了出版服務(wù)等多元化方向，具有海納百川的服務(wù)體系、鮮明的應(yīng)用特色、無(wú)窮的創(chuàng)作潛力。通過(guò)創(chuàng)作，為中國(guó)建設(shè)成為文化強(qiáng)國(guó)作出貢獻(xiàn)。