微信小程序高仿vivo商城（小程序商城卖高仿）

微信小程序高仿vivo商城（小程序商城卖高仿）

微信小程序-vivo商城

项目说明

最近微信小程序也是挺火的了，看了微信官方文档语法和vue.js有点相似，正好学过vue 也用vue写过一个商城项目，就尝试用小程序写个商城，一般来说你学过vue.js写个小程序那是很简单的，小程序和vue.js无非就是路由跳转、传参、传数据.

如果你想学vue.js可以来看看我用vue.js写的一个商城项目 地址点这里 刚出来的快应用，可以看看我写的商城项目 地址点这里 运行需要安装微信开发者工具，在开发者工具中打开该项目则可预览 - 另外：微信小程序商城，长期维护版本更新，欢迎大家踊跃 提出建议

目录结构

data — 存放本地数据image — 图片pages — 项目页面文件

项目截图

微信登陆

Page({ /* 页面的初始数据 */ data: { UserImage: '', Username: '', }, /* 生命周期函数--监听页面加载 */ onLoad: function (options) { var _this=this wx.getUserInfo({ success:function(res){ _this.setData({ UserImage: res.userInfo.avatarUrl, Username: res.userInfo.nickName }) } }) }, about:function(){ wx.navigateTo({ url: '../../pages/about/about' , }) }})

加入购物车

var json = require('../../data/Home_data.js')Page({ data:{ HomeIndex:0 }, goPay:function(e){ var Id = e.currentTarget.dataset.id wx.navigateTo({ url: '../../pages/pay/pay?id=' + Id }) }, boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, addcart: function (e) { var cartItems = wx.getStorageSync("cartItems") || [] var exist = cartItems.find(function (el) { return el.id == e.target.dataset.id }) //如果购物车里面有该商品那么他的数量每次加一 if (exist){ exist.value = parseInt(exist.value) + 1 }else{ cartItems.push({ id: e.target.dataset.id, title:e.target.dataset.title, image: e.target.dataset.image, price: e.target.dataset.price, value:1, selected:true }) } wx.showToast({ title: "加入购物车成功！", duration: 1000 }) //更新缓存数据 wx.setStorageSync("cartItems", cartItems) }, onLoad: function (option){ var homeid = option.id var Homedata = json.homeIndex[homeid]; this.setData({ data: Homedata }) }})

购物车功能

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。