小程序入门——架构配置

DaveCui
250 阅读7分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

在上一篇文章小程序入门——注册流程 - 掘金 (juejin.cn)我们已经创建好了我们的项目，在正式开始我们的开发实现流程之前需要先把小程序的架构配置好。

image.png 主要就是框柱的部分，最上面没被框住的cloudfunctions不要看了，这个云开发因为比较坑的原因不会用到云开发，如果真的再用到的话再细讲。

以下讲解基本参考官方文档小程序配置 | 微信开放文档 (qq.com)加上自己个人使用的经验。

一、全局配置：app.json

全局配置里面配置项超级多，可以参考这个全局配置 | 微信开放文档 (qq.com)

但是根据这里两年上线了几个小程序的使用经验来说，最常用的还是这几个。以下是我一个已经发布上线的app.json的参考。

{
  "pages": ["pages/index/index"],
  "window": {},
  "tabBar": {
    "selectedColor": "#00B26B",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/icon/首页.png",
        "selectedIconPath": "images/icon/首页_selected.png",
        "text": "首页"
      }
    ]
  },
  "sitemapLocation": "sitemap.json",
  "usingComponents": {
    "van-tag": "@vant/weapp/tag/index",
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": false,
  "lazyCodeLoading": "requiredComponents",
}

1.Page 配置

Page 完整详细配置查看全局配置-pages | 微信开放文档 (qq.com)

新手入门可能对Pages这个名词不太容易理解，顾名思义，page--页面。就是我们程序的每一界面都会建一个page，不同页面内部有不同的组件、布局以及功能实现。Pages之间也可以进行跳转。

Pages配置用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的.json, .js, .wxml, .wxss 四个文件进行处理。

未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。就是说Pages里面的第一项，就是我们进入小程序时的页面。

小程序中新增/减少页面，都需要对 pages 数组进行修改。

这个之前删减页面是需要手动修改的，但是最近我开发的时候发现删除文件，添加pages文件都会自动更新的。应该是新版本上插件了。

image.png

2.Window配置

Window完整详细配置查看全局配置-window | 微信开放文档 (qq.com)

一般来说我经常用到的配置就是以下：

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000
navigationBarTextStylestringwhite导航栏标题颜色，仅支持 black、white
navigationBarTitleTextstring/导航栏标题文字内容
navigationStylestringdefault导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式，仅支持 dark / light

这个是微信小程序初始化的默认配置（我只改了title） image.png

这个是我已经发布上线运营了半年做的小程序的配置 image.png

从我个人经验来讲，纯属个人经验哈：

  • navigationBarBackgroundColor、navigationBarTextStyle 、navigationBarTitleText这三个对于初级的小程序还是很有用的，你换个颜色，换个文字就能直观的感受到这个小程序的变化。
  • navigationStyle这个就是高级一点设计才会用到的了，会把上面的navigationBar这部分直接隐藏，就是下面框住的这部分。然后换成第二张图的海报这种性质的。整体会更有设计感，但是需要一点PS和设计功底，或者用一点钞能力去淘宝找一个。

如果你对自己的程序有点要求的话可以试试用这个，确实会增色不少。

|"navigationStyle": "default" | "navigationStyle": "custom"

  • backgroundColor、backgroundTextStyle这两个感觉用处不多，backgroundColor基本上我们都会在各个页面css文件中对背景颜色有个定义，但是这个毕竟是全局配置优先级比较低，局部配置可以覆盖。backgroundTextStyle至于这个，我觉得白色的挺好。当然如果你有关灯模式的话一定要记得弄个dark，不然用户容易被下拉刷新晃眼。（不许我问我怎么知道的！）
图一图二
image.pngimage.png

3.tabBar 配置

tabBar完整详细配置查看全局配置-tabBar | 微信开放文档 (qq.com)

新手入门可能对tabBar这个名词不太容易理解，其实他就相当于一个底部导航栏，就是把几个常用的固定页面放在最显眼的地方。如下图，我在tabBar的list里面放了三个元素，页面底部导航栏就会显示这三个。

image.png

一般来说tabBar常用的几个配置就是这些了：

属性类型必填默认值描述
colorHexColor是tab 上的文字默认颜色，仅支持十六进制颜色
selectedColorHexColor是tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColorHexColor是tab 的背景色，仅支持十六进制颜色
listArray是tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
positionstring否bottomtabBar 的位置，仅支持 bottom / top

虽然color、backgroundColor这两个项要求是必填，但是确实不填也行，比如我运行半年、经过上万次并发的的小程序。他的配置是这个鬼样子。 image.png

list内的tab

属性类型必填说明
pagePathstring是页面路径，必须在 pages 中先定义
textstring是tab 上按钮文字
iconPathstring否图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPathstring否选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

emmm，这个应该很好理解，就不多解释了。给一下下面的一个配置基本案例吧

"list": [
  {
    "pagePath": "pages/index/index",
    "iconPath": "images/icon/首页.png",
    "selectedIconPath": "images/icon/首页_selected.png",
    "text": "首页"
  },
    {
    "pagePath": "pages/index/index_1",
    "iconPath": "images/icon/副页.png",
    "selectedIconPath": "images/icon/副页_selected.png",
    "text": "副页"
  }
]

4.sitemapLocation

默认就是sitemap.json,这个文件的配置参考 sitemap 配置 | 微信开放文档 (qq.com)

不过这玩意儿我一般用不到，我也是整理文档的时候才发现有这么个东西。这个东西主要是为了防止用户直接跳到我们功能的后半段页面，比如购物过程中还没选品直接跳到付款去了。不过我一般是在每个onload下加个校验规则，这次项目有机会试试这个全局配置，估计要比每个页面复制个校验规则

5.usingComponents

一般是自己引入组件库才会用的，我一般用的是Vant 介绍 - Vant Weapp (vant-ui.github.io)这个别人的组件库里文档会写怎么引入的，安心看文档。

6.networkTimeout

属性类型必填默认值说明
requestnumber否60000wx.request 的超时时间，单位：毫秒。
connectSocketnumber否60000wx.connectSocket 的超时时间，单位：毫秒。
uploadFilenumber否60000wx.uploadFile 的超时时间，单位：毫秒。
downloadFilenumber否60000wx.downloadFile 的超时时间，单位：毫秒。

7.debug

debug功能在开发的时候还是非常好用的。在开发者工具的控制台面板，调试信息会以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以快速定位一些常见的问题。

8.lazyCodeLoading

目前仅支持值 requiredComponents，代表开启小程序「按需注入」特性。

这个有兴趣的可以看一下，对于提高小程序的响应速度和用户体验来说是很有用的，但是这个一般功能比较复杂的小程序才会用到，像我现在弄得这个小程序基本上用不到的。但是开着吧，实测在开其他界面时也没啥卡顿。

二、app.js

云开发的环境配置和全局变量在这里可以实现。

wx.cloud.init有云开发的配置下云开发的ID globalData可以在不同页面调用这个全局变量。（这个我自己改了改，原来的什么样忘了）

image.png

三、app.wxss

相当于前端的css做一些全局组件的配置，对于统一格式还是很有用的。但是要记得全局的优先级比局部的低，

有一说一，我真的没怎么动过用过这个文件。但是感觉他很有用，主要是我也不是前端，我是赶鸭子上架的，很多页面。组件的设计都是拍脑子决定的。

avatar
文章
阅读
粉丝