概述

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

详细

一、准备工作

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. Android开发FAQ集锦!!!

    .Android SDK应该从什么地方下载?为什么(http://developer.Android.com/ )经常上不上去? 答:谷歌官网的 (http://developer.Android.c ...

  2. [runtime] MAObjCRuntime

    MAObjCRuntime 源码地址:(引入头文件MARTNSObject.h即可,非arc环境下) http://pan.baidu.com/s/1eQ6776U https://github.co ...

  3. EasyUI相同的Tab只打开一个(即EasyUI方法的调用方法)

    function addTabA(title){ if ($('#tt').tabs('exists', title)){ $('#tt').tabs('select', title); } else ...

  4. Node.js安装备忘录

    一.准备工作 Node.js下载地址 http://nodejs.org/download/ Current version: v0.10.29 二.平台的选择 2.1 Windows平台 根据自己平 ...

  5. UCN(User-Centric Networks,用户中心网络)

    UCN(User-Centric Networks,以用户为中心的网络)是下一代移动通信网络(5G)的发展方向,目前尚处于初级发展阶段.2016年11月,IEEE SDN研究组(聚焦研发SDN.NFV ...

  6. Windows批处理命令初了解

    批处理文件时无格式的文本文件,它包含一条或多条命令.它的文件扩展名为.bat或.cmd.使用批处理文件可以简化日常重复性任务.其帮助:命令 /? eg:echo /? Ctrl+c组合键来强行终止一个 ...

  7. WordPress 无法使用the_content()方法输出内容

    在使用WordPress里在一个页面里我使用the_content()方法来输出当前页面的内容,但却显示为空,而标题,url等都没有问题 在网络上好像遇到这种情况的人很少只找到了一个说是可能是func ...

  8. ntpdate设置

    ntpdate设置 学习了:https://www.cnblogs.com/ibnode/p/3573302.html http://www.blogjava.net/spray/archive/20 ...

  9. 查看centos当前版本

    # rpm -q centos-release centos-release-5-4.el5.centos.1

  10. 如何使用Total Recorder录制网上的音乐,如何下载只能试听的歌曲

    1 在网上找到了对应的网站.其中正在播放的歌曲正是我们想要的 2 在地址栏输入上面音乐网站的网址,并点击捕获广播.(URL直接给出了音乐的完整地址,比如http://www.someserver.co ...