微信小程序 | 全局配置和页面配置

算法与编程之美

发布于 2020-06-17 15:39:20

1.2K0

发布于 2020-06-17 15:39:20

文章被收录于专栏：算法与编程之美

问题描述

如何在全局配置中在底部插入各种图标及文字？

如何在页面配置中插入图片并将图文居中？

如何设置全局及页面的背景颜色？

在我们制作一个微信小程序时，首先进行全局配置，设置底部索引，我们可能面临不知道如何插入图标或是图标尺寸过大的情况。其次，在页面配置过程，需要插入图片且要让图文居中的情况。除此之外，我们会想让页面并不只是单调的白色而想设置不同颜色。

解决方案

（1）全局配置

全局配置的图标我们可以直接在网上搜索并下载PNG的格式，将其保存在你所新建的一个在你的小程序pages文件夹下的一个img文件夹里。

图1 图标文件夹

在全局配置中，增加一个tabBar标签，并在这个标签里面写关于底部的图标和文字等内容。同时需要链接一个“”pages”:[ ]”，在全局配置的代码最顶部，在[ ]中写入pagePath的内容。


      "pagePath":  "pages/index/index",

<span style="font-family:"&color:#3E3E3E;letter-spacing:&#10">      "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:&#10">    }

表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 团队

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-06-15，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序

微信

本文分享自算法与编程之美微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

小程序

微信

登录后参与评论

0 条评论

热度

微信小程序 | 全局配置和页面配置

微信小程序 | 全局配置和页面配置

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐