謝宇,李艾迪,鄭文怡,黃培敏
(廣東理工學(xué)院,廣東肇慶,536000)
眾所周知,微信小程序是一款輕量級(jí)的應(yīng)用服務(wù),是一種“無(wú)須安裝,觸手可及,用完即走,無(wú)須卸載”的移動(dòng)端應(yīng)用程序。這一特點(diǎn)滿足了人們隨時(shí)隨地操作的使用需求。而Excel表格則擁有處理和分析數(shù)據(jù)的兩大便捷能力,這一功能給廣大工作者帶來(lái)了極大的便利。因此,本文的目的則是通過(guò)結(jié)合微信小程序和Excel表的優(yōu)勢(shì)之處,來(lái)設(shè)計(jì)一款基于微信小程序的表格辦公微信小程序,去滿足各行各業(yè)的人士所追求更簡(jiǎn)單方便的辦公需求。
微信小程序是一個(gè)開(kāi)放的平臺(tái),開(kāi)發(fā)者可以快速設(shè)計(jì)開(kāi)發(fā)一個(gè)小程序。小程序提供了一個(gè)簡(jiǎn)單、高效的應(yīng)用開(kāi)發(fā)框架和豐富的組件及API,能夠幫助開(kāi)發(fā)者在微信中開(kāi)發(fā)具有原生APP體驗(yàn)的服務(wù)。再者,利用微信開(kāi)發(fā)者工具可以快速搭載目前網(wǎng)絡(luò)通信應(yīng)用框架MINA,其中MINA框架中有四種類(lèi)型的文件,分別是:
(1)js 文件,基于JavaScript的邏輯層框架;(2)wxml 視圖層文件,類(lèi)似HTML語(yǔ)言,是MINA設(shè)計(jì)的一套標(biāo)簽語(yǔ)言;(3)wxss 樣式文件,類(lèi)似CSS,用于描述WXML的組件樣式;(4)json 文件,配置文件,用于單個(gè)頁(yè)面的配置和整個(gè)項(xiàng)目的配置。
開(kāi)發(fā)者通過(guò)框架提供的各種接口Java Script API就可以高效地構(gòu)建小程序的頁(yè)面,實(shí)現(xiàn)與用戶的充分交互。
同時(shí)微信開(kāi)發(fā)者工具還提供了云開(kāi)發(fā)的功能,其云開(kāi)發(fā)包含了云函數(shù)、云存儲(chǔ)和云數(shù)據(jù)庫(kù),使得開(kāi)發(fā)者不必在本地布置服務(wù)器與數(shù)據(jù)庫(kù),服務(wù)器與數(shù)據(jù)庫(kù)皆在云端,開(kāi)發(fā)者只需要通過(guò)代碼開(kāi)發(fā)即可。
在線表格編輯技術(shù)是基于SpreadJS控件實(shí)現(xiàn)的。SpreadJS 是一款基于 HTML5 的純前端表格控件,Spreadjs兼容 450 種以上的 Excel 公式,具備“高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性,同時(shí)Spreadjs可以在 Angular、 React、 Vue 等前端框架中調(diào)用,為開(kāi)發(fā)者提供了更多的開(kāi)發(fā)選擇。其集成的數(shù)據(jù)透視、表格樣式等眾多功能,可以為用戶帶來(lái)高度類(lèi)似 Excel 的使用體驗(yàn)。
微信快捷編輯小程序總功能結(jié)構(gòu)示意圖如圖1所示。
圖1
云開(kāi)發(fā)為開(kāi)發(fā)者提供了云函數(shù)、云存儲(chǔ)和云數(shù)據(jù)庫(kù)。在云開(kāi)發(fā)前,需要開(kāi)發(fā)者注冊(cè)并填寫(xiě)自己的AppID賬戶。而在微信小程序開(kāi)發(fā)中,開(kāi)發(fā)者只需要通過(guò)完成一條代碼的編寫(xiě)便可以進(jìn)行云開(kāi)發(fā)環(huán)境的初始化。
云開(kāi)發(fā)為開(kāi)發(fā)者提供了可視化的開(kāi)發(fā)環(huán)境后,后臺(tái)操作將十分方便,同時(shí)對(duì)于云函數(shù)、云存儲(chǔ)和云數(shù)據(jù)庫(kù)的調(diào)用都只需要在前端頁(yè)面進(jìn)行,使用前端語(yǔ)言以及官方提供的API即可完成調(diào)用。
該小程序需采用微信登錄,小程序登錄需要調(diào)用 auth.code2Session 接口,換取用戶唯一標(biāo)識(shí) OpenID。
從2021年4月起,微信小程序更改了用戶授權(quán)的方式,開(kāi)發(fā)者需要使用wx.getUserProfile()接口通過(guò)button等方式引導(dǎo)用戶點(diǎn)擊授權(quán)才能獲得用戶信息。小程序獲得授權(quán)信息后,便將用戶的信息導(dǎo)入云數(shù)據(jù)庫(kù),但需要注意云數(shù)據(jù)庫(kù)中需要進(jìn)行使用篩選,是為了檢測(cè)該用戶是否為第一次登錄,進(jìn)而防止用戶信息重復(fù)錄入而導(dǎo)致錯(cuò)誤發(fā)生。
實(shí)現(xiàn)部分代碼如下:
開(kāi)發(fā)時(shí)使用wx.chooseMessageFile()函數(shù),可以使用戶在點(diǎn)擊下方“上傳微信聊天文件”后,通過(guò)選擇微信對(duì)話框中的文件進(jìn)行上傳,用戶便可以對(duì)自己的文件進(jìn)行查看、修改、刪除操作,需要下載保存文件時(shí)只需要復(fù)制鏈接即可下載到本地。
通過(guò)建立云函數(shù)來(lái)實(shí)現(xiàn)用戶對(duì)云數(shù)據(jù)庫(kù)和云存儲(chǔ)的增、刪、改操作,在用戶授權(quán)登錄后,將用戶的OpenID作為數(shù)據(jù)庫(kù)的篩選條件進(jìn)行篩選,確保每個(gè)用戶只能查看自己的文件。效果圖如圖2所示。
圖2
部分實(shí)現(xiàn)代碼如下:
表格編輯器使用的是Spreadjs,這是一款純前端控件,使用該控件配合使用vue前端框架以及使用element-ui進(jìn)行頁(yè)面布局,就可以打造一個(gè)美觀的純前端表格編輯器。
用戶在微信小程序中點(diǎn)擊““功能”頁(yè)面后,會(huì)跳轉(zhuǎn)到一個(gè)離線表格編輯器中,用戶可以在這個(gè)頁(yè)面實(shí)現(xiàn)類(lèi)Excel的辦公體驗(yàn),該頁(yè)面使用vue-cli進(jìn)行開(kāi)發(fā),是一個(gè)獨(dú)立的、靜態(tài)的h5頁(yè)面。
以下為前端表格編輯頁(yè)面的實(shí)現(xiàn)步驟與注意事項(xiàng)
(1)在開(kāi)始前,需要先檢查node環(huán)境與npm是否安裝,在終端輸入:
安裝后,在pakeage.json文件中會(huì)顯示成功安裝的依賴(lài)。
(4)element與spreadjs的 引 入:在main.js文 件 與App.vue中使用import的方式進(jìn)行引入。
在main.js中進(jìn)行element-ui的引入:
(6)此時(shí)頁(yè)面已經(jīng)具備了最基礎(chǔ)的離線表格編輯功能,在終端輸入:
$npm run dev
再將返回的網(wǎng)址用瀏覽器打開(kāi),便可以對(duì)表格頁(yè)面進(jìn)行預(yù)覽。
(7)在spreadjs開(kāi)發(fā)文檔中參考API,可以自由的對(duì)于頁(yè)面進(jìn)行適當(dāng)布置與修改該頁(yè)面類(lèi)似Excel,擁有著包括函數(shù)、數(shù)據(jù)透視在內(nèi)的眾多功能,保留著Excel原有的操作風(fēng)格,同時(shí)兼具快速美化表格的功能,移動(dòng)端使用起來(lái)也比較方便。在有需要時(shí),用戶可以將通過(guò)點(diǎn)擊表格左上角的倒三角并且對(duì)表格進(jìn)行全選,在點(diǎn)擊套用表格樣式便可以實(shí)現(xiàn)表格一鍵美化。
美化后效果圖展示如圖3所示。
圖3
用戶在編輯完表格后,點(diǎn)擊“導(dǎo)出表格”便將可以將文件保存至本地,若用戶需要將表格內(nèi)容分享給他人,則只需要上傳文件保存至小程序并復(fù)制下載鏈接發(fā)送給對(duì)方并點(diǎn)擊鏈接即可。
在微信小程序中使用web-view的方式便可以實(shí)現(xiàn)h5網(wǎng)頁(yè)的內(nèi)嵌,使表格編輯頁(yè)面自動(dòng)鋪滿微信小程序頁(yè)面。
將網(wǎng)頁(yè)引入微信小程序的代碼如下,演示代碼中的網(wǎng)頁(yè)為微信開(kāi)放文檔頁(yè)面:
需要注意的是,web-view功能不支持個(gè)人類(lèi)型的小程序。
本文通過(guò)對(duì)于實(shí)現(xiàn)微信小程序云開(kāi)發(fā)表格辦公的實(shí)現(xiàn)所需要的核心技術(shù)與功能使用進(jìn)行了詳細(xì)闡述。因此該微信快捷編輯小程序可以很好的為幫助移動(dòng)端的工作人員辦公以及需要臨時(shí)工作辦公的人員進(jìn)行表格辦公,即做到了隨時(shí)隨地?zé)o需下載、點(diǎn)開(kāi)即可使用、高度還原了excel辦公體驗(yàn)的方便快捷效果。