小程序学习电商小项目实战(1)--框架搭建和准备

文章目录

• ​​开发工具​​
• ​​框架搭建​​

开发工具

vscode + 小程序开发工具 + git管理

vscode需要装的插件:

补充: vscode的快捷键:

​

框架搭建

1.新建几个文件夹

2.删除默认的文件

如:log页面，默认的app.js. logs等文件夹内容

3.新建13个页面

vs中的快捷键: wx-app:

vs列式编辑：几个快捷键:

ctrl + shift + alt + 方向键 ： 进入列式编辑

ctrl+左键 ，跳到单词末尾（要选中的话可同时按住shfit）

ctrl+home/end，跳到行尾或行头(要选中的话可同时按住shfit)

技巧:注意用空格先把单词分开，便于处理4.引入字体图标iconfont

​​https://www.jianshu.com/p/17b5a1f12669​​ 5.设置4个tabbar

app.json

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

以上的所有操作效果如下:

git代码地址:

​​https://github.com/hufanglei/pyg-demo/tree/day01​​

完