和我一起学习微信小程序(一)，菜单和全局配置

今天开始正式学习微信小程序，小程序有多火我也不说了，作为前端开发者，小程序也是必备技能。

由于我有vue的开发经验，已经多年的html+css开发经验，所以相对来说学习比较简单，看了一下b站的视频，就开始尝试开发起来，此小程序是以个人网站的手机版为原型来开发的，也算是小程序的入门项目，个人博客。shuanghei.comhttps://www.shuanghei.comhttps://www.shuanghei.com

此系列文章，仅仅是记录下本人开发小程序的一些过程和心得，并非教学类文章，我会把我开发小程序的点点滴滴的过程，都一一记录下来，与大家分享。

一，创建项目

去官网申请appid，然后新建项目填入appid，不要勾选云开发，小程序会默认生成几个文件夹。

把app.js和app.wxss里面的内容清空，然后删除pages下的index文件夹，重新新建index文件夹，这样就是一个最干净的初始项目。

二，全局设置

打开app.json，进行简单的全局设置，backgroundTextStyle和navigationBarTextStyle是全局的背景色，只能是light和white，navigationBarTitleText是小程序的标题，我就用公众号一样的名字吧。

    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#000",
        "navigationBarTitleText": "双黑in上海",
        "navigationBarTextStyle": "white"
  },

pages对象里，新建3个page，主要是底部导航对应的page。

    "pages": [
        "pages/index/index",
        "pages/logs/logs",
        "pages/blog/blog",
        "pages/about/about"
  ],

可以看到，创建完这三个页面后，左侧pages文件夹里，会自动生成这三个page。

三，创建导航

接下去，创建底部导航，目前就先创建，首页、博客、关于三个页面吧，以后可以根据项目再补充。

这里的pagePath必须在之前的pages对象中存在，否则会报错。

"tabBar": {
    "selectedColor":"#D81E06",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"/images/home.png",
        "selectedIconPath":"/images/home-h.png"
      },
      {
        "pagePath": "pages/blog/blog",
        "text": "博客",
        "iconPath":"/images/blog.png",
        "selectedIconPath":"/images/blog-h.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath":"/images/about.png",
        "selectedIconPath":"/images/about-h.png"
      }
    ]
  },

iconPath和selectedIconPath分别是未选中和选中状态下的icon，selectedColor选中状态下的文字颜色建议和selectedIconPath所指定的icon的图便一样。至于icon可以去iconfont-阿里巴巴矢量图标库免费下载。

在线就可以编辑不同的颜色的png图片，非常方便，如下图：

最后，然后预览一下，看看效果，有那么点感觉了？

本文首发于个人博客：和我一起学习微信小程序(一)，菜单和全局配置_双黑个人网站 

第二篇：和我一起学习微信小程序(二)，首页布局