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

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

0 引言

眾所周知，微信小程序是一款輕量級的應(yīng)用服務(wù)，是一種“無須安裝，觸手可及，用完即走，無須卸載”的移動端應(yīng)用程序。這一特點滿足了人們隨時隨地操作的使用需求。而Excel表格則擁有處理和分析數(shù)據(jù)的兩大便捷能力，這一功能給廣大工作者帶來了極大的便利。因此，本文的目的則是通過結(jié)合微信小程序和Excel表的優(yōu)勢之處，來設(shè)計一款基于微信小程序的表格辦公微信小程序，去滿足各行各業(yè)的人士所追求更簡單方便的辦公需求。

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

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

微信小程序是一個開放的平臺，開發(fā)者可以快速設(shè)計開發(fā)一個小程序。小程序提供了一個簡單、高效的應(yīng)用開發(fā)框架和豐富的組件及API，能夠幫助開發(fā)者在微信中開發(fā)具有原生APP體驗的服務(wù)。再者，利用微信開發(fā)者工具可以快速搭載目前網(wǎng)絡(luò)通信應(yīng)用框架MINA，其中MINA框架中有四種類型的文件，分別是：

(1)js 文件，基于JavaScript的邏輯層框架；(2)wxml 視圖層文件，類似HTML語言，是MINA設(shè)計的一套標(biāo)簽語言；(3)wxss 樣式文件，類似CSS，用于描述WXML的組件樣式；(4)json 文件，配置文件，用于單個頁面的配置和整個項目的配置。

開發(fā)者通過框架提供的各種接口Java Script API就可以高效地構(gòu)建小程序的頁面，實現(xiàn)與用戶的充分交互。

同時微信開發(fā)者工具還提供了云開發(fā)的功能，其云開發(fā)包含了云函數(shù)、云存儲和云數(shù)據(jù)庫，使得開發(fā)者不必在本地布置服務(wù)器與數(shù)據(jù)庫，服務(wù)器與數(shù)據(jù)庫皆在云端，開發(fā)者只需要通過代碼開發(fā)即可。

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

在線表格編輯技術(shù)是基于SpreadJS控件實現(xiàn)的。SpreadJS 是一款基于 HTML5 的純前端表格控件，Spreadjs兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產(chǎn)品特性，同時Spreadjs可以在 Angular、 React、 Vue 等前端框架中調(diào)用，為開發(fā)者提供了更多的開發(fā)選擇。其集成的數(shù)據(jù)透視、表格樣式等眾多功能，可以為用戶帶來高度類似 Excel 的使用體驗。

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

2.1 小程序的模塊劃分分析

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

圖1

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

云開發(fā)為開發(fā)者提供了云函數(shù)、云存儲和云數(shù)據(jù)庫。在云開發(fā)前，需要開發(fā)者注冊并填寫自己的AppID賬戶。而在微信小程序開發(fā)中，開發(fā)者只需要通過完成一條代碼的編寫便可以進(jìn)行云開發(fā)環(huán)境的初始化。

云開發(fā)為開發(fā)者提供了可視化的開發(fā)環(huán)境后，后臺操作將十分方便，同時對于云函數(shù)、云存儲和云數(shù)據(jù)庫的調(diào)用都只需要在前端頁面進(jìn)行，使用前端語言以及官方提供的API即可完成調(diào)用。

2.3 登錄模塊的實現(xiàn)說明

該小程序需采用微信登錄，小程序登錄需要調(diào)用 auth.code2Session 接口，換取用戶唯一標(biāo)識 OpenID。

從2021年4月起，微信小程序更改了用戶授權(quán)的方式，開發(fā)者需要使用wx.getUserProfile()接口通過button等方式引導(dǎo)用戶點擊授權(quán)才能獲得用戶信息。小程序獲得授權(quán)信息后，便將用戶的信息導(dǎo)入云數(shù)據(jù)庫，但需要注意云數(shù)據(jù)庫中需要進(jìn)行使用篩選，是為了檢測該用戶是否為第一次登錄，進(jìn)而防止用戶信息重復(fù)錄入而導(dǎo)致錯誤發(fā)生。

實現(xiàn)部分代碼如下：

2.4 用戶文件的上傳、刪除和修改名稱的實現(xiàn)說明

開發(fā)時使用wx.chooseMessageFile()函數(shù)，可以使用戶在點擊下方“上傳微信聊天文件”后，通過選擇微信對話框中的文件進(jìn)行上傳，用戶便可以對自己的文件進(jìn)行查看、修改、刪除操作，需要下載保存文件時只需要復(fù)制鏈接即可下載到本地。

通過建立云函數(shù)來實現(xiàn)用戶對云數(shù)據(jù)庫和云存儲的增、刪、改操作，在用戶授權(quán)登錄后，將用戶的OpenID作為數(shù)據(jù)庫的篩選條件進(jìn)行篩選，確保每個用戶只能查看自己的文件。效果圖如圖2所示。

圖2

部分實現(xiàn)代碼如下：

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

表格編輯器使用的是Spreadjs，這是一款純前端控件，使用該控件配合使用vue前端框架以及使用element-ui進(jìn)行頁面布局，就可以打造一個美觀的純前端表格編輯器。

用戶在微信小程序中點擊““功能”頁面后，會跳轉(zhuǎn)到一個離線表格編輯器中，用戶可以在這個頁面實現(xiàn)類Excel的辦公體驗，該頁面使用vue-cli進(jìn)行開發(fā)，是一個獨立的、靜態(tài)的h5頁面。

以下為前端表格編輯頁面的實現(xiàn)步驟與注意事項

(1)在開始前，需要先檢查node環(huán)境與npm是否安裝，在終端輸入：

安裝后，在pakeage.json文件中會顯示成功安裝的依賴。

(4)element與spreadjs的 引 入:在main.js文 件 與App.vue中使用import的方式進(jìn)行引入。

在main.js中進(jìn)行element-ui的引入：

(6)此時頁面已經(jīng)具備了最基礎(chǔ)的離線表格編輯功能，在終端輸入：

$npm run dev

再將返回的網(wǎng)址用瀏覽器打開，便可以對表格頁面進(jìn)行預(yù)覽。

(7)在spreadjs開發(fā)文檔中參考API，可以自由的對于頁面進(jìn)行適當(dāng)布置與修改該頁面類似Excel，擁有著包括函數(shù)、數(shù)據(jù)透視在內(nèi)的眾多功能，保留著Excel原有的操作風(fēng)格，同時兼具快速美化表格的功能，移動端使用起來也比較方便。在有需要時，用戶可以將通過點擊表格左上角的倒三角并且對表格進(jìn)行全選，在點擊套用表格樣式便可以實現(xiàn)表格一鍵美化。

美化后效果圖展示如圖3所示。

圖3

用戶在編輯完表格后，點擊“導(dǎo)出表格”便將可以將文件保存至本地，若用戶需要將表格內(nèi)容分享給他人，則只需要上傳文件保存至小程序并復(fù)制下載鏈接發(fā)送給對方并點擊鏈接即可。

2.6 將表格編輯頁面引入微信小程序

在微信小程序中使用web-view的方式便可以實現(xiàn)h5網(wǎng)頁的內(nèi)嵌，使表格編輯頁面自動鋪滿微信小程序頁面。

將網(wǎng)頁引入微信小程序的代碼如下，演示代碼中的網(wǎng)頁為微信開放文檔頁面：

需要注意的是，web-view功能不支持個人類型的小程序。

3 結(jié)束語

本文通過對于實現(xiàn)微信小程序云開發(fā)表格辦公的實現(xiàn)所需要的核心技術(shù)與功能使用進(jìn)行了詳細(xì)闡述。因此該微信快捷編輯小程序可以很好的為幫助移動端的工作人員辦公以及需要臨時工作辦公的人員進(jìn)行表格辦公，即做到了隨時隨地?zé)o需下載、點開即可使用、高度還原了excel辦公體驗的方便快捷效果。