草庐IT

微信小程序开发（学习记录1.0）

mez_Blog 2023-07-09 原文

首先，把遇到的问题贴出来，主要是这个解决问题的思路，供大家参考。

现在的问题是将下面的导航栏做出来，但是在自己做的时候 遇到的问题

在app.json文件中输入tarBar，就会生成模板代码，默认会生成一个list的模板代码，几个list就是下面的导航栏有几部分，我们想要分成三部分，所以我们就会有三个list。

我们需要介绍并修改下面的模板内容，上面是修改过的，pagePath值得是你对应下面的分栏导航的页面，text就是指你导航图标下面的文字

 

 就是这个，然后iconPath就是你上面的图标路径（未点击），它分为两部分，一个是未点击的图标，另一个为点击后的图标，一般就是相同的图片换个颜色。当然，你也可以设置两张为同一张图片，这里为了方便我们就设置为同样的图片。

这里就遇到了两个问题，一个是图片过大，一个是格式不支持。这也是两个图片常见的问题，下面将解决过程贴出来。

首先是图片过大：

一开始就是随便弄了本地图片设置，发现需要的是图标大小，要不然就会太大，就会报错，如下所示。

我们在调试器中就能看到，我们设置的图片过大，并可以看出，该图标的最大大小为40Kb。

所以我们就需要将图片换成小图标，这时就会从网上下载一些图标到本地，然后使用，这也是常规解决思路。所以我们就找到了一个图标网站：DryIcons.com — Icons and Vector Graphics 

随便找了一系列图片下载，然后导入到我们的微信小程序文件夹，发现又报错了，这就不贴出来了，就是指它只支持png,jgp,jpeg格式的图片，我们下载的图标文件是svg的，尴尬，需要转换一下格式，所以我们用到了PS。

直接转格式发现不太行，需要调一下像素才可以，如果直接将图片拖进PS中，再转换格式，就会产生几百K的图片，上面说了不能超过40K，所以直接拖肯定不行。那我们就来调整像素再来转换格式。

就像这样，点击ps导航栏的图像，然后会有图像大小选项，点击就出现该界面，然后我们度娘出图标一般都是多少像素的，度娘告诉了我答案

 这里我们得到了答案，所以我们就填上，这里分辨率也和图像大小有关，就选默认的27即可，如果需要，我们调低，就会产生更小大小的图片，往上调高，就会得到大一些的图片。然后确定即可。

这里就是我们转换后的图像大小，我们在我们的小程序中使用即可，由于我们只是测试，为了省事，就直接设置的都是一样的图片了。最终的效果如下，并将代码贴上

//app.json文件内容
{
  "pages": [
    "pages/demo/demo",
    "pages/center/center",
    "pages/mez/mez"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#14c145",
    "navigationBarTitleText": "Mez App",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/demo/demo",
      "text": "测试",
      "iconPath": "images/24-hour-icon-5653.jpg",
      "selectedIconPath": "images/24-hour-icon-5653.jpg"
    },
    {
      "pagePath": "pages/mez/mez",
      "text": "首页",
      "iconPath": "images/24-hour-icon-5653.jpg",
      "selectedIconPath": "images/24-hour-icon-5653.jpg"
    },
    {
      "pagePath": "pages/center/center",
      "text": "测试",
      "iconPath": "images/24-hour-icon-5653.jpg",
      "selectedIconPath": "images/24-hour-icon-5653.jpg"
    }]
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

 

这就是我们的小程序，以及我解决问题的思路，希望可以帮助到大家，也为自己以后的学习做一个参考。 

 

1.0微信小程序xff0cxff0xff学习前端小程序

有关微信小程序开发（学习记录1.0）的更多相关文章

  1. ruby - 使用 C 扩展开发 ruby​​gem 时，如何使用 Rspec 在本地进行测试？ - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当

  2. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  3. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  4. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  5. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

    我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  6. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反？ - 2

    这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？ 最佳答案 我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub

  7. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  8. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  9. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  10. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

随机推荐