商城小程序实战

1.构建目录结构

image.png

2.配置入口页面和注意页面

image.png

3.设置全局配置

• 全局设置窗口主题色

  
  image.png

4.页面配置

• 页面设置文字

  
  image.png

5.tabBar

图标81*81 手机端看起来挺合适的。

image.png

6.处理首页内容

1.请求轮播图数据

• 封装网络请求

image.png

• 请求首页数据

  
  image.png

• 保存数据

  
  image.png

2.封装组件，展示轮播图和推荐数据

• 封装组件

  
  image.png

• 注册组件

  
  image.png

• 使用组件

  
  image.png

• 目录结构

  
  image.png

3.请求商品数据

响应式改变对象的值，key值需要使用双引号，如果是变量，那使用[ ]

image.png

• 渲染数据

  
  image.png

• 监听收藏点击，把事件发送到首页来处理

  
  image.png

image.png

• 上拉加载更多

  
  image.png

• 回到顶部

  
  image.png

-选项卡fixed