从头开发一个微信小程序(会不断补充完善,直至毕设做完)

“从头”指的是:已经建立好初始项目

零、初始框架结构

  1. 建立images目录放此小程序用到的所有图片
  2. 在pages下建立开发过程成用到的所有页面
    在这里插入图片描述

一、建立底部导航栏

  1. 在app.json中
  2. 导航栏代码为:tabBar那块

我的小程序tabBar有四个为:首页、全部分类、购物车、我的
不移过多,3个或4个布局最顺眼

  1. "pagePath":此导航对应的页面,需要自己新创建,page的创建技巧见后面。
  2. "text":各个导航对应的文字
  3. "iconPath":未选中此导航对应的图标
  4. "selectedInconPath":选中此导航对应的图标
  1. iconPath和selectedInconPath这个两个属性是为了使用两个图标来模拟 选中导航变色的功能。所以下载图标时就一种图标下载两个颜色
  2. 点我进入下载矢量图标的网站
"tabBar": {
    "color": "#000000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home2.png",
        "selectedIconPath": "images/home_selected.png"
      },
      {
        "pagePath": "pages/all/all",
        "text": "全部分类",
        "iconPath": "images/social.png",
        "selectedIconPath": "images/social_selected.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "images/cart.png",
        "selectedIconPath": "images/cart_selected.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my_selected.png"
      }
    ]
  },

在这里插入图片描述


二、建立各个page

  1. (推荐)快速建立一个新的page的技巧:直接在app.json文件中的"pages"属性下按格式写入想要的页面名字,系统会自动给创建每个page所有的四个文件(.js .json .wxml .wxss)
    在这里插入图片描述
  2. (不推荐)否则,需要在pages目录下手动创建 新page所有的这四个文件。
    在这里插入图片描述

三、待补充

发布了581 篇原创文章 · 获赞 97 · 访问量 29万+

猜你喜欢

转载自blog.csdn.net/gx17864373822/article/details/104935515
今日推荐