从头开发一个微信小程序（会不断补充完善，直至毕设做完）

Posted 2022-04-15 肉丸不肉

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

零、初始框架结构

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

---

一、建立底部导航栏

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

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

3. "pagePath":此导航对应的页面，需要自己新创建，page的创建技巧见后面。
4. "text"：各个导航对应的文字
5. "iconPath"：未选中此导航对应的图标
6. "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所有的这四个文件。
   

---

三、待补充