zl程序教程

您现在的位置是:首页 >  其他

当前栏目

【愚公系列】2022年10月 微信小程序-优购电商项目-项目框架搭建

项目微信框架程序 搭建 2022 系列 10
2023-06-13 09:15:02 时间

文章目录


前言

一、项⽬搭建

1.新建⼩程序项⽬

填入自己的appid

2. 搭建⽬录结构

⽬录名

作⽤

styles

存放公共样式

components

存放组件

lib

存放第三⽅库

utils

⾃⼰的帮助库

request

⾃⼰的接⼝帮助库

3. 搭建⽬录结构

⻚⾯名称

名称

⾸⻚

index

分类⻚⾯

category

商品列表⻚⾯

goods_list

商品详情⻚⾯

goods_detail

购物⻋⻚⾯

cart

收藏⻚⾯

collect

订单⻚⾯

order

搜索⻚⾯

search

个⼈中⼼⻚⾯

user

意⻅反馈⻚⾯

feedback

登录⻚⾯

login

授权⻚⾯

auth

结算⻚⾯

pay

{
  "pages": [ 
    "pages/index/index",
    "pages/category/index", 
    "pages/goods_list/index",
    "pages/goods_detail/index", 
    "pages/cart/index",
    "pages/collect/index",
    "pages/order/index",
    "pages/search/index",
    "pages/user/index",
    "pages/feedback/index",
    "pages/login/index",
    "pages/auth/index",
    "pages/pay/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTitleText": "黑马优购",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      }
      ,
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      }
      ,
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  },
  
  "sitemapLocation": "sitemap.json"
}

4. 字体图标

  1. 打开阿⾥巴巴字体图标 ⽹站
  2. 选择的图标
  3. 添加⾄项⽬
  4. 下载到本地
  5. 将样式⽂件 由 css 修改为 wxss
  6. ⼩程序中引⼊

网站:https://www.iconfont.cn/

5. 其他

小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/

mdn文档:https://developer.mozilla.org/zh-CN/