小程序快速入门教程 1.1 小程序开发入门

twowinter

发布于 2020-04-17 17:54:49

9970

发布于 2020-04-17 17:54:49

文章被收录于专栏：twowintertwowinter

1 开始

基础的准备工作可以参考官方的入门介绍

2 了解下小程序的文件结构和页面组成

结合刚创建的 DEMO，大致了解下小程序的文件结构和页面组成，详细的内容可以查看小程序代码构成。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件 | 必需 | 作用 app.js | 是 | 小程序逻辑 app.json | 是 | 小程序公共配置 app.wxss | 否 | 小程序公共样式表

一个小程序页面由四个文件组成，四个文件必须具有相同的路径与文件名，分别是：

文件类型| 必需 | 作用 js | 是 | 页面逻辑 wxml | 是 | 页面结构 json | 否 | 页面配置 wxss | 否 | 页面样式表

3 小程序的全局配置

详细文档可以查看小程序全局配置。

在这里先看看全局配置文件 app.json 最常用的三个功能，分别关联到 3 个配置项。

页面的增删 - 配置项 pages

配置项 pages 负责页面路径的列表，该数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

我们将默认的 index 和 log 页面删除，新建 4 个页面。代码为：

  "pages": [
    "pages/home/home",
    "pages/list/list",
    "pages/partner/partner",
    "pages/more/more"
  ],

窗口表现 - 配置项 window

配置项 window 负责默认窗口的表现，比较常见的是对导航栏处理，可修改诸如背景颜色、标题颜色、标题文字内容。

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },

底部 tab 栏表现 - 配置项 tabBar

配置项 tabBar 负责底部 tab 栏的表现。这里在底部增加了 4 个tab。

  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#13227a",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "image/icon-home.png",
        "selectedIconPath": "image/icon-home-active.png",
        "text": "⾸⻚"
      },
      {
        "pagePath": "pages/list/list",
        "iconPath": "image/icon-list.png",
        "selectedIconPath": "image/icon-list-active.png",
        "text": "活动"
      },
      {
        "pagePath": "pages/partner/partner",
        "iconPath": "image/icon-partner.png",
        "selectedIconPath": "image/icon-partner-active.png",
        "text": "伙伴"
      },
      {
        "pagePath": "pages/more/more",
        "iconPath": "image/icon-more.png",
        "selectedIconPath": "image/icon-more-active.png",
        "text": "更多"
      }
    ]
  },

其中 iconPath 和 selectedIconPath 为 tab 栏图标的路径，这些图标可以从 iconfont阿⾥巴巴矢量图标库下载，最好是一明一暗的图标。

我的 DEMO 实际效果是这样：

4 具体页面的配置

配置了全局，接下来在学习配置下具体页面，尝试修改 home 页面，home.json 的配置如下：

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ce5a4c",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "⼩程序⻚⾯",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

DEMO 实际效果是这样：