论文总字数：20686字

摘 要

随着科技和经济的不断发展，传统的人工盘点方式显得日益复杂，，存在着许多问题，如工作量大、人为记录错误、未按照盘点计划执行等问题， 所以，盘点工具就显得尤为重要。同时，随着前端开发技术的不断发展，页面逐渐从静态向动态发展，随着功能的增多，代码越来越复杂，导致代码的可重用性，拓展能力也随之下降。使用微信小程序作为前端可以最大程度的减少此类问题带来的困扰。而且微信也是使用人数最多的通讯工具。大部分人的手机都有微信的存在，通过微信小程序的方式进行盘点，还可以省去额外下载APP的烦恼，通过微信就可使用，使用起来更加方便快捷。也必将成为未来的主流，所以，使用微信小程序的开发也成了重中之重。

所以在本文中，提出了基于微信小程序开发盘点小工具，实现多人在线盘点，免去站级输入盘点商品等信息；同时借助于盘点规范油站盘点计划。从而优化盘点过程，使盘点更为方便快捷。

因此，根据本文作者在项目开发中的经验，本文详细介绍了所采用的开发工具，平台和开发环境，并在此基础上，详细的介绍了本项目的详细设计与需求分析和对项目的初步测试，并在结尾对小程序开发的未来进行了展望和思考。

关键字：WEB前端 微信小程序 界面优化 交互设计

Abstract

With the continuous development of technology and economy, the traditional manual inventory method is increasingly complicated. There are many problems, such as large workload, human error, and failure to follow the inventory plan. Therefore, inventory tools are particularly important. At the same time, with the continuous development of front-end development technology, the page gradually develops from static to dynamic. As the function increases, the code becomes more and more complex, resulting in reusability of the code and the ability to expand. Using the WeChat applet as a front end can minimize the problems caused by such problems. And WeChat is also the most used communication tool. Most people's mobile phones have the existence of WeChat, and they can be counted by means of WeChat applet. They can also save the trouble of extra downloading APP, and can be used through WeChat, which is more convenient and quick to use. It will also become the mainstream of the future, so the development of using WeChat applet has become a top priority.

Therefore, in this paper, we propose to develop inventory tools based on WeChat applet to realize multi-person online inventory, eliminating the need to input inventory items and other information at the station level. At the same time, we use the inventory to standardize the oil station inventory plan. Thereby optimizing the inventory process, Therefore, according to the author's experience in project development, this paper introduces in detail the development tools, platform and development environment, and on this basis, the detailed design and requirements analysis of the project and the preliminary analysis of the project are introduced in detail. Tested and looked at the future of small program development at the end.

Keywords: WEB front end WeChat applet interface optimization interaction design

目 录

摘要 Ⅰ

Abstract Ⅱ

第一章 引言 1

1.1 研究背景 1

1.2设计目标 1

1.3方案实现 2

1.4项目价值 2

1.5本章小结 2

第二章 微信小程序开发及相关技术 3

2.1微信小程序开发环境 3

2.2 微信小程序开发工具 3

2.3 相关技术 3

2.3.1 HTML 3

2.3.2 JSON 4

2.3.3 CSS 4

2.3.4 JavaScript 5

2.3.5 Mock.js 6

2.4本章小结 6

第三章 需求分析 7

3.1功能需求分析 7

3.2性能需求分析 8

3.2.1 信息渲染机制需求与分析 8

3.2.2 页面加载性能需求与分析 9

3.3本章小结 10

第四章 概要设计 11

4.1系统整体架构 12

4.2系统功能设计 12

4.2.1 陈列单设置功能设计 12

4.2.2 盘点功能设计 12

4.2.3 核券/销券功能设计 13

4.3本章小结 13

第五章 具体实现 14

5.1 授权界面 14

5.2 绑定界面 15

5.3 功能界面 16

5.4 utils工具类 18

5.5本章小结 18

第六章 项目测试 19

6.1 测试目的 19

6.2 测试环境 19

6.3 测试方法 19

6.4 测试结果 19

6.5本章小结 23

第七章 总结与展望 24

7.1 项目总结 24

7.2 项目展望 24

7.3 本章小结 24

致谢 25

主要参考文献 26

第一章 引言

1.1 研究背景

库存是企业为转售的最终目标而持有的商品和材料，而盘点则是相当于库存管理，是定期或临时检查库存的商品的种类和数量的操作，为了了解商品的动态（出库或入库），检查库存商品的实际的数目与账户上记录的数目是否相符，能够更准确地了解库存数量的变化。最主要的方式便是人工盘点，而目前基于人工盘点的方式，存在着许多的问题，如工作量大、人为记录错误、未按照盘点计划执行等问题，所以便想开发盘点小工具，实现多人在线盘点，免去站级输入盘点商品等信息；同时借助于盘点规范油站盘点计划。随着前端开发技术的不断发展，页面逐渐从静态向动态发展，随着功能的增多，代码越来越复杂，导致代码的可重用性，拓展能力也随之下降。使用微信小程序作为前端可以最大程度的减少此类问题带来的困扰。同时，微信也是使用人数最多的通讯工具。便想通过微信小程序的方式进行盘点，还可以省去下载的烦恼，通过微信就可使用，使用起来更加方便快捷。还可以借助微信直接扫描条形码来完成商品信息的录入，免去了盘点机的烦恼，从而使得盘点员仅需使用手机微信小程序即可轻松完成盘点，节省了大量人力物力，还节约了时间。因此，开发基于微信小程序的盘点小工具具有了重要意义。

设计目标

1. 页面设计符合企业文化，简单，实用，美观。
2. 小程序运行安全稳定且善于维护。
3. 不同的模块能满足用户对不同模块的要求。
4. 利用组件化思想将后台管理系统的布局、样式、页面组件化，实现具体功能展示页面的功能可插拔性。即在不同地域、不同用户组实现的功能存在差异，如需要增加或删除功能，只需要增加或去掉组件，实现敏捷开发的总体目标。
5. 实现前后端除数据交互以外，完整分离。即实现在没有后端数据接入的情况下，启用本地测试数据也能够完整实现前端逻辑。
6. 父子组件通信时没有后端介入，如增删改查和用户信息传递时，实现信息完整联动。优化页面性能。
7. 能够满足用户对性能的需求，给用户优良的使用体验

方案实现

研发这个基于微信小程序的盘点小程序就是为了减少人为盘点的错误，或统计的误差并完善总公司的管理需求，使其对每一个站点的管理更加方便。

1. 当需要盘点时，能够帮助盘点员准确而快速地盘点。
2. 帮助总公司对盘点员的人员，权限进行管理。
3. 当发生错误的时候，能够使用户准确而快速地调整。

1.4 项目价值

随着前端开发技术的不断发展，页面逐渐从静态向动态发展，随着功能的增多，代码越来越复杂，导致代码的可重用性，拓展能力也随之下降。使用微信小程序作为前端可以最大程度的减少此类问题带来的困扰。而且，随着通信能力的不断提升，随着5G的研发，将来的程序必然脱离APP走向网页与小程序的方向。我们现在开始学习使用，可以为我们未来的发展打下基础，具有很强的战略意义，而且，此项目提供给用户使用也有很强的使用价值。所以，在我看来，此项目具有很高的研发价值。

1.5本章总结

本章节为引言，首先简要的介绍了人工盘点问题的背景及现状，并提出了相关可行方案，然后介绍了本方案的可行目标，最后对本方案可实现的诉求和本项目的价值进行了总结

第二章 微信小程序开发及相关技术

2.1微信小程序开发环境

微信小程序的开发与平常的html网页开发在大体上是相同的，都是用代码实现业务逻辑。网页前端主要是通过页面设计与用户交互设计间的合理配合，合理的编写代码来优化用户的使用体验，微信小程序则是使用了JSON，XML，CSS，JavaScript来作为基本构建项目语言。

2.2 微信小程序开发工具

该软件简称为“微信开发者工具”或“微信网络开发者工具”，虽然仅用于开发微信小程序。但它提供了开发人员从IDE要求的所有基本功能：代码版本和模拟器。由此可以看出，微信决定从头开发自己的IDE，而不是使用任何Eclipse或IntelliJ作为实现其目标的基础。这是一个选择，结果还可以。使用该工具可以使用现有的示例代码轻松创建新项目，并将其运行到集成模拟器中。它基本上是在WeChat shell中的Web开发。可以获取用户信息，存储本地文件并恢复它，使用标准Javascript绘图库绘制任何您想要的内容等...

同时，该开发者工具也具有微信模拟器，可以编译测试我们的微信小程序，可以使用运行速度非常快的集成微信模拟器。使用它，能够以与在Chrome上运行的Web应用程序相同的方式调试应用程序。

2.3相关技术

2.3.1 HTML

HTML的定义是超文本标记语言。超文本是您在网络上移动的方法 ，通过单击称为超链接的特殊文本，您将进入下一页。它是超级的事实只是意味着它不是线性的 - 即你可以随时通过点击链接去互联网上的任何地方 - 没有固定的顺序来做事情。标记是HTML标记对其中的文本所做的事情。它们将其标记为某种类型的文本。HTML是一种计算机语言，因为它具有与任何其他语言一样的代码字和语法，旨在允许网站创建。然后，任何连接到互联网的人都可以查看这些网站。它相对容易学习，大多数人一次性就可以使用基础知识;并且它允许你创建的东西非常强大。在负责设计和维护语言的组织W3C的指导下，它正在不断进行修订和演变，以满足不断增长的互联网用户的需求和要求。

剩余内容已隐藏，请支付后下载全文，论文总字数：20686字