微信小程序开发_day1

小程序项目分为两个部分：主体文件、页面文件

主体文件：

1. app.js：小程序入口文件

2. app.json：小程序的全局配置文件

3. app.wxss：小程序的全局样式

页面文件：

1.  js：页面逻辑

2. .wxml：页面结构

3. .wxss：页面样式

4. .json：小页面配置

新建页面

方法一：

1.在pages文件夹下新建文件夹，如“list”

2.在“list”文件夹下新建页面“list”，则会自动新建四个文件

方法二：

1.打开app.json文件

2.找到“pages”添加所需页面即可

设置首页

1.在app.json文件中，“pages”的首个页面默认为首页

2.可以在app.json文件中添加设置，确定首页

"entryPagePath": "pages/index/index"

window配置

依次是导航栏名，导航栏背景色，导航栏是否可下拉，导航栏下拉的背景色及导航栏是否高亮

    "window": {
        "navigationBarTitleText": "鱼鱼选甜品",  
        "navigationBarBackgroundColor": "#f3514f",
        "enablePullDownRefresh": true, 
        "backgroundColor": "#efefef",
        "backgroundTextStyle":"dark"
    },

tabBar配置

    "tabBar": {
        "selectedColor": "#f3514f", 
        "color": "#666",
        "backgroundColor": "#efefef",
        "borderStyle":"black",
        "position": "bottom",
        "list": [
            {
                "text": "首页",
                "pagePath": "pages/index/index",
                "iconPath": "image/首页.png",
                "selectedIconPath": "image/首页 (1).png"
            },
            {
                "text": "分类",
                "pagePath": "pages/cate/cate",
                "iconPath": "image/分类.png",
                "selectedIconPath": "image/分类 (1).png"
            },
            {
                "text": "购物车",
                "pagePath": "pages/cart/cart",
                "iconPath": "image/_购物车.png",
                "selectedIconPath": "image/购物车.png"
            },
            {
                "text": "我的",
                "pagePath": "pages/profile/profile",
                "iconPath": "image/我的.png",
                "selectedIconPath": "image/我的 (1).png"
            }
        ]
    },

配置

project.config.json文件中在setting添加配置

        "useCompilerPlugins": [
            "sass"
        ],

即可将所有.wxss后缀文件更改为.scss后缀文件，更改后即可采用css语法进行编写