微信小程序电商首页开发基本思路

清疚 2022-12-10 07:06 223阅读 0赞

小程序电商UI源码参考（开发至购物车）链接: https://pan.baidu.com/s/1gBFNVJigtWLCpn6ZJxQZfQ  密码: tge8

## 一、编写app.json文件 ##

编写页面路劲的时候，文件会自动生成

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70][]

## 二、封装请求 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 1][]

## 三、编写首页的业务逻辑，即index.js文件 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 2][]

## 四、从前端遍历返回的json数据 ##

这里比较复杂的遍历是楼层的遍历

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 4][]

## 五、引入自定义组件 ##

编写index.json

{
      "usingComponents": {
        "SearchInput": "../../components/SearchInput/SearchInput"
      },
      "navigationBarTitleText": "优购首页"
    }

自定义的搜索框

![20200924141434904.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70]: /images/20221123/0be63fcf131347b3862c86c103297b12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 1]: /images/20221123/9d5d2b94fed24e83b9d376ea2679f377.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 2]: /images/20221123/46286d14affc4e63a0b7ff7711be9d2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 3]: /images/20221123/bba7e8ff74b04a1abbd9f6df2076eefd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 4]: /images/20221123/ce98e593f580419385cc2d71db2085f1.png
[20200924141434904.png]: /images/20221123/e9a2dba6cb7140c792afe03690d6a1bf.png