微信小程序之电子商场的设计以及实现

随着移动互联网迅速发展,手机上安装的移动应用越来越多,导致长尾现象严重,浪费了大量的资源。近年来,各大应用提供商相继提出各自的轻型应用解决方案,但都没有成功,微信小程序的出现给业界带来了新的震动。文章对什么是小程序进行了说明,分析了它和以往轻型应用方案的不同,介绍了微信小程序可用的API及其注册开发和适合的应用领域,并对小程序生存和发展中面临的问题进行了分析,最后对其发展前景进行了评估。

随着当今社会的快速发展。社会中移动互联网的发展趋势极为明显且迅速，科技的发展带来了许多需求。手机上安装的应用也越来越多，造成空间占用现象严重，浪费了大量的资源

，近些年来，各个应用面对着这个情况提出了自己的一系列的措施，其中，以腾讯的微信小程序为主，最为成功，

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

微信小程序强在它的关联性，可行性。唯一性，以及大众性：

唯一性指的是一个小程序只能绑定一个微信号来作为其管理的号，在这个管理号中可以进行

管理员身份的确认以及再添加。保证了小程序的根源。由于微信的实名认证.在一定意义上也保证了小程序的合法性，即确认了收益性，在API协议已经明确规定，在这个基础上，也是为了防止小程序新生的那段日期，不法分子利用小程序进行非法信息的倒卖.现在的小程序体系已经能够确保其安全性以及合法性。

可行性指的是在面对长尾现象中，微信小程序以其用时少，方便快捷便于查找，以及在空间中占的位置极少为主。会极大程度上增强用户的体验。

大众性指的是微信小程序面对的开发者是整个社会，主体类型大概分为个人，企业，企业（个体工商户）政府以及媒体，给广大开发者一个开放的平台。

关联性即与其公众号或者个人的微信号进行关联，便于开发者可以更好的了解到客户的体验以及及时对小程序作出修改。小程序作为一种新的开放能力，开发简洁、方便，可以在微信内迅速得到传播，用户体验也更加出色，因为免去了下载、注册等繁琐的流程，也节省了部分空间。

在这个时代，人们已经不是简简单单的为了满足基本的生活需求，为了追求更好的生活需求，同时在疫情的今日，电商的发展趋势有目共睹，们很长一段时间内只会越来越宅，越来越注意保持“安全距离”，自然会越发依赖网购，依赖电商。

疫情确实会对人们生活、社会经济产生负面影响，不过既然它来了，就必须勇于面对。机会总是在危机中诞生，可以说，这次疫情就是电商行业的一块试金石，如果电商行业能够挺过来，那么，电商行业就将会有新的发展和机遇。

于是在这两个趋势的碰撞下，微信小程序的电子商城成为了当代的一大热点！

分而治之

对于微信小程序的建立，我们首先要明确我们需要哪些功能的实现

同时需要什么技术。

前端：微信小程序

后端：数据库：MySQL。语言java。架构：springboot redis 开发环境 visual studio code

代码结构则分为.json后缀的json配置文件。.wxml后缀的wxml配置文件 .wxss后缀的wxss配置文件以及.js为后缀的js配置文件

对于微信小程序的电商平台的设计与制造主要的方法：

首先我们要找到明确我们需要制造什么东西，UI渲染页面，我们需要一个登陆页面，一个个人中心，一个搜索功能（全名搜索或者提示关键字搜索）还需要验证码来保证用户是实名的，确保了平台。对于每一个页面就行优化与功能的实现，其中主要实现功能点分为以下方面：

主要实现功能点：

1.首页搜索（art—template技术）

2、头部导航栏

3、首页Banner轮播（使用swiper）

4、左右商品滑动（使用scroll-view）

5、商品加载更多

6、购物车+个人中心浮动布局

7.view的使用

首页搜索：

Art-template技术是一种高性能的JavaScript模板引擎。Art—template模板具有两种语法，一种是标准语法，一种是原始语法.在使用之前，我们要引入模板const template=require（art—template）我们需要告诉模板我们要拼接的数据，路径在哪里？

const html =template(‘模板路径’, 数据); 在这里，我们要使用的是原始语法，因为原始语法具有着强大的逻辑处理能力。可以帮助我们处理很多事情，同时，我们用到了第三方模块serve-static

功能：实现静态资源访问服务

步骤：

1.引入serve-static模块获取创建静态资源服务功能的方法

2.调用方法创建静态资源服务并指定静态资源服务目录

3.启用静态资源服务功能

Art-template的几大特点

1.性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 倍

2.安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）

3.可在浏览器端实现按路径加载模板

4.2种语法可以选择，并且逻辑处理能力强大

4.支持所有流行的浏览器，

头部导航栏

首先我们要有一个整体的布置思路：包括了logo，导航栏，搜索框

注意点：nav中不可以直接引入a，这样的话搜索引擎会识别为有堆砌关键字的风险。

我们可以使用一个无序列表li来包含a。这样更有条理并且清楚。同时，我们还需要给链接a指定左右padding撑开盒子，避免以后更改网站不可以继续添加文字这一操作。同时也因为每一个链接的文字数不同。由于每个版心都要居中对齐，所以公共类是定义版心。

3、首页Banner轮播（使用swiper）