前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序 | 全局配置和页面配置

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

作者头像
算法与编程之美
发布2020-06-17 15:39:20
1.2K0
发布2020-06-17 15:39:20
举报
文章被收录于专栏:算法与编程之美

问题描述

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

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

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

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

解决方案

(1)全局配置

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

图1 图标文件夹

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

代码语言:javascript
复制

      "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来设置样式。

代码语言:javascript
复制

     <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 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档