首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    「大众点评点餐」小程序开发经验 04:逻辑层

    文 | 潘逸 潘逸,美团点评工程师,2 年 Web 开发经验,现在是美团点评点餐团队的一员。...但小程序的逻辑代码,与我们平常编写的 JS 还是有一些区别的。 在接下来的文章中,我会根据实际代码,进行说明。 首先,我们看看逻辑层代码结构: ?...作为逻辑层,我们只需要关注小程序逻辑文件 app.js 和页面逻辑文件 menu.js。 App 和 Page App 小程序提供了 App 方法来注册整个小程序。...比如我们在购物车下完单之后回到菜单页可能会需要进行菜单的刷新,我们在购物车页面就会调用 getApp().data.menuRefresh = true,然后在菜单页的 onShow 方法进行判断,例如...模块化 小程序是支持模块化的,并且支持 Common.js 的模块化写法,也就是 module.exports 或者 exports。

    75710

    使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    通过使用JavaScript和Vue.js框架,开发者可以实现电子商务网站的商品展示和购物车功能。商品展示功能可以让用户浏览和搜索各种商品,并查看详细的商品信息和图片。...购物车功能则可以让用户将感兴趣的商品加入购物车体验,并随时查看购物车中的商品和总价。具体数据分析:在电子商务网站中,商品展示是非常重要的一部分。...首先,我们需要安装Vue.js和相关的依赖。可以通过以下命令来安装:npm install vue接下来,我们将创建一个Vue.js应用程序,并在其中编写我们的爬虫代码。...未来,我们可以进一步优化商品展示和购物车功能,增加搜索和推荐功能,提升网站的安全性和稳定性。同时,我们也可以考虑使用其他技术和框架来扩展网站的功能,例如开发技术和数据库管理。...总结:介绍了如何使用JavaScript和Vue.js框架开发电子商务网站,并实现商品展示和购物车功能。通过爬虫技术获取商品信息,我们可以将这些数据展示在网站上,为用户提供良好的购物体验。

    45230

    亚马逊无人黑科技上新,这次瞄准的是购物车

    这次,黑科技浓缩到购物车上,亚马逊希望不仅像自己这样的高级科技公司能在自家超市用上无人购物,那些没有“天眼”的普通商店也能通过这种智能购物车进行自动结账。...当你完成购物后,只需把购物车推到一个专有通道上,即可实现自动结账! Dash Cart 这个购物车都用到了什么技术呢?...官网的介绍依然很简单,“购物车结合了计算机视觉算法和传感器融合功能,可以识别放入购物车中的物品。”...再来看看购物车的显示屏能干啥,官方表示,在显示屏上可以看到购物清单及价格以检查购物车的识别是否准确。此外,每辆购物车都配有优惠券扫描仪,简直是个省钱小能手。...首先,这个购物车怎么和你的账户关联起来呢? 操作很简单,这就需要我们拿到购物车的时候先打开亚马逊的App,找到自己的二维码,对着购物车的显示屏扫一下就可以了。

    79130

    【畅购商城】购物车模块之查看购物车

    cart.getData().values()); } 前端实现:显示页面 步骤一:创建 ~/pages/flow1.vue 组件,拷贝 ~/static/flow1.html内容 步骤二:导入js.../cart1.js' }, ] }, 步骤三:添加公共组件 import TopNav from '...../cart1.js' }, ] }, components: { TopNav, Footer, }, } ​​​​​​​前端实现:显示购物车信息...步骤一:修改api.js 查询购物车信息 步骤二:页面加载成功后,获得购物车信息(如果登录从后端获取,如果没有登录从浏览器端获得) 步骤三:遍历显示购物车信息, 步骤四:通过计算属性,计算总价格 步骤一...:修改apiclient.js 查询购物车信息 //查询购物车 getCart : () => { return axios.get("/cart-service/carts") }

    1.2K20

    微信小程序之购物车的交互场景

    目录 前言 购物车交互场景 说明: 浏览效果:  说明2: shouye.wxml: shouye.wxss: shouye.js: 代码讲解: ---- 我是c站的一个小博主,近期我会每天分享前端知识包括...全局文件app.js和所有的页面js文件都是由JavaScript来编写的,JavaScript代码主要实现业务逻辑处理和用户交互两方面的作用。...30rpx 20% 0 20%; display: flex; flex-direction: row; justify-content: space-around; } shouye.js...1.为"加入购物车"按钮定义了事件函数addCart(),用于实现当用户点击"加入购物车"时,一次性向购物车添加num件商品。...当用户由加购物车行为,及点击了"加入购物车"按钮时,hasCart被赋值为true,则在购物车图标下方出现"购物车已有{{数量}}"

    76340

    一个简单的购物商城,记录一下。

    ':'购物车','返回':'返回','退出':'退出'}, 5 '洗衣机':{'美的':'¥999','海尔':'¥1099','奥克斯':'¥1599','购物车':'购物车','...'摄影机':{'索尼相机':'¥19999','佳能':'¥1999','尼康':'¥6999','购物车':'购物车','返回':'返回','退出':'退出'}, 15 '购物车':...','佐丹奴':'¥339','购物车':'购物车','返回':'返回','退出':'退出'}, 23 '购物车': '购物车', 24 '返回':'返回', 25...)) #浮点计算,float为浮点,这里strip用来去掉字符串的符号, 47 # sum()求和函数,这里用来计算列表js_list中所有元素的总和,js_list中为每个商品购买的总价...)) #浮点计算,sum(js_list)为列表js_list所有元素总和 92 print('本次购物总计消费¥%s元' % (float(sum(js_list))

    94520

    商城项目-未登录购物车

    不过,在我们的common.js中,已经对localStorage进行了简单的封装: ? 示例: ? 3.1.3.获取num 添加购物车需要知道购物的数量,所以我们需要获取数量大小。...添加完成后,页面会跳转到购物车结算页面:cart.html 3.3.查询购物车 3.3.1.校验用户登录 因为会多次校验用户登录状态,因此我们封装一个校验的方法: 在common.js中: ?...this.carts; }) } } components: { shortcut: () => import("/js.../pages/shortcut.js") } }) 刷新页面,查看控制台Vue实例: ?...要注意,价格的展示需要进行格式化,这里使用的是我们在common.js中定义的formatPrice方法 效果: ? 3.6.修改数量 我们给页面的 + 和 -绑定点击事件,修改num 的值: ?

    2.4K20

    【畅购商城】购物车模块之修改购物车以及结算

    目录 购物车操作:修改 分析 接口 后端实现:更新 前端实现:修改 前端实现:全选 后端实现:删除数据 结算 跳转页面 购物车操作:修改 分析 接口 PUT http://localhost:10010...} catch (Exception e) { return BaseResult.error("失败"); } } 前端实现:修改 步骤0:修改apiclient.js...js 步骤0:修改apiclient.js,添加 updateCart函数 updateCart : ( params ) => { return axios.put("/gccartservice...代表如果在 watch 里声明了之后,就会立即先去执行里面的handler方法       deep: true      //深度监听,常用于对象下面属性的改变     }   }, 步骤四:删除之前绑定js...stylesheet',href: '/style/fillin.css'}, ], script: [ { type: 'text/javascript', src: '/js

    99820

    Vue实现电商网站项目

    shopping.git 安装依赖: npm install 启动项目: npm run dev 运行环境: node v9.11.1 npm 5.6.0 需求分析 登录页面、商品列表页(网站首页)、购物车页...(实现结算)、商品详情页 可按颜色、品牌对商品进行筛选,单击选中,再次点击取消 根据价格进行升序降序、销量降序排列 商品列表显示图片、名称、销量、颜色、单价 实时显示购物车数量(商品类别数) 购物车页面实现商品总价...、总数进行结算,优惠券打折 数据存储 & 数据处理 product.js存放商品数据(生产环境需通过接口调用获取数据) { id: 1, name: 'AirPods', brand...resolve(); }, 500); }); }, } }); 后记 本项目是参考iview作者Aresn书写的《Vue.js...在原项目上新增了登录功能 项目地址: github 参考资料 Vue.js实战 Vue.js

    11.4K54
    领券