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

开发工具

vscode + 小程序开发工具 + git管理
vscode需要装的插件:

补充: vscode的快捷键:
https://blog.csdn.net/padluo/article/details/105153420

框架搭建

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

---

完