wex5 教程
商城设计系列基础 开发文档与页面流程
一 前言
相信很多wex5小白和初学者,在看完官方教程后都跃跃欲试,想做一个工程来检查一下学习成果。
那么,恭喜您,做一次商城,才是直正的检验。我自认为官方案例倒背如流,当面对商城制作时,不知从哪里下手。如果你是初学者,那就可以跟我从商城基础开始,一步步一制作。
先说开发文档与页面流程。商城的页面较多,功能复杂,对技术要求比较全面。如果没有合理的分析开发文档,分析页面流程,不夸张的说,你没法预见用多长的工期制作完成多少个页面,多少个功能,恐怕老板的任务,你自已都不晓得何年何月做完,只是埋头加班。可能最基础的数据库设计都是一团糟。有朋友问我问题,有很多是数据库的问题,非要在前端解决,真是自已给自已找不痛快。但是,一旦把文档分析透彻,可以预见到30个功能面面,以个人开发经验和代码效能来预测到工期,目标明确,分层制作,按部就班,水到渠成。这也是我学习一段时间后的感受。
之所以说是商城系列基础,一方面是本人能力有限,一方面是商城对于商业制作来说,难度大,强度高,我们对于初学者,主要是以基本功着手。所以,基础系列适合刚接触软件开发的法外人士或者半路出家的爱好者,以及刚刚接触wex5的同学。
二 文档功能划分
根据商城的具体功能,借鉴淘宝,闲鱼,京东等,具体功能能细分如下:
1.注册登陆:在这里我们可以注册我们的基本信息,用户可以通过填写注册信息成为会员,登陆后才能进行购物车管理和购买商品,未登陆的会员只能浏览商品。
2.商品浏览:用户可以浏览商品的详细信息,如名称、图片、数量、价格等。
3.商品查询:用户输入关键字,搜索出名称相关的商品。
4.商品分类:用户能够分类浏览所有商品,以及购买。
5.购物车功能:用户对想购买的商品,可以先选择要购买的数量,点击加入购物车,则所要购买的商品就被添加到购物车里。
6.支付方式:支持微信支付或支付宝支付
7.可以微信分享。
8.用户能够留言评论。
9.查看订单:用户在商品订单结算前,能够查看商品和收货地址是否正确。
10.修改个人信息:用户可以修改自己当初注册时的信息。
11 快递收发:用户可以收发快递并填单。
12 用户定位:定位用户当前地址
三 页面流程
1 注册登录:
用户在没有注册之前可以浏览商品,搜索商品,但是不可以购买商品。当进入注册界面,需填写注册所需的用户名、密码、联系电话、送货地址等信息,注册成功后,才可以登录系统购买商品。
2 商品信息:
用户可以对所展现的商品进行浏览,可以浏览商品的详细信息,如名称、图片、数量、价格等。
3 商品查询:
当主页的商品不能满足用户的要求时,用户可以在主页进行商品搜索。
4 商品分类:
用户能够分类浏览所有商品,或分类搜索商品,在分类搜索中,选择一个商品的品牌并可实现多重查询。
5 购物车模块:
用户喜欢的商品可以选择放进购物车里,可以在购物车里产看用户选择的商品的名称价格以及购物车商品的总价,用户可以对购物车中的商品进行操作,修改购买数量,删除商品,清空购 物车,提交购物车等。
6 订单模块:
当完成所有的商品选择之后,就可以在购物车页面单击“确认订单”按钮进入订单信息确认界面以及对所买商品进行结算。
7 支付模块:
完成订单后,用户根据购买信息,选择支付方式进行支付
8 物流模块
根所提示,完成收货及运费填写
四 页面设计框架
当把设计需求与开发文档分析透彻后,对设计目标和个人能力,就有了比较客观的认知。接下来要预测页面数量和设计难度,完工时间
根据以上功能需求,页面如下:
1 登陆页
2 注册页
3 个人信息页
4 头像上传页
5 地址薄选择页
6 地址薄编辑页
7 物流编辑页
8 商品首页
9 商品分类页
10 商品详情页
11 购物车页
12 订单页
13 评论页
14 支付页面
15 后台商品管理页面
16 后台图片上传页
17 后台图片管理页面
五 总结:
如果想技术提升,学习商城设计,不论成果如何,一定能复习你的所有技能,查漏补缺。接下来的基础系列中,我将一步步实现上述页面设计与代码编写。 文档功能分析明白,接下来的数据库设计,理解起来就简单了。
相关视频制作完成,上传优酷。教学app制作中。我是邯郸戏曲开发,tel:15175073123,qq:1017945251
扫描二维码,看高清教学视频。