5+App下Mui框架开发仿拼多多App
一、整体项目介绍说明
二、页面展示
三、页面实现主要技术和难点
四、关键代码讲解
五、源码资源
一、整体项目介绍说明
“拼多多”App+移动电商管理平台项目是我在专业实训时参加的项目开发,App端高度仿造“拼多多”App完成,我在项目中也主要负责App端的实现。由于App端是由我和另一位同学一起开发完成,为了报护他人成果,这里我主要介绍我完成的部分——App首页、分类、商品下单购买、搜索、历史浏览、活动促销等页面。
由于部分页面之间联系紧密,页面间逻辑性强,直接运行代码可能报错,但我会分页面重点说明下我在开发时遇到的问题,希望对大家有所帮助。
二、页面展示
三、页面实现主要技术和难点
开发时,数据都是前端先写死的,用死数据先把前端的框架布局实现,到后来后台有数据之后,直接请求数据在页面挂载即可,这也是我觉得比较高效的前后端分离开发的方式。
App端首页顶部可滑动导航栏和自动播放(可手动滑动)首页广告区都是利用的mui组件实现的。还算简单,我觉得首页最难实现的就是两行可滑动功能区,利用css样式的flex弹性盒子实现。其他功能实现就相对来说容易些
我觉得做前端开发这块,一定要多想,多做,脑子里有实现想法,一定要敲出来运行看结果,不要大概想想感觉实现不了,就打退堂鼓了,不运行下,怎么知道不行呢。所以,一定要开动脑筋多想、多做。
四、关键代码讲解
可滑动导航及点击事件处理实现完整代码
//获取顶部导航数据并挂载到页面
//首页逻辑:进入app后,顶部导航处在热门区,点击其他导航,请求数据挂载在首页,实现页面内跳转功能
let getNav = {
version: "v1.0",
author: "wmyang",
getNavInfo: function() {
var htmlContentWhole = "";
htmlContentWhole =
`
活动商品
|总有一件商品让你心动
查看更多>
`;
$(".mui-content").html(htmlContentWhole);
$.ajax({
url: "http://39.98.158.247:8040/navigate/get/top",
dataType: "json",
success: function(data) {
// console.log(data);
if (data.status == "success") {
console.log(data);
let htmlContent = "";
let first_nav_name = data.data[0].top_button_name;
htmlContent +=
">${data.data[0].to