01：微信小程序结构和配置

来源：互联网发布：小众电影知乎编辑：程序博客网时间：2024/05/16 08:53

微信小程序，简称CX，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。跟着时代走，随波逐流，所以很有必要学习一下小程序。

1.结构

小程序跟Html5只是比较相似的，又有人说小程序本质上就是html5，优化之后的html5。来上一张图，看一下小程序的结构：

app.json文件是小程序的全局配置文件;

app.js小程序全局逻辑;

app.wxss是小程序的全局样式，其中可以引入多个样式用@import “style.css”;

每个页面由四部分构成js（接口）、wxml（视图层描述语言）、wxss（视图层描述语言）,json（页面配置）上图的pages目录下有两个页面index和logs。

注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名,重要的话说三遍，相同的路径与文件名，相同的，相同。

2.配置

小程序的全局配置在app.json里，可以配置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

注意：pages里的页面需要配置一下才能访问到，不然的话访问该页面会给出提示app.json中未配置当前页面

下面来看个列子：

1.配置app.json

{  "pages":[    "pages/index/index",    "pages/login/login",    "pages/account/account"  ],    "tabBar": {    "color": "#7c7c7c",    "selectedColor": "#2e9ef4",    "borderStyle": "black",    "backgroundColor": "#ffffff",    "list": [{      "pagePath": "pages/index/index",      "iconPath": "pages/images/icon_nav_button.png",      "selectedIconPath": "pages/images/icon_nav_button_hover.png",      "text": "首页"    }, {      "pagePath": "pages/login/login",      "iconPath": "pages/images/icon_nav_article.png",      "selectedIconPath": "pages/images/icon_nav_article_hover.png",      "text": "登录/注册"    },    {      "pagePath": "pages/account/account",      "iconPath": "pages/images/icon_nav_cell.png",      "selectedIconPath": "pages/images/icon_nav_cell_hover.png",      "text": "信息披露"    }]  },  "window":{        "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#black5",    "navigationBarTitleText": "通金钱包",    "navigationBarTextStyle":"white"      },   "networkTimeout": {    "request": 10000,    "downloadFile": 10000  },  "debug": true}

效果图如下：

tabBar配置的是页面的页脚导航，tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。具体属性如下图：

其中每个小程序页面也可以设置自己的page.json，页面中配置项会覆盖 app.json 的 window 中相同的配置项，每个页面的名称不一样所以具体每个页面单独配置

0 0