专栏首页算法与编程之美微信小程序 | 全局配置和页面配置

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

问题描述

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

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

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

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

解决方案

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

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:吴怡辰

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 计算机技术|我的第一个Flask程序

    Flask是目前十分流行的web框架,采用Python编程语言来实现相关功能。它被称为微框架(microframework),“微”并不是意味着把整个Web应用...

    算法与编程之美
  • python|Python中的dict

    1、格式:{key1:value1,key2:value2,key3:value3,….. } ;

    算法与编程之美
  • 微信小程序|Tab标签页

    在使用小程序的时候会看到大多数都是在小程序的底部设置导航栏,然而会发现有一些小程序的顶部也会有导航栏,那么如何来设置小程序的Tab标签页呢?

    算法与编程之美
  • 数据本地性带来的锅~

    健身回来的路上,看到微信群里聊技术,一群有问了一个神奇的问题,具体可以看如下截图:

    Spark学习技巧
  • AFNetworking框架分析(三)——AFURLSessionManager(下)

    上一篇讲到在AFHTTPSessionManager中,在初始化NSMutableURLRequest对象时的流程分析。接下来继续分析在生成request之后A...

    我只不过是出来写写代码
  • 移动端Safari对z-index与绝对定位的不佳处理

    我尝试用z-index和绝对定位结合做一个时光轴,但在IOS设备上的表现很差:尽管我滑动了页面,时光轴相对屏幕的位置仍然不变(但时光轴的父元素已经设定了rela...

    gojam
  • 学习前端开发,不是学习前端框架,也不是学习前端工具。

    打开招聘网站,随处可见的技能要求,熟悉angularJs,精通Vue,掌握react,精通html、css,熟悉原生Js,能够熟练使用NodeJs进行开发等.....

    web前端教室
  • 数据分析之Pandas分组操作总结

    Pandas做分析数据,可以分为索引、分组、变形及合并四种操作。之前介绍过索引操作,现在接着对Pandas中的分组操作进行介绍:主要包含SAC含义、groupb...

    Datawhale
  • 0635-5.16.1-Hue集成HBase出现Api Error异常分析

    2.回到Cloudera Manager上点击HBase服务,然后进入Thrift的配置页。

    Fayson
  • HTTP协议冷知识大全

    HTTP协议是纯文本协议,没有任何加密措施。通过HTTP协议传输的数据都可以在网络上被完全监听。如果用户登陆时将用户名和密码直接明文通过HTTP协议传输过去了,...

    老钱

扫码关注云+社区

领取腾讯云代金券