基于“互联网+扶贫”的微信小程序设计

董俊岑 胥陈妍 吴梦蝶

摘  要：“互聯网+”大学生创新创业大赛的背景下，为缓解中国各地贫困情况，搭建一个周边购物的微信小程序。首先，基于带动贫困地区旅游为目的，实现五种功能，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—），女，汉族，河北沧州人，讲师，硕士研究生，研究方向：图像处理。