微信小程序-高仿vivo商城

seal_de 发布于2019-08-22 11:19 / 2950人阅读

摘要：说明最近微信小程序也是挺火的了，看了微信官方文档语法和有点相似，正好学过也用写过一个商城项目，就尝试用小程序写个商城，一般来说你学过写个小程序那是很简单的，小程序和无非就是路由跳转传参传数据如果你想学可以来看看我用写的一个商城项目地址在这里

说明

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

如果你想学vue.js可以来看看我用vue.js写的一个商城项目地址在这里
运行需要安装微信开发者工具，在开发者工具中打开该项目则可预览下载地址
另外：此程序会持续更新如果觉可以欢迎各位satr fork Dome地址在这里谢谢大家了~~~

图片预览

微信登陆

</>复制代码 
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
    })
  }
})

购物车功能

</>复制代码 
var json = require("../../data/Home_data.js")
Page({
  data: {
    cartItems:[],
    total:0,
    CheckAll:true
  },
  onLoad:function(e){
    
  },
   onShow: function () {
     var cartItems = wx.getStorageSync("cartItems")
     this.setData({
       cartList: false,
       cartItems: cartItems
     })
     this.getsumTotal()
     
   },
  //选择
   select:function(e){
    var CheckAll = this.data.CheckAll;
    CheckAll = !CheckAll
    var cartItems = this.data.cartItems
    for(var i=0;i

云服务器 GPU云服务器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92187.html

vue2.5全家桶高仿vivo商城百分之95

摘要：全家桶还有就是组件库开头在线预览旧的版本移动端商城新的版本移动端商城项目演示地址移动端商城建议调试手机模式下预览因为刚买的域名主机所以要解析，实名认证才可以浏览，所以你们还是下把项目给下载下来本地运行看把 vue全家桶 vue2.0+vuex+axios+better-scroll还有就是miut-ui组件库开头在线预览旧的版本：vivo移动端商城新的版本：vivo移动端商城项目...

inapt 2019-08-22 17:33 评论0 收藏0
微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
eweapp：ECShop非官方版微信小程序商城

摘要：非官方版微信小程序商城，基于版本接口，兼容原有程序，没有对原有程序代码进行过任何改动。 eweapp ECShop非官方版微信小程序商城，基于3.6版本appserver接口，100%兼容原有程序，没有对原有程序代码进行过任何改动。 GitHub https://github.com/tumobi/eweapp 功能列表首页：轮播图、商城滚动公告、精品推荐、新品上市、销量排行分...

libxd 2019-08-21 16:59 评论0 收藏0