《微信小程序》入门小程序-商城小demo的实现(1)

demo代码已经上传到csdn的资源库了，这里是下载链接：下载demo；

思维导图

看到最终效果后，简单分析了一下页面以及可能涉及到的功能点，页面大致有这么几个

页面功能点及效果

首页

首页涉及的功能大致有：

• 组件：轮播图组件，滚动视图组件；

• 布局：flex布局；

• 功能：wx.loading（请求时的加载动画），wx.request(wx的数据请求)；

分类

分类涉及的功能大致有：

• 组件：滚动视图组件；

• 布局：flex布局，wx:for循环，tap点击事件；

• 功能：wx.loading（请求时的加载动画），wx.request（微信中的数据请求方法），wx.navigateTo（页面跳转）；

商品列表

商品列表涉及的功能大致有：

• 组件：滚动视图组件；

• 布局：flex布局，wx:for循环，tap点击事件；

• 功能：wx.loading（请求时的加载动画），wx.request（微信中的数据请求方法），wx.navigateTo（页面跳转）,onPullDownRefresh（下拉刷新），onReachBottom（触底上拉加载）；

商品详情

商品详情涉及的功能大致有：

• 组件：滚动视图组件；

• 布局：flex布局，wx:for循环，tap点击事件，wx:if渲染；

• 功能：wx.loading（请求时的加载动画），wx.request（微信中的数据请求方法），wx.navigateTo（页面跳转）storage本地存储，wx.switchTab（tab页面跳转）

• 自定义组件：支付方式的弹窗组件，数量的弹窗组件，数量加减的按钮组件；

购物车

购物车涉及的功能大致有：

• 组件：滚动视图组件；

• 布局：flex布局，wx:for循环，tap点击事件，wx:if渲染；

• 功能：wx.navigateTo（页面跳转）storage本地存储，wx.setTabBarBadge（tab右上角红色标记设置）

• 自定义组件：数量加减的按钮组件；

我的

我的涉及的功能大致有：

• 组件：视图组件；

• 布局：flex布局，tap点击事件，wx:if渲染；

• 功能：userInfoReadyCallback（获取用户信息）；

准备

============================================================

小程序的项目和普通的web项目不大一样，微信官方为了数据的按钮，向服务器请求的地址，必须进行登记，