小程序起步

配置小程序

1.app.json的文件的配置

{
    "pages": [
        // 配置页面，pages为页面文件夹，后面两个名字最好设置相同名字，本文件中配置保存后微信开发者工具会自动创建对应文件夹
        "pages/index/index",
        "pages/logs/index"
    ],
    "window": {
        // 导航栏背景颜色
        "navigationBarBackgroundColor": "#ffffff",
        // 导航栏标题文字内容
        "navigationBarTitleText": "",
        // 导航栏标题颜色，仅支持 black / white
        "navigationBarTextStyle": "black",
        // 下拉 loading 的样式，仅支持 dark / light
        "backgroundTextStyle": "dark"
    },
    // 小程序底部nav组件
    "tabBar": {
        // tab 上的文字默认颜色，仅支持十六进制颜色
        "color": "#6e6d6b",
        // tab 上的文字选中时的颜色，仅支持十六进制颜色
        "selectedColor": "#ff9966",
        // tabbar 上边框的颜色， 仅支持 black / white
        "borderStyle": "black",
        // tab 的背景色，仅支持十六进制颜色
        "backgroundColor": "#ffffff",
        "list": [
            // 此处配置底部nav内容，最少 2 个、最多 5 个 tab
            {
                // 页面路径，必须在 pages 中先定义
                "pagePath": "pages/index/index",
                // tab 上按钮文字
                "text": "首页",
                // 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
                "iconPath": "images/tabBar/home.png",
                // 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
                "selectedIconPath": "images/tabBar/home_on.png"
            },
            {
                "pagePath": "pages/logs/logs",
                "text": "日志",
                "iconPath": "images/tabBar/logs.png",
                "selectedIconPath": "images/tabBar/logs_on.png"
            }
        ],
        // tabBar 的位置，仅支持 bottom / top
        "position": "bottom"
    },
    // 各类网络请求的超时时间，单位均为毫秒。
    "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
    },
    // 开发者调试模式
    "debug": true,
    // 当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时，需要先在配置文件中声明需要跳转的小程序 appId 列表，最多允许填写 10 个。
    "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}

2、微信小程序项目结构

2.1、pages文件夹

存放页面文件

2.2、utils文件夹

存放外部文件和全局文件，建议将api和md5文件存放到此处

2.3、app.json文件

全局配置文件，配置页面和底部tabbar等内容

2.4、app.wxss文件

全局css文件，微信小程序中后缀wxss即是样式文件

2.5、app.js文件

全局js文件

2.6.1、4个页面文件

1.index.js文件

必须有page({})函数

2.index.json文件

不能为空，本文件为空则不显示页面内容，{"usingComponents": {}}

3.index.wxml文件

等同于html文件，小程序中后缀必须为wxml，使用了view标签代替div标签，实际开发过程类似。

4.index.wxss文件

等同于css文件，小程序中后缀必须为wxss,支持大部分css标签，详见微信小程序开发文档，开发过程中建议使用Flex进行布局，尺寸单位使用rpx，默认手机宽度为750rpx，所以当设置宽度为750rpx,即为100%宽度。