移動(dòng)辦公快捷編輯小程序

謝宇，李艾迪，鄭文怡，黃培敏

（廣東理工學(xué)院，廣東肇慶，536000）

0 引言

眾所周知，微信小程序是一款輕量級(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)單方便的辦公需求。

1 相關(guān)技術(shù)分析

1.1 微信小程序與云開(kāi)發(fā)的相關(guān)技術(shù)說(shuō)明

微信小程序是一個(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ā)即可。

1.2 表格控件的相關(guān)技術(shù)說(shuō)明

在線表格編輯技術(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)。

2 小程序的詳細(xì)設(shè)計(jì)

2.1 小程序的模塊劃分分析

微信快捷編輯小程序總功能結(jié)構(gòu)示意圖如圖1所示。

圖1

2.2 云開(kāi)發(fā)環(huán)境的初始化分析

云開(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)用。

2.3 登錄模塊的實(shí)現(xiàn)說(shuō)明

該小程序需采用微信登錄，小程序登錄需要調(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)部分代碼如下：

2.4 用戶文件的上傳、刪除和修改名稱(chēng)的實(shí)現(xiàn)說(shuō)明

開(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)代碼如下：

2.5 表格編輯器的實(shí)現(xiàn)說(shuō)明

表格編輯器使用的是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)擊鏈接即可。

2.6 將表格編輯頁(yè)面引入微信小程序

在微信小程序中使用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)型的小程序。

3 結(jié)束語(yǔ)

本文通過(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)的方便快捷效果。