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

灰太狼 2023-02-26 08:26 21阅读 0赞

### 文章目录 ###

*   *  开发工具
     *  框架搭建

## 开发工具 ##

vscode + 小程序开发工具 + git管理  
vscode需要装的插件:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]  
补充: vscode的快捷键:  
[https://blog.csdn.net/padluo/article/details/105153420][https_blog.csdn.net_padluo_article_details_105153420]

## 框架搭建 ##

1.新建几个文件夹  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]  
2.删除默认的文件  
如:log页面，默认的app.js. logs等文件夹内容  
3.新建13个页面  
vs中的快捷键: wx-app:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]  
vs列式编辑：几个快捷键:  
ctrl + shift + alt + 方向键 ： 进入列式编辑  
ctrl+左键 ，跳到单词末尾（要选中的话可同时按住shfit）  
ctrl+home/end，跳到行尾或行头(要选中的话可同时按住shfit)  
技巧:注意用空格先把单词分开，便于处理

4.引入字体图标iconfont  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 6]  
[https://www.jianshu.com/p/17b5a1f12669][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"
    }

以上的所有操作效果如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 7]  
git代码地址:  
[https://github.com/hufanglei/pyg-demo/tree/day01][https_github.com_hufanglei_pyg-demo_tree_day01]

--------------------

完

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]: /images/20230209/18fcad491c614cc092be687a1f0d8355.png
[https_blog.csdn.net_padluo_article_details_105153420]: https://blog.csdn.net/padluo/article/details/105153420
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]: /images/20230209/a1bc90324c1b468cac9084d6a04ead21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]: /images/20230209/c3538bf0d0474cd6b3b93f0e2620403f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]: /images/20230209/65f581e645d14715b19eb33dab211d72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]: /images/20230209/4ff585613f2248a68a8e5615a2a3dad4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 5]: /images/20230209/9aae8e933509456382ba684b31c5b897.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 6]: /images/20230209/14ed57d0cc084ff9bff9216952677257.png
[https_www.jianshu.com_p_17b5a1f12669]: https://www.jianshu.com/p/17b5a1f12669
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 7]: /images/20230209/2d19e5cbed57488684bf75e2f805c3ae.png
[https_github.com_hufanglei_pyg-demo_tree_day01]: https://github.com/hufanglei/pyg-demo/tree/day01