首页技术文章正文

微信小程序开发教程:10天从入门到精通

更新时间:2021-12-24 来源:黑马程序员 浏览量:


图文教程
简介

微信小程序是不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开的应用,在微信小程序的使用过程中,用户只增不减,很多的公司都开始研发属于自己的小程序,那么小程序该如何去制作并实现功能呢?

本套《10天精通微信小程序开发教程》从小程序账号注册、开发环境搭建、基础语法、路由导航、数据请求、分包、组件化等方面详细阐述了小程序开发必备的基础知识,其前5天是小程基础课程,后5天是小程序项目课程。

全套视频教程+笔记+源码百度云盘下载地址:

https://pan.baidu.com/s/1wIPI_Y3A58xCIGLL0wcWqt
如果链接失效,加QQ:435946716,获取最新下载链接
提取码:1234

微信小程序开发教程

1Day01  微信小程序基础课程

00. 学习目标

01. 小程序简介

02. 注册小程序账号&安装开发者工具

03. 创建第一个小程序项目

04. 认识小程序项目的基本组成结构

05. 认识小程序页面

06. 小程序的宿主环境

07. 组件 - view和scroll-view组件的基本用法

08. 组件 - swiper和swiper-item的基本用法

09. 组件 - text和rich-text组件的基本用法

10. 组件 - button和image组件的基本用法

11. 小程序 API 的3大分类

12. 协同工作 - 小程序权限管理的概念以及成员管理的两个方面

13. 协同工作 - 开发者的权限说明以及如何维护项目成员

14. 发布 - 了解小程序的版本阶段与上线的主要步骤

15. 发布 - 小程序的推广与运行数据的查看

16. 总结

00. 学习目标

01. 小程序简介

02. 注册小程序账号&安装开发者工具

03. 创建第一个小程序项目

04. 认识小程序项目的基本组成结构

05. 认识小程序页面

06. 小程序的宿主环境

07. 组件 - view和scroll-view组件的基本用法

08. 组件 - swiper和swiper-item的基本用法

09. 组件 - text和rich-text组件的基本用法

10. 组件 - button和image组件的基本用法

11. 小程序 API 的3大分类

12. 协同工作 - 小程序权限管理的概念以及成员管理的两个方面

13. 协同工作 - 开发者的权限说明以及如何维护项目成员

14. 发布 - 了解小程序的版本阶段与上线的主要步骤

15. 发布 - 小程序的推广与运行数据的查看

16. 总结

2Day02  微信小程序基础课程

00.学习目标

01.数据绑定

02.事件绑定

03.事件传参与数据同步

04.条件渲染

05.列表渲染

06.wxss - wxss与css的关系

07.wxss - rpx单位

08.wxss - 样式导入

09.wxss - 全局样式与局部样式

10.全局配置 - 常用的全局配置项以及小程序窗口的组成部分

11. 全局配置 - window - 导航栏

12.全局配置 - window - 下拉刷新

13.全局配置 - window - 设置上拉触底的距离

14.全局配置 - tabBar

15.小程序的页面配置

16.数据请求 - GET和POST请求

17.数据请求 - request请求的注意事项

18.案例 - 实现本地生活的首页基础布局

19.总结

3Day03  微信小程序基础课程

00.学习目标

01.声明式导航

02.编程式导航

03.导航传参

04.下拉刷新

05.上拉触底

06.上拉触底案例 - 初步实现上拉触底效果

07.上拉触底案例 - 添加loading效果和节流处理

08.扩展 - 自定义编译模式

09.生命周期的概念与分类

10.生命周期函数的概念与分类

11.应用和页面的生命周期函数

12.wxs的概念

13.wxs的基本用法

14.案例 - 演示案例效果并实现导航跳转

15.案例 - 设置标题内容并创建编译模式

16.案例 - 获取并渲染商铺列表的数据

17.案例 - 初步实现上拉加载效果

18.案例 - 判断数据是否加载完毕

19.案例 - 实现下拉刷新功能

20.使用wxs处理手机号

21.总结

4Day04  微信小程序基础课程

00.学习目标

01.数据绑定

02.事件绑定

03.事件传参与数据同步

04.条件渲染

05.列表渲染

06.wxss - wxss与css的关系

07.wxss - rpx单位

08.wxss - 样式导入

09.wxss - 全局样式与局部样式

10.全局配置 - 常用的全局配置项以及小程序窗口的组成部分

11. 全局配置 - window - 导航栏

12.全局配置 - window - 下拉刷新

13.全局配置 - window - 设置上拉触底的距离

14.全局配置 - tabBar

15.小程序的页面配置

16.数据请求 - GET和POST请求

17.数据请求 - request请求的注意事项

18.案例 - 实现本地生活的首页基础布局

19.总结

5Day05  微信小程序基础课程

01.导入需要用到的小程序项目

02.初步创建并使用自定义组件

03.使用css变量定制vant主题样式

04.小程序API的Promise化

05.全局数据共享 - 了解全局数据共享方案和MobX

06.全局数据共享 - 创建Store实例并定义计算属性与actions方法

07.全局数据共享 - 在页面中使用Store中的成员

08.全局数据共享 - 在组件中使用Store中的成员

09.分包的基础概念

10.分包的基本用法

11.独立分包

12.分包预下载

13.在app.json中定义tabBar的配置信息

14.初步实现自定义的tabBar效果

15.渲染tabBar上的数字徽标

16.实现tabBar页面的切换效果

17.修改tabBar选中项文本的颜色值

18.总结

6Day06  小程项目课程

01.项目介绍与项目文档

02.配置uni-app的开发环境

03.初始化uni-app项目

04.配置tabBar效果

05.首页 - 轮播图效果

06.首页 - 配置小程序分包

07.首页 - 点击轮播图跳转到商品详情页

08.首页 - 封装uni.$showMsg()函数

09.首页 - 实现分类导航区域

10.首页 - 获取楼层数据并渲染楼层的标题

11.首页 - 渲染楼层中的图片

12.首页 - 点击楼层图片跳转到商品列表页面

13.分支的合并与提交

7Day07  小程项目课程

01.分类 - 创建cate分支以及分类页面的编译模式

02.分类 - 初始化分类区域的页面布局

03.分类 - 获取并渲染一级分类的列表数据

04.分类 - 渲染二级和三级分类列表

05.分类 - 优化分类页面的效果

06.搜索 - 介绍搜索功能并创建search分支

07.搜索 - 自定义组件 - 渲染my-search组件的基本结构

08.搜索 - 自定义组件 - 封装自定义属性和click事件

09.搜索 - 自定义组件 - 导航跳转与吸顶效果

10.搜索 - 搜索建议 - 自动获得焦点与防抖处理

11.搜索 - 搜索建议 - 实现搜索建议列表

12. 搜索 - 索建议 - 点击搜索Item项导航到商品详情页

13.搜索 - 搜索历史 - 渲染搜索历史的基本结构

14.搜索 -搜索历史 - 处理搜索关键词

15.搜索 - 搜索历史 - 清空搜索历史记录

16.搜索 - 搜索历史 - 点击搜索历史跳转到商品列表页面

17.搜索 - 分支的合并与提交

8Day08  小程项目课程

01.商品列表 - 功能介绍-分支创建

02.商品列表 - 请求并渲染商品列表的数据

03.商品列表 - 把商品Item项封装为自定义组件

04.商品列表 - 使用过滤器处理商品价格

05.商品列表 - 上拉加载更多商品

06.商品列表 - 下拉刷新列表数据

07.商品列表 - 点击商品item项导航到商品详情页面

08.商品列表 - 分支的合并与提交

09.商品详情 - 创建分支-添加编译模式

10.商品详情 - 获取商品详情的数据

11.商品详情 - 轮播图效果

12.商品详情 - 渲染并美化商品信息区域

13.商品详情 - 渲染商品详情的数据并优化详情页的显示

14.商品详情 - 渲染商品导航区域

15.商品详情 - 分支的合并与提交

16.加入购物车 - 初始化vuex

17.加入购物车 - 实现加入购物车的功能

18.加入购物车 - 动态统计购物车中商品的总数量

19.加入购物车 - 持久化存储购物车中的商品

20.加入购物车 - 优化商品详情页的total侦听器

21.加入购物车 - 动态设置tabBar的数字徽标

9Day09  小程项目课程

01.购物车页面 - 演示效果并创建编译模式

02.购物车页面 - 商品列表 - 渲染商品列表区域的结构

03.购物车页面 - 商品列表 - 基于props封装radio的勾选状态

04.购物车页面 - 商品列表 - 修改购物车商品的勾选状态

05.购物车页面 - 商品列表 - 封装NumberBox

06.购物车页面 - 商品列表 - 封装num-change事件

07.购物车页面 - 商品列表 - 优化NumberBox组件

08.购物车页面 - 商品列表 - 修改购物车中商品的数量

09.购物车页面 - 商品列表 - 实现滑动删除功能

10.购物车页面 - 收货地址 - 初步封装my-address组件

11.购物车页面 - 收货地址 - 实现选择收货地址的功能

12.购物车页面 - 收货地址 - 渲染收货人的信息

13.购物车页面 - 收货地址 - 把address信息存储到vuex中

14.购物车页面 - 收货地址 - 将vuex中的address持久化存储到本地

15.购物车页面 - 收货地址 - 将addstr抽离为getters

16.购物车页面 - 收货地址 - 重新选择收获地址-取消授权时的问题

17.购物车页面 - 收货地址 - 解决重新授权的问题

10Day10  小程项目课程

01.购物车页面 - 结算 - 封装结算区域的组件

02.购物车页面 - 结算 - 动态计算已勾选商品的数据和选中状态

03.购物车页面 - 结算 - 实现商品的全选与反选功能.

04.购物车页面 - 结算 - 动态渲染已勾选商品的总价格

05.购物车页面 - 结算 - 动态计算tabBar中购物车徽标的值

06.购物车页面 - 结算 - 渲染购物车为空时候的页面结构

07.购物车页面 - 分支的合并与提交

08.登录与支付 - 登录 - 点击结算按钮进行条件判断

09.登录与支付 - 登录 - 初步渲染页面的布局结构

10.登录与支付 - 登录 - 获取用户的基本信息

11. 登录与支付 - 登录 - 将用户的基本信息存储到vuex

12. 登录与支付 - 登录 - 调用uni.login获取code对应的值

13. 登录与支付 - 登录 - 进一步完善uni.login调用失败之后的if判断条件

14. 登录与支付 - 登录 - 获取登录的Token并存储到vuex中

15.登录与支付 - 用户信息 - 渲染用户的头像和昵称

16.登录与支付 - 用户信息 - 渲染第1个面板区域

17.登录与支付 - 用户信息 - 渲染第2个面板区域

18.登录与支付 - 用户信息 - 渲染第3个面板区域

19.登录与支付 - 用户信息 - 实现退出登录的功能

20.登录与支付 - 三秒跳转 - 初步实现3秒倒计时跳转的功能

21.登录与支付 - 三秒跳转 - 登录成功后导航到登录之前的页面

22.登录与支付 - 微信支付 - 在请求头中添加Token身份认证的字段

23.登录与支付 - 微信支付 - 了解微信支付的流程

24.登录与支付 - 微信支付 - 创建订单

25.登录与支付 - 微信支付 - 订单预支付

26.登录与支付 - 微信支付 - 实现微信支付

27.登录与支付 - 分支的合并与提交

28.发布 - 了解为什么要进行发布

29.发布 - 将uni-app项目发布为小程序

30.发布 - 将uni-app项目发布为安卓App

点击查看更多


猜你喜欢:

微信小程序有必要开发吗?

Web前端开发为什么一定要掌握小程序开发技术?

微信小程序开发环境的搭建教程

黑马程序员web前端开发高手班课程

分享到:
在线咨询 我要报名
和我们在线交谈!