微信小程序 | 全局配置和页面配置
欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
问题描述
如何在全局配置中在底部插入各种图标及文字？
如何在页面配置中插入图片并将图文居中？
如何设置全局及页面的背景颜色？
在我们制作一个微信小程序时，首先进行全局配置，设置底部索引，我们可能面临不知道如何插入图标或是图标尺寸过大的情况。其次，在页面配置过程，需要插入图片且要让图文居中的情况。除此之外，我们会想让页面并不只是单调的白色而想设置不同颜色。
解决方案
（1）全局配置
全局配置的图标我们可以直接在网上搜索并下载PNG的格式，将其保存在你所新建的一个在你的小程序pages文件夹下的一个img文件夹里。
图1 图标文件夹
在全局配置中，增加一个tabBar标签，并在这个标签里面写关于底部的图标和文字等内容。同时需要链接一个“”pages”:[ ]”，在全局配置的代码最顶部，在[ ]中写入pagePath的内容。
|
"pagePath": "pages/index/index", <span style="font-family:"&color:#3E3E3E;letter-spacing:
"> "text": "首页<span style="font-family:"&color:#3E3E3E;letter-spacing:.4px">", "selectedIconPath": "pages/img/shouye.png" { "text": "分类<span style="font-family:"&color:#3E3E3E;letter-spacing:.4px">", "selectedIconPath": "pages/img/fenlei.png" { "text": "收藏<span style="font-family:"&color:#3E3E3E;letter-spacing:.4px">", "selectedIconPath": "pages/img/shoucang.png" <span style="font-family:"&color:#3E3E3E;letter-spacing:
"> }
|
表1 插入图标
图2 全局显示效果
（2）页面配置
页面插入图片需要一个image标签，而要让图片下的文字和图片都居中，可以让图片和文字都在同一个view标签里面，然后通过wxss来设置样式。
|
<image src="/pages/img/shisheng.jpg" mode="aspectFill"></image> ——东野圭吾 <text>\n</text> .shisheng{ flex-direction: column; }
|
表2 插入图片
图3 图文居中效果图
结语
在添加图标或图片时，直接将其拖动到小程序开发工具里的img文件夹下是不可以的，需要在复制到电脑里的存放小程序文件的文件夹里的img文件夹。全局配置时尤其注意对“[ ]”和“{ }”的使用及每个未完结的 ] 和 } 后面的英文状态下的逗号。
END
主 编 | 王楠岚
责 编 | 吴怡辰
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！