基于微信云开发的简单商城小程序源码与配置指导
大猪蹄子风月凛 时间：2022-09-05
文章目录
- 一、项目简述
- 二、项目部分展示
- 三、项目配置
- 1、项目准备
- 2、新建项目
- 3、项目初始化
- 4、引入WeUI
- 5、创建目录结构
- 6、配置全局配置文件
- 7、配置微信开发云数据库
- 8、配置pages下的各个页面
- 9、 alt="首页">
三、项目配置
1、项目准备
安装node.js（csdn搜索一下有教程），为后面使用WeUI组件做准备
2、新建项目
新建一个微信小程序，后端服务选择微信云开发
3、项目初始化
1）打开app.json找到下面的代码
（注意pages/index/index后面的逗号别忘删了）
上述操作将pages中除了index之外所有的文件删除完成后如下图所示的目录结构
2）打开index.wxml、index.wxss，ctrl+A全选清除全部内容
index.js仅留下Page下的data
index.json不要动
4、引入WeUI
1）打开项目文件夹，进入如图所示的项目文件目录
2）在上图红框位置输入cmd+回车
3）在弹出的控制台输入：npm install --save weui-miniprogram- 1
回车等待完成
此时的目录结构，注意node_modules是在miniprogram目录下的：
5）点击构建npm
6）系统弹出“完成构建…”点击确定
7）去右上角详情下面的本地设置，勾选下面
顺便把不校验合法域名也勾选上
5、创建目录结构
1）将下面代码复制到app.json中的pages下面
"pages/index/index", "pages/cart/cart", "pages/category/category", "pages/user/user", "pages/goods_list/goods_list", "pages/goods_detail/goods_detail", "pages/pay/pay", "pages/order/order", "pages/search/search"- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
2、在miniprogram下新建一个空文件夹icons用来存放tabbar的图标
3、在miniprogram下新建一个空文件夹 alt="在这里插入图片描述">6、配置全局配置文件
1）配置app.json
tabBar下面list列表中的iconPath与selectedIconPath需要自己去下载哦~（iconPath是未选中图标，selectedIconPath是选中图标，下载的时候相同图标需要下载两个不同颜色的哦） 推荐在这里阿里巴巴素材库下载
下载后把图标放在上一步骤5创建的文件夹icons中，然后把我的图标地址换成你的地址就可以了
navigationBarTitleText可以换成你自己的项目名{ "pages": [ "pages/index/index", "pages/cart/cart", "pages/category/category", "pages/user/user", "pages/goods_list/goods_list", "pages/goods_detail/goods_detail", "pages/pay/pay", "pages/order/order", "pages/search/search" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "科大易购", "navigationBarTextStyle": "black" }, "tabBar": { "color": "#bfbfbf", "selectedColor": "#e0620d", "position": "bottom", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "icons/shouye.png", "selectedIconPath": "icons/shouye_o.png" }, { "pagePath": "pages/category/category", "text": "分类", "iconPath": "icons/fenlei.png", "selectedIconPath": "icons/fenlei_o.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "icons/gouwuche.png", "selectedIconPath": "icons/gouwuche_o.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "icons/wode.png", "selectedIconPath": "icons/wode_o.png" } ] }, "sitemapLocation": "sitemap.json", " data-report-click="{"spm":"1001.2101.3001.4259"}">
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
如果出现本错误就把项目文件中的miniprogram_npm文件删除，再清除一下缓存编译一下
如果还报一堆看起来很复杂的错误，就可以多改几次调试基础库（PS：好多次代码检查没有问题但一直报错，一改基础库就能运行出来，不知道是不是开发工具的问题。。。）
2）配置app.wxss
将app.wxss中的内容全部删除，只留下一行：
@import "./ data-report-click="{"spm":"1001.2101.3001.4259"}">- 1
3）配置app.js
这个不要动，保留系统自己生成的
7、配置微信开发云数据库
1）打开云开发控制台
2）配置数据库
1.在云数据库中添加五个集合，名称分别为：
allcategorys（分类页面目录数据）
categorys（首页目录数据）
floordata（首页下方楼层数据）
goodsdata（商品数据）
swiperdata（轮播图数据）
2.（重要）将五个数据库的权限都改为所有用户可读，仅创建者可读写！！
3.下列文件分为五个记事本分别复制保存为五个json文件，每个记事本都起下列标题的名字，保存时选择为json格式
- allcategorys.json
{"_id":"9e7190f1616b8351006420d43a550755","cat_pid":0.0,"children":[{"cat_pid":1.0,"cat_icon":"https://636c-cloud1-8gqpk3x7b2fe1c7c-1307300024.tcb.qcloud.la/goods/categoods/1-1.jpg?sign=953c5e443eae8359a4a8627d90ef74bb&t=1641648760","cat_id":2.0,"cat_leavel":2.0,"cat_name":"新鲜水果"},{"cat_id":3.0,"cat_name":"牛奶豆奶","cat_pid":1.0,"cat_icon":"https://636c-cloud1-8gqpk3x7b2fe1c7c-1307300024.tcb.qcloud.la/goods/categoods/1-2.jpg?sign=69801b22908417e13180330f59af3f08&t=1641648796","cat_leavel":2.0},{"cat_name":"饮料零食","cat_pid":1.0,"cat_icon":"https://636c-cloud1-8gqpk3x7b2fe1c7c-1307300024.tcb.qcloud.la/goods/categoods/1-3.jpg?sign=830d1bd80ab2b00bdb85baadb13dab86&t=1641648825","cat_id":4.0,"cat_leavel":2.0}],"cat_icon":"","cat_id":1.0,"cat_leavel":0.0,"cat_name":"果奶零食"}{"_id":"18ed0968616b84c9005c44e473b4934f","cat_id":5.0,"cat_leavel":0.0,"cat_name":"文具用品","cat_pid":0.0,"children":[{"cat_pid":5.0,"cat_icon":"https://636c-cloud1-8gqpk3x7b2fe1c7c-1307300024.tcb.qcloud.la/goods/categoods/2-1.jpg?sign=f2c6503e707cba4fcd93dc11acadff20&t=1641649156","cat_id":6.0,"cat_leavel":2.0,"cat_name":"笔记本"},{"cat_icon":"https://7465-test-8g5rr5sy2d200af3-1307758559.tcb.qcloud.la/img/%E5%88%86%E7%B1%BB%E9%A1%B5%E9%9D%A2%E5%88%86%E7%B1%BB%E5%9B%BE%E6%A0%87/%E5%AD%A6%E4%B9%A0/%E5%AD%A6%E4%B9%A0%E5%B7%A5%E5%85%B7.jpg?sign=190ac26cf7352b70b58943e9f3ef33f6&t=1634563838","cat_id":7.0,"cat_leavel":2.0,"cat_name":"水笔铅笔","cat_pid":5.0},{"cat_icon":"https://7465-test-8g5rr5sy2d200af3-1307758559.tcb.qcloud.la/img/%E5%88%86%E7%B1%BB%E9%A1%B5%E9%9D%A2%E5%88%86%E7%B1%BB%E5%9B%BE%E6%A0%87/%E5%AD%A6%E4%B9%A0/%E5%AD%A6%E4%B9%A0%E7%94%A8%E5%93%81%E5%85%B6%E4%BB%96.jpg?sign=4fab2fb7c3174397e5e075763447d923&t=1634563859","cat_id":8.0,"cat_name":"书架书立","cat_pid":5.0,"cat_leavel":2.0}],"cat_icon":""}{"_id":"18ed0968616d06420082e8d721433c2f","cat_icon":"","cat_id":9.0,"cat_leavel":0.0,"cat_name":"课本书籍","cat_pid":0.0,"children":[{"cat_id":10.0,"cat_leavel":2.0,"cat_name":"公共课类","cat_pid":9.0,"cat_icon":"https://636c-cloud1-8gqpk3x7b2fe1c7c-1307300024.tcb.qcloud.la/goods/categoods/3-1.jpg?sign=f2d07f0255df50b611bd87c3ddccb032&t=1641651166"},{"cat_name":"计算机类","cat_pid":9.0,"cat_icon":"https://636c-cloud1-8gqpk3x7b2fe1c7c-1307300024.tcb.qcloud.la/goods/categoods/3-2.jpg?sign=e9cc8311e6c0f9725c37d25f68182c3f&t=1641651192","cat_id":11.0,"cat_leavel":2.0},{"cat_id":12.0,"cat_leavel":2.0,"cat_name":"考研复习","cat_pid":9.0,"cat_icon":"https://636c-cloud1-8gqpk3x7b2fe1c7c-1307300024.tcb.qcloud.la/goods/categoods/3-3.jpg?sign=0a9527939236e6fcf514de0b78a0cede&t=1641651208"},{"cat_icon":"https://636c-cloud1-8gqpk3x7b2fe1c7c-1307300024.tcb.qcloud.la/goods/categoods/3-4.jpg?sign=20e790ffcf19000519aa9ad5f3f8b23b&t=1641651226","cat_id":
特别声明：本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有，并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利，请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。