微信小程序商城搭建_微信小程序商城搭建csdn-CSDN博客

本文链接：https://blog.csdn.net/m0_58782029/article/details/123433815

本文介绍了微信小程序开发的基础知识，包括必须的js、json、wxml和wxss四种文件类型及其作用。app.json是配置文件，用于设定小程序窗口样式和页面路径；app.js处理生命周期和全局变量；app.wxss和app.wxml则分别为全局CSS样式和非必要文件。此外，展示了商城小程序的app.json配置，包括首页、活动、购物车和我的页面，并提供了源码参考。后期将持续发布更多小程序实例。

摘要由CSDN通过智能技术生成

首先我们要明确小程序需要哪几种文件。

微信小程序中就四种类型的文件：

js ---------- JavaScrip文件
json -------- 项目配置文件，负责窗口颜色等等
wxml ------ 类似HTML文件
wxss ------- 类似CSS文件

在根目录下用app来命名的这四种类型的文件，就是程序入口文件。具体介绍如下：

app.json

必须要有这个文件，如果没有这个文件，IDE会报错，因为微信框架把这个作为配置文件入口，
你只需创建这个文件，里面写个大括号就行。以后我们会在这里对整个小程序的全局配置。记录了页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。

app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行什么都不需要写
以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

app.wxss

这个文件不是必须的。因为它只是个全局CSS样式文件

app.wxml

这个也不是必须的，而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的
有了这两个文件你运行程序，IDE就不会报错了。

接下来我会向大家介绍一下商城小程序小程序

首先先向大家展示一下效果。

下来我会给大家这四个文件源码

app.js:
```
App({

})
```

app.json:

{
    "pages": [
        "pages/index/index",
        "pages/faxian/faxian",
        "pages/xiaoxi/xiaoxi",
        "pages/wode/wode",
ap        "pages/spdetail/spdetail",
        "pages/pay/pay"
    ],
    "window": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "演示",
        "navigationBarBackgroundColor": "#69c3aa",
        "backgroundColor": "#fbf9fe"
    },
    "tabBar": {
        "color": "#929292",
        "backgroundColor": "#ffffff",
        "selectedColor": "#69C3AA",
        "borderStyle": "white",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "image/shouye1.png",
                "selectedIconPath": "image/shouye.png"
            },
            {
                "pagePath": "pages/faxian/faxian",
                "text": "活动",
                "iconPath": "image/huodong1.png",
                "selectedIconPath": "image/huodong.png"
            },
            {
                "pagePath": "pages/xiaoxi/xiaoxi",
                "text": "购物车",
                "iconPath": "image/car1.png",
                "selectedIconPath": "image/car.png"
            },
            {
                "pagePath": "pages/wode/wode",
                "text": "我的",
                "iconPath": "image/wode1.png",
                "selectedIconPath": "image/wode.png"
            }
        ]
    }

}

app.wxml:这个设置成空文件就可以了。
app.wxss:
```
page {
  background-color: #f5f6f7;
  height: 100%;
  letter-spacing: 1px;
}
```
最后这些源码仅供参考，要是会编程的可以参考一下要是不会编程的可以直接使用。下期我会介绍更多小程序实例。
后期我会定期发布小程序源码，欢迎大家的到来。