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

 0 0条评论

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

由于我有vue的开发经验,已经多年的html+css开发经验,所以相对来说学习比较简单,看了一下b站的视频,就开始尝试开发起来,此小程序是以本网站即 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可以去https://www.iconfont.cn/免费下载。

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


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


接下去让我们继续学习微信小程序(二),首页布局

本文作者:双黑

版权声明:本站文章欢迎链接分享,禁止全文转载!

游客