前端web微信小程序基础+商城实战项目

课程简介：

1. 详尽的讲解了微信小程序的基础知识

2. 基于 uni-app 实现微信小程序项目的开发

3. 项目中会涉及到登录支付等微信小程序特有的能力



课程亮点：

1、本课程从小程序账号注册、开发环境搭建、基础语法、路由导航、数据请求、分包、组件化等方面详细阐述了小程序开发必备的基础知识。

2、学完小程序基础之后，利用 uni-app 技术实现微信小程序的开发，可以做到一次开发多端部署。

3、项目拥有首页、搜索页、商品列表页、商品详情页、购物车、登录支付等主要功能。涵盖了分包、vuex、组件化开发等核心技术点的使用。



适用人群：

1. 对小程序开发感兴趣的开发者。

2. 希望学习小程序提高行业竞争力的前端开发者。

3. 希望通过学习小程序完成业务开发的在职人员。



课程内容：

day01

小程序简介

注册小程序开发帐号

安装开发者工具

小程序代码的构成

小程序的宿主环境

协同工作和发布

day02

数据绑定

事件绑定

条件渲染

列表渲染

了解WXSS

rpx

样式导入

全局样式和局部样式

全局配置文件及常用的配置项

页面配置

网络数据请求

案例 - 本地生活（首页）

day03

页面导航

页面事件

生命周期

WXS 脚本

案例 - 本地生活（列表页面）

day04

自定组件

组件的创建与引用

样式

数据、方法和属性

数据监听器

数据监听器 - 案例

纯数据字段

组件的生命周期

组件所在页面的生命周期

插槽

父子组件之间的通信

behaviors

day05

使用 npm 包

全局数据共享

分包

案例 - 自定义 tabBar

day06

配置uni-app项目的开发环境

初始化uni-app的项目

配置tabBar效果

在uni-app项目中配置小程序分包

封装uni.$showMsg()方法

渲染首页分类导航区域的UI效果

渲染首页楼层区域的UI效果

day07

使用scroll-view组件实现分类页面的布局效果

在切换一级分类之后重置滚动条的位置

动态设置scroll-view组件的高度

在uni-app项目中自定义组件

实现首页中搜索组件吸顶的效果

为自定义的搜索组件封装click事件

实现搜索框防抖的处理

渲染搜索建议列表的UI结构

解决搜索关键词前后顺序的问题

解决搜索关键词重复的问题

将搜素历史记录持久化存储到本地

day08

将商品Item项封装为组件

使用过滤器处理商品价格

实现上拉加载更多

实现下拉刷新的功能

实现商品详情页的轮播图大图预览效果

使用rich-text渲染图文详情

实现商品导航区域的UI效果

在uni-app项目中使用vuex

实现加入购物车的功能

动态统计购物车中商品的总数量

为tabBar设置数字徽标

day09

为my-goods组件封装radio勾选状态

为my-goods组件封装NumberBox

实现购物车中商品滑动删除的功能

实现选择收货地址的功能

将收货地址信息存储到vuex中

解决重新授权的问题

day10

实现全选/反选的功能

计算已勾选商品的总价和数量

动态计算tabBar中购物车徽标的值

获取用户的基本信息

实现微信登录的功能

把Token存储都vuex中

实现用户信息组件

实现3秒倒计时跳转到登录页的功能

实现微信支付的功能

把uni-app项目发布为小程序

把uni-app项目发布为Android App