微信小程序开发（学习记录1.0）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序开发（学习记录1.0）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

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

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

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

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

首先是图片过大：

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

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

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

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

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

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

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

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

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

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

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

//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）