欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-14 14:32:34
...

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

零、初始框架结构

  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所有的这四个文件。
    从头开发一个微信小程序(会不断补充完善,直至毕设做完)

三、待补充

相关标签: 微信小程序