概述

这是一个微信小程序的商城应用,功能包括了首页、分类、购物车、个人中心、商品列表、商品详情、订单、地址管理等

详细

一、准备工作

1、电脑需要安装有 微信web开发者工具,如果没有请点击这里安装:下载地址

2、成为微信小程序开发者,到微信公众号平台注册一个账号。需要用到appkey

二、程序实现

1、项目目录如下:

主要页面代码都放在components文件夹下面,每个页面包含wxml,wxss,js,json四种格式的文件。

模块说明:

index即主页,

address是地址管理,

cart是购物车,

category是分类,

detail是商品详情,

list是商品列表,

orders是订单管理,

user是用户中心。

最外层的app.json 是小程序的配置文件。

可以设置小程序的基础配置。不清楚的可以查看官方文档

(注意:页面里面的数据为静态写死的数据。)

三、运行效果

只需打开微信web开发者工具,打开时选择本项目文件夹,就会在开发者工具中打开了,可以正常的运行了。如果需要在手机上预览,可以在微信开发者工具中打开预览,通过手机扫描二维码即可预览。要预览就需要appkey,也就是上面准备说要先注册一个小程序开发者账号才有appkey.

运行截图如下:

四、其他补充

1、现在也有一些小程序商城是基于我这个项目代码稍微改造一下然后上线的。比较方便快捷。

2、关于购物车的功能,我有一篇文章让你更熟悉使用代码:微信小程序之购物车功能

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

微信小程序的零食商城的更多相关文章

  1. 毕业设计代做,各种系统微服务项目ssm项目,员工管理系统,微信小程序,购物商城,二手商城系统,销售系统,等等

    毕业设计代做,各种系统,微服务项目,ssm项目 小程序,商城等,期末作业等都可以,价格好说,长期接单, 有项目说明书,软件介绍相关文档,答辩的时候包过,知识点对接好,给你讲解等, 毕业设计代做,各种系 ...

  2. 微信小程序实战(商城)

    github地址(欢迎star):https://github.com/xiaobinwu/dj 版本:0.15.152900(暂未升级原因:升级后需要图片无法本地引用,必须使用image或是远程路径 ...

  3. Odoo 开源微信小程序商城模块

    详见:http://oejia.net/blog/2018/09/13/oejia_weshop_about.html oejia_weshop Odoo 微信小程序商城模块 oejia_weshop ...

  4. vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

    一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...

  5. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  6. 微信小程序开源项目库汇总

    最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...

  7. 微信小程序开源项目库集合

    UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...

  8. 微信小程序一:微信小程序UI组件、开发框架、实用库

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/8079095.html 内容持续更新,维护中 邮箱 ...

  9. 微信小程序基础之开源项目库汇总

    awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...

随机推荐

  1. Accepting PayPal in games(完整的Paypal在Unity的支付)

      Hello and welcome back to my blog! In this article I’m going to talk about the process of acceptin ...

  2. andriod 文本居中: android:gravity="center"

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  3. 基于curl的异步http实现

    简述用于windowsclient的一个异步http模块的实现 1.须要实现的feature 1.1 非常easy地发起异步http请求,然后回调. 1.2 可以管理http并发数. 1.3 可以支持 ...

  4. bat薪酬

    三大互联网巨头公司,百度腾讯跟阿里如何划分级别?薪资待遇又有多少?除非身居其位,否则很难探知,但是等你到那个位置知道了,却又不能说,至少不能在公 开场合谈论.接下来就为大家揭秘,百度.阿里与腾讯内部的 ...

  5. 【BZOJ】【3671】【NOI2014】随机数生成器

    贪心 嗯……其实生成这个矩阵就是一个$O(n^2)$的模拟 = = 然后?字典序最小?贪心呗= =能选1就选1,然后能选2就选2…… 我们发现,对于矩阵(1,1)~(n,m),假设1的位置是(x,y) ...

  6. [15] 星星(Star)图形的生成算法

    顶点数据的生成 bool YfBuildStarVertices ( Yreal radius, Yreal assistRadius, Yreal height, Yuint slices, YeO ...

  7. Multi-label && Multi-label classification

    Multi-label classification with Keras In today’s blog post you learned how to perform multi-label cl ...

  8. spring cloud 报错Error creating bean with name 'hystrixCommandAspect' ,解决方案

    spring cloud 升级到最新版 后,报错: org.springframework.beans.factory.BeanCreationException: Error creating be ...

  9. T-SQL with as 的用法(转) SQL 下的递归查询 SQL2005(CTE) ,SQL2000(Function 递归)

    摘自: http://blog.csdn.net/bluefoxev/article/details/6779794 ------- SQL2005 方法 一.WITH AS的含义     WITH ...

  10. Inside GDALAllRegister之一: 五大部分

    基本信息 在GDAL的Tutorial中开篇即提到GDALAllRegister函数,它会注册所有已知的驱动,包括动态库自动加载的驱动.最关键是这句话: If for some application ...