基于“互聯(lián)網(wǎng)+扶貧”的微信小程序設(shè)計

董俊岑 胥陳妍 吳夢蝶

摘 ?要：“互聯(lián)網(wǎng)+”大學(xué)生創(chuàng)新創(chuàng)業(yè)大賽的背景下，為緩解中國各地貧困情況，搭建一個周邊購物的微信小程序。首先，基于帶動貧困地區(qū)旅游為目的，實現(xiàn)五種功能，Vue.js是目前比較流行的前端框架，需要與Node.js搭配使用，該文所實現(xiàn)項目前端基于Vue.js，后端基于Node.js并且里面使用了MiBootstrap等前端框架。其次，為帶動當(dāng)?shù)叵M，根據(jù)當(dāng)?shù)靥厣c地域差異而個性化推薦當(dāng)?shù)禺a(chǎn)品。然后，小程序還提供游戲模塊，使用戶在娛之中增長知識，同時再平添幾分生活樂趣。

關(guān)鍵詞：互聯(lián)網(wǎng)+;Vue.js;Node.js;Bootstrap;微信小程序;微信公眾平臺

中圖分類號：TP311.1 ? ? ? ? ? 文獻標(biāo)識碼：A文章編號：2096-4706（2021）24-0004-04

Abstract： In the context of “Internet Plus” college students innovation and entrepreneurship competition， to alleviate poverty in various parts of China， a WeChat applet for shopping around is built. Firstly， for the purpose of driving tourism in poor areas， five functions are realized， Vue.js is a popular front-end framework， which needs to be connected with Node.js， the front end of the project implemented in this paper is based on Vue.js， the back-end is based on Node.js and uses front-end frameworks such as MiBootstrap. Secondly， in order to drive local consumption， we recommend local products according to local characteristics and regional differences. Then， the applet also provides a game module， which make users increase their knowledge in entertainment and add some life fun at the same time.

Keywords： internet plus; Vue.js; Node.js; Bootstrap; Wechat applet; Wechat public platform

0 ?引 ?言

如今全球化趨勢日益明顯，在經(jīng)濟全球化的大背景下，自從2008年全球性經(jīng)濟大危機爆發(fā)后，世界各個國家的經(jīng)濟發(fā)展都陷入低谷，現(xiàn)階段雖然世界各國的社會經(jīng)濟逐漸復(fù)蘇，但總覽全球經(jīng)濟發(fā)展我們依然可以看出國際經(jīng)濟的增長速度十分緩慢。而在國際金融結(jié)構(gòu)崩塌后，首當(dāng)其沖地對我國的經(jīng)濟，尤其是有關(guān)進出口的企業(yè)單位有不小影響[1]。

在我國乃至全球經(jīng)濟低迷的境況下，2015年11月23日，中共中央政治局審議通過了《關(guān)于打贏脫貧攻堅戰(zhàn)的決定》，中共中央總書記、國家主席、中央軍委主席習(xí)近平強調(diào)，消除貧困、改善民生、逐步實現(xiàn)共同富裕，是社會主義的本質(zhì)要求，更是中國共產(chǎn)黨的重要使命[2]?！吨袊r(nóng)村扶貧開發(fā)綱要（2011—2020年）》明確指出：將六盤山區(qū)、秦巴山區(qū)、武陵山區(qū)、烏蒙山區(qū)、滇桂黔石漠化區(qū)、滇西邊境山區(qū)、大興安嶺南麓山區(qū)、燕山-太行山區(qū)、呂梁山區(qū)、大別山區(qū)、羅霄山區(qū)等區(qū)域和已明確實施特殊政策的西藏、四省藏區(qū)、新疆南疆四地州作為扶貧攻堅主戰(zhàn)場[3]。而本文中的七彩扶貧小程序則構(gòu)想運用于以上地區(qū)。

七彩扶貧小程序依托于微信公眾平臺，將微信公眾號作為推廣，小程序作為功能的實現(xiàn)，以此建立一個低成本卻高效的七彩扶貧平臺。既能適用于如今移動支付與網(wǎng)絡(luò)互連的大環(huán)境，并且可進一步帶動貧苦地區(qū)旅游與消費經(jīng)濟的發(fā)展。

1 ?需求分析

1.1 ?功能模塊

公眾號菜單包含了：熱門查詢菜單、周邊商城菜單、小游戲菜單。

其中熱門查詢菜單里包含了空余車位查詢、路線導(dǎo)航查詢、親友尋找、周邊風(fēng)采、天氣查詢五大查詢功能，而周邊商城菜單里包含了周邊好物、有機蔬菜、健康美食、有機水果、買家最愛、扶貧蔬菜、扶貧菜譜、在線客服八大功能，最后小游戲菜單里包含了輸字成詩、名人名言、Hitokoto一言、土味情話、翻譯查詢五大功能。

1.2 ?開發(fā)工具和技術(shù)

本項目的基礎(chǔ)是一套用于構(gòu)建用戶界面的漸進式JS框架，也就是Vue，以Vue3為基礎(chǔ)利用腳手架去加載第三方技術(shù)Esmap的地圖。

1.2.1 ?開發(fā)工具

Vue，是一套漸進式框架，可以自底向上逐層應(yīng)用。其核心庫只關(guān)注視圖層，簡單容易上手，并且方便與第三方庫或者既有項目進行整合，也能為復(fù)雜的單頁應(yīng)用項目提供驅(qū)動[4]。

Esmap，是深圳市易景空間智能科技有限公司創(chuàng)建的用于開發(fā)3D可視化的上網(wǎng)網(wǎng)站，集成了項目管理、代碼編輯、服務(wù)運行環(huán)境，用來制作三維地圖。

Bootstrap，是Twitter公司基于HTML、CSS與JavaScript開發(fā)的非常受歡迎的前端開發(fā)框架。簡潔、直觀的工作模式使Web開發(fā)更加方便快捷[5]。

Jquery，是一個簡潔方便且快速的JavaScript代碼庫，也就是框架，倡導(dǎo)用更少的代碼做更多的事。具有獨特的鏈?zhǔn)秸Z言和短小清晰的多功能接口，且CSS選擇器也高效靈活，與各種主流瀏覽器都兼容[6]。

2 ?系統(tǒng)設(shè)計

2.1 ?詳細設(shè)計

2.1.1 ?第一個開發(fā)難點

前端開發(fā)環(huán)境與Node后端服務(wù)器的搭建，首先Esmap依賴于Vue-cli3，所以第一步我們就要先搭建Vue腳手架，利用node在npm上下載安裝，并且安裝依賴后簡歷一個名稱為client的前端項目，代碼為：

npm install vue-cli -g

或者：

npm install -g @vue/cli-init

vue init webpack “client” //建立一個名稱為client的前端項目

npm install // 安裝依賴

npm run dev

這時如果出現(xiàn)Welcome to Your Vue.js App那么腳手架就安裝好了，接著就要配置后端開發(fā)環(huán)境。

首先還是創(chuàng)建一個server文件夾用于存儲后端代碼，并且用npm init去初始化環(huán)境，接著安裝express和其他模塊，用于搭建后端服務(wù)器的核心模塊是Var http = require（‘http），當(dāng)后端環(huán)境和服務(wù)器搭好后檢查是否有數(shù)據(jù)庫配置文件，控制器，模型，接口，服務(wù)器啟動程序等，緊接著可以測試服務(wù)器是否可以運行，輸入npm start測試，接著測試完后，前端開發(fā)環(huán)境和后端服務(wù)器的搭建就已經(jīng)好了，可以進行前端代碼的編寫和后端后臺模塊的開發(fā)。

2.1.2 ?第二個開發(fā)難點

微信小程序：

首先調(diào)用Esmap室內(nèi)地圖到微信小程序里面需要用到小程序web-view組件，想要通過 web-view 調(diào)用ESMap室內(nèi)地圖需要滿足以下2個條件：

（1）小程序是企業(yè)主體，微信web-view組件不對個人類型的小程序開放。

（2）需要有一個自己的域名，在嵌入網(wǎng)頁的時候需要在微信后臺驗證域名（只有自己域名下的網(wǎng)頁才能被正確地顯示）。

2.1.3 ?第三個開發(fā)難點

Esmap的使用，首先需要繪制當(dāng)?shù)氐腃AD圖，并利用CAD圖來進行三維模型的構(gòu)建，構(gòu)建完畢后，在Esmap上加上自己要標(biāo)注的地點，Esmap上傳CAD文件就會自動識別并生成三維地圖，但是要想把實地的三維模型建出來還是得花大量時間去修改去調(diào)正。

2.2 ?數(shù)據(jù)庫設(shè)計

2.2.1 ?用戶表

用于儲存包括管理員在內(nèi)的所有用戶信息和權(quán)限標(biāo)識，用于用戶登錄和授權(quán)，如圖1所示。主要字段包括用戶名、密碼、性別、年齡，其中密碼存儲時加密字段。

2.2.2 ?熱門查詢菜單表

用于儲存熱門查詢菜單相關(guān)信息，主要字段包括所在市區(qū)、天氣、旅店、停車場、熱門景點，如圖2所示。

2.2.3 ?周邊商城菜單

用于儲存周邊商城菜單內(nèi)容，主要字段為扶貧農(nóng)作物、蔬菜水果，如圖3所示。

3 ?系統(tǒng)實現(xiàn)

首先在微信公眾平臺創(chuàng)建公眾號，并同時再創(chuàng)建一個微信小程序，創(chuàng)建好了以后，設(shè)置好圖片和做圖文消息并掛載到網(wǎng)上，接著開始做微信小程序，微信小程序和微信公眾號如圖4所示。

第一個模塊熱門查詢，路線導(dǎo)航功能的實現(xiàn)主要依靠于第三方技術(shù)ESMap的城市三維地圖中的地圖導(dǎo)航功能，示例如圖5所示。

首先導(dǎo)入城市sdk，代碼為：

<！-- 城市sdk -->

接著定義全局map變量，導(dǎo)航對象，用到了高德地圖的地圖導(dǎo)航功能，在ESMap上自己申請的appKey接著初始化地圖，初始化場景特效和地圖瓦片，設(shè)置第一人稱導(dǎo)航和第三人稱導(dǎo)航，最后實現(xiàn)周邊路線導(dǎo)航功能

第二個功能是空余車位，采用了ESMap中的智慧停車場功能，其中智慧停車場功能包括空余車位引導(dǎo)，車位預(yù)定，搜索查詢，停車路線規(guī)劃，便捷尋車，車位利用率分析等功能。

第三個功能親友尋找功能，用到的技術(shù)是ESMap的室內(nèi)導(dǎo)航技術(shù)，當(dāng)用戶打開手機就可以看見自己的定位，然后，當(dāng)孩子丟失了，就可以根據(jù)室內(nèi)定位去找自己孩子，不用在廣播里喊和求助，具體示例如圖6所示。

第四個功能是周邊風(fēng)采功能，以公眾號圖文消息的形式介紹附近的特色、旅游景點、美食、特產(chǎn)等。

第五個功能是天氣查詢功能。采用的技術(shù)有Vue、JavaScript、SCSS等，根據(jù)網(wǎng)上的天氣API獲取請求，并在Vue所制作的前端頁面上展示。

第二模塊是周邊商城功能，也是我們所做的互聯(lián)網(wǎng)+扶貧的重要模塊，點開后它是一個小程序，里邊有周邊好物，有機蔬菜，健康美食，有機水果，賣家最愛，扶貧蔬菜，扶貧菜譜和在線客服等功能，用到的技術(shù)是微信小程序源開發(fā)，效果如圖7所示。

最后是第三模塊，小游戲模塊，總共有五個功能。第一個是輸字成詩，此模塊用到了ALAPI，HTML5，CSS3，JavaScript和JQuery等技術(shù)，來實現(xiàn)的小游戲功能，輸入四個漢字會返回一首藏頭詩，每一句的開頭第一個字連起來就是用戶輸入的四個漢字。第二個功能是名人名言功能，點擊按鈕就會隨機返回一句名人名言。第三個功能是Hitokoto一言，點擊按鈕并選擇類型就會返回一句讓人感動的話。第四個功能是土味情話點擊按鈕就會隨機生成一句土味情話。第五個功能是翻譯功能，輸入要翻譯的語言，并選擇要翻譯成什么語言，點擊翻譯，就會翻譯成想要的語言。

微信小程序的實現(xiàn)是利用微信開發(fā)者工具，進行源生開發(fā)，首先進行域名驗證，因為微信平臺規(guī)定，web-view指向的地址，必須是在微信小程序后臺登記的域名并且域名要強制https因此還需要配置https證書，所以購買的服務(wù)器必須支持https，接著嵌入帶有室內(nèi)地圖的web-view。

接著是Vue的開發(fā)。

第一步我們就要先搭建Vue腳手架，利用node在npm上下載安裝，并且安裝依賴后建立一個名稱為client的前端文件夾和一個serve服務(wù)器文件夾client用于前端頁面的開發(fā)，用到的技術(shù)有Vue，echarts，和Element-UI，scss等等，首先第一步要在client里搭建Vue腳手架，npm install -g @vue/cli-init

接著把esmap-1.6.min.js文件、地圖相應(yīng)的圖標(biāo)、地圖文件、主題文件放在根目錄 /static 文件夾下，接著在index.html文件下引入esmap sdk并創(chuàng)建一個單獨的地圖容器組件，接著創(chuàng)建地圖并初始化class，最后初始化地圖，就完成了最基本的導(dǎo)入。

4 ?結(jié) ?論

為響應(yīng)“打贏脫貧攻堅戰(zhàn)，復(fù)興偉大中國夢”的號召，基于微信公眾平臺、硬件設(shè)備與echarts等，適配于現(xiàn)實貧困地區(qū)環(huán)境，具有較強的實用性、便捷性、靈活性，該小程序清晰明了，無論是當(dāng)?shù)芈糜螘r尋找食宿還是了解地方特產(chǎn)與扶貧產(chǎn)品都簡單快捷。總體來說，與當(dāng)?shù)芈糜螛I(yè)結(jié)合能更好地服務(wù)于用戶，促進當(dāng)?shù)亟?jīng)濟發(fā)展，考慮到當(dāng)?shù)氐幕A(chǔ)硬件建設(shè)與使用方的操作能力，選擇的應(yīng)用都簡潔方便操作簡單，且并不需要當(dāng)?shù)剡^于優(yōu)良的硬件設(shè)備配合，開發(fā)、維護與操作都方便容易。

參考文獻：

[1] 劉子瀟.國內(nèi)外環(huán)境對中國經(jīng)濟發(fā)展的影響 [J].中國商論，2021（10）：14-16.

[2] 習(xí)近平.脫貧攻堅戰(zhàn)沖鋒號已經(jīng)吹響 全黨全國咬定目標(biāo)苦干實干 [N].人民日報，2015-11-29（1）.

[3] 顧仲陽 ，范小建.集中連片特困地區(qū)成為主攻區(qū) [N].人民日報，2011-12-07（2）.

[4] 曹書銘.基于Vue的數(shù)據(jù)可視化生成系統(tǒng) [J].信息技術(shù)與信息化，2021（10）：128-130.

[5] 何莉.Bootstrap前端框架技術(shù)的應(yīng)用研究 [J].信息記錄材料，2021，22（11）：171-172.

[6] 張向偉.Web前端開發(fā)技術(shù)學(xué)習(xí)方式探討 [J].電腦編程技巧與維護，2021（3）：40-41.

作者簡介：董俊岑（2000—），男，漢族，云南昆明人，本科在讀，研究方向：計算機科學(xué)與技術(shù);胥陳妍（2000—），女，漢族，陜西寶雞人，本科在讀，研究方向：計算機科學(xué)與技術(shù);通訊作者：吳夢蝶（1990—），女，漢族，河北滄州人，講師，碩士研究生，研究方向：圖像處理。