覃振濱，殷宇航

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

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

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

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

同時(shí)，中國網(wǎng)絡(luò)文學(xué)用戶人數(shù)持續(xù)增長，截至2020年，中國網(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 萬人，累計(jì)創(chuàng)作2 905.9 萬部網(wǎng)絡(luò)文學(xué)作品，網(wǎng)絡(luò)文學(xué)作者累計(jì)超2 130 萬人[3]。

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

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

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

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

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

2.2 模塊功能

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

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

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

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

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

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

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

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

3.1 書籍主頁

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

3.2 書籍分類

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

3.3 我的書架

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

3.4 個(gè)人中心

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

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

3.5 書籍界面

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

3.6 聽書界面

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

3.7 讀書界面

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

3.8 寫書界面

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

3.9 總結(jié)

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

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

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

4.1 小程序的開發(fā)

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

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

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

4.1.2 前端開發(fā)

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

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

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

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

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

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

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

4.2 服務(wù)器的配置

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

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

第二，連接上服務(wù)器后，需要給服務(wù)器安裝寶塔面板方便管理操作。打開寶塔面板的官網(wǎng)，點(diǎn)擊立即安裝到服務(wù)器，復(fù)制CentOS 的安裝腳本粘貼到FinalShell 里回車執(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è)域名，將域名解析定位到購買的云服務(wù)器IP。

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

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

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

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

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

5 結(jié)語

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

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