基于“互聯網+扶貧”的微信小程序設計

董俊岑 胥陳妍 吳夢蝶

摘 ?要：“互聯網+”大學生創新創業大賽的背景下，為緩解中國各地貧困情況，搭建一個周邊購物的微信小程序。首先，基于帶動貧困地區旅游為目的，實現五種功能，Vue.js是目前比較流行的前端框架，需要與Node.js搭配使用，該文所實現項目前端基于Vue.js，后端基于Node.js并且里面使用了MiBootstrap等前端框架。其次，為帶動當地消費，根據當地特色與地域差異而個性化推薦當地產品。然后，小程序還提供游戲模塊，使用戶在娛之中增長知識，同時再平添幾分生活樂趣。

關鍵詞：互聯網+;Vue.js;Node.js;Bootstrap;微信小程序;微信公眾平臺

中圖分類號：TP311.1 ? ? ? ? ? 文獻標識碼：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 ?引 ?言

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

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

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

1 ?需求分析

1.1 ?功能模塊

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

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

1.2 ?開發工具和技術

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

1.2.1 ?開發工具

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

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

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

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

2 ?系統設計

2.1 ?詳細設計

2.1.1 ?第一個開發難點

前端開發環境與Node后端服務器的搭建，首先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

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

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

2.1.2 ?第二個開發難點

微信小程序：

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

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

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

2.1.3 ?第三個開發難點

Esmap的使用，首先需要繪制當地的CAD圖，并利用CAD圖來進行三維模型的構建，構建完畢后，在Esmap上加上自己要標注的地點，Esmap上傳CAD文件就會自動識別并生成三維地圖，但是要想把實地的三維模型建出來還是得花大量時間去修改去調正。

2.2 ?數據庫設計

2.2.1 ?用戶表

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

2.2.2 ?熱門查詢菜單表

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

2.2.3 ?周邊商城菜單

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

3 ?系統實現

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

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

首先導入城市sdk，代碼為：

<！-- 城市sdk -->

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

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

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

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

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

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

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

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

接著是Vue的開發。

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

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

4 ?結 ?論

為響應“打贏脫貧攻堅戰，復興偉大中國夢”的號召，基于微信公眾平臺、硬件設備與echarts等，適配于現實貧困地區環境，具有較強的實用性、便捷性、靈活性，該小程序清晰明了，無論是當地旅游時尋找食宿還是了解地方特產與扶貧產品都簡單快捷。總體來說，與當地旅游業結合能更好地服務于用戶，促進當地經濟發展，考慮到當地的基礎硬件建設與使用方的操作能力，選擇的應用都簡潔方便操作簡單，且并不需要當地過于優良的硬件設備配合，開發、維護與操作都方便容易。

參考文獻：

[1] 劉子瀟.國內外環境對中國經濟發展的影響 [J].中國商論，2021（10）：14-16.

[2] 習近平.脫貧攻堅戰沖鋒號已經吹響 全黨全國咬定目標苦干實干 [N].人民日報，2015-11-29（1）.

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

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

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

[6] 張向偉.Web前端開發技術學習方式探討 [J].電腦編程技巧與維護，2021（3）：40-41.

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