概述

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

详细

一、准备工作

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. java执行ping命令

    public static void get() throws IOException{ String address="10.132.118.110"; Process proc ...

  2. Android之应用内部实现国际化

    这篇文章也提供了应用内部转换语言的方法: http://blog.csdn.net/sodino/article/details/6596709 .1和2的方法是一样的,然而还是会调整了手机的语言设置 ...

  3. Jetty学习二:配置概览-怎么配置Jetty

    Jetty POJO配置 Jetty的核心组件是Plain Old Java Objects(POJOs):配置Jetty的大部分工作就是在Jetty POJOs上的初始化.装配和设置域的处理,你能通 ...

  4. 详解Spring中的Profile

    前言 由于在项目中使用Maven打包部署的时候,经常由于配置参数过多(比如Nginx服务器的信息.ZooKeeper的信息.数据库连接.Redis服务器地址等),导致实际现网的配置参数与测试服务器参数 ...

  5. JDBC操作数据库的批处理

    在JDBC开发中,操作数据库需要与数据库建立连接,然后将要执行的SQL语句传送到数据库服务器,最后关闭数据库连接,都是按照这样一个流程进行操作的.如果按照该流程执行多条SQL语句,那么就需要建立多个数 ...

  6. Android UI-底部旋转菜单栏

    以前都是说每逢佳节倍思亲,现在的工作状态是每到周末倍亲切,年底真的是加班加的没完没了的,也没时间写博客,也没时间学习,周末闲来无事看到一个比较有意思的旋转菜单,没事自己实战了一下感觉还不错,代码倒是没 ...

  7. 即时通讯之smack客户端配置

    之前学习了通过Openfire+spark+smack的模式来完成我们的即时通讯软件,上次我们已经完成了Openfire的安装和配置,这次我们继续完成我们的客户端部分. 1.首先我们通过百度smack ...

  8. Oracle卸载后手工删除内容

    使用deinstall卸载oracle后,手工删除Oracle数据库,方法如下: 第一步:停用全部oracle服务 第二步:删除oracle注册表运行regedit在如下路径中找到oracle相关键值 ...

  9. Boosted Tree

    原文:http://www.52cs.org/?p=429 作者:陈天奇,毕业于上海交通大学ACM班,现就读于华盛顿大学,从事大规模机器学习研究. 注解:truth4sex  编者按:本文是对开源xg ...

  10. [Backbone]4. Model & View, toggle between Model and View. -- 1

    如上图所示: Server有Data都交给Models处理, 然后由Models给Views Data,让View去告诉DOM如何显示, 然后DOM显示HTML; View events update ...