微信小程序案例2-2：本地生活

（一）创建项目

• 项目名称：本地生活
• 不使用模板
  

（二）创建页面

• 在app.json里配置pages/grid/grid页面，手动删除index页面
  

（三）准备图片素材

• 在项目根目录创建images目录，拷贝项目所需图片素材
  

（四）编写页面结构

1、编写轮播区域页面 结构

• 轮播图有指示点面板，自动轮播，时间间隔3000毫秒
  

2、编写九宫格区域页面结构

>  代码
<!--九宫格区域--> <view class="grids">   <view class="grid-item">
    <image src="/images/food.png"/>
    <text>美食</text>   </view>   <view class="grid-item">
    <image src="/images/fitup.png"/>