微信小程序入门

微信小程序项目目录组成

文件	作用
pages	用来存放所有小程序的页面
utils	用来存放工具性质的模块
app.js	小程序项目的入口文件
app.json	小程序项目的全局配置文件
app.wxss	小程序项目的全局样式文件
project.config.json	项目的配置文件
sitemap.json	用来配置小程序及其页面是否允许被微信索引

page文件内目录

• .js文件（页面的脚本文件，存放页面的数据、事件处理函数）
• .json文件（当前页面的配置文件，配置窗口的外观、表现）
• .wxml文件（页面的模板结构文件）
• .wxss文件 （当前页面的样式表文件）

JSON配置文件的作用

JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。
小程序项目中有4种json配置文件，分别是：

1. 项目根目录中的app.json配置文件。
2. 项目根目录中的project.config.json配置文件
3. 项目根目录中的sitmap.json配置文件
4. 每个页面文件夹中的.json配置文件

app.json

{
	// 用来记录当前小程序所有页面的路径
    "pages": [
        "pages/index/index",
        "pages/logs/logs",
        "pages/user/user",
        "pages/basket/basket",
        "pages/category/category",
        "pages/search-page/search-page",
        "pages/delivery-address/delivery-address",
        "pages/editAddress/editAddress",
        "pages/orderList/orderList",
        "pages/order-detail/order-detail",
        "pages/submit-order/submit-order",
        "pages/binding-phone/binding-phone",
        "pages/express-delivery/express-delivery",
        "pages/pay-result/pay-result",
        "pages/search-prod-show/search-prod-show",
        "pages/prod/prod",
        "pages/login/login",
        "pages/prod-classify/prod-classify",
        "pages/recent-news/recent-news",
        "pages/news-detail/news-detail"
    ],
    // 全局定义小程序所有页面的背景色、文字颜色等
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    },
    "tabBar": {
        "selectedColor": "#3a86b9",
        "color": "#b8b8b8",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "images/tabbar/homepage.png",
                "selectedIconPath": "images/tabbar/homepage-sel.png"
            },
            {
                "pagePath": "pages/category/category",
                "text": "分类",
                "iconPath": "images/tabbar/category.png",
                "selectedIconPath": "images/tabbar/category-sel.png"
            },
            {
                "pagePath": "pages/basket/basket",
                "text": "购物车",
                "iconPath": "images/tabbar/basket.png",
                "selectedIconPath": "images/tabbar/basket-sel.png"
            },
            {
                "pagePath": "pages/user/user",
                "text": "我的",
                "iconPath": "images/tabbar/user.png",
                "selectedIconPath": "images/tabbar/user-sel.png"
            }
        ]
    },
    // 用来指明sitemap.json的位置
    "sitemapLocation": "sitemap.json"
}

补充：style：全局定义小程序组件所使用的样式版本，如果用旧的样式版本就把style删除就可以了

project.config.json文件

project.config.json是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如：

• setting中保存了编译相关的配置
• projectname中保存的是项目的名称
• appid中保存得到是小程序的账号ID

sitemap.json文件

微信已开放小程序内搜索，效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。