小程序起步

配置小程序

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%宽度。