ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2021-09-15 18:34:27  阅读:163  来源: 互联网

标签:index about 菜单 微信 blog images 全局 pages png


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

由于我有vue的开发经验,已经多年的html+css开发经验,所以相对来说学习比较简单,看了一下b站的视频,就开始尝试开发起来,此小程序是以个人网站的手机版为原型来开发的,也算是小程序的入门项目,个人博客。shuanghei.comhttps://www.shuanghei.comicon-default.png?t=L892https://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图片,非常方便,如下图:

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

标签:index,about,菜单,微信,blog,images,全局,pages,png
来源: https://blog.csdn.net/shuanghei/article/details/120314190

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有