手机端 - 扫码体验微信小程序:![]()
pc端 - 小程序官方文档:小程序官方文档
接下来的要学习的有, 详情请先阅读目录:
微信小程序入门基础:
1:小程序概念:
1.1:注册小程序开发账号和获取AppId
1.1.1 : 注册小程序开发账号
1.1.2:获取小程序的AppID
1.2:安装微信开发者工具
1.2.1:扫码登录到微信开发者工具
2:配置微信开发者工具:
2.1:设置外观和代理
2.2:新建小程序项目的步骤
2.3: 查看项目运行效果的两种方式
2.4:微信开发者工具主界面的5个组成部分
2.5:项目的基本组成结构
2.6:小程序页面的组成部分
3:小程序中的4种配置文件
3.1:认识小程序中的4种配置文件
3.2:app.json文件
3.3: project.config.json文件
3.4: sitemap.json文件
3.5: 页面的.json配置文件
A:新建小程序页面和修改项目首页
4.1:新建小程序页面
4.2:修改项目首页
4: WXML、WXSS、和小程序中JS文件的三大分类
4.1:WXML的概念以及和HTML之间的区别
4.2:WXSS的概念以及和CSS之间的区别
4.3:小程序中JS文件的三大分类
5: 微信小程序的宿主环境
5.1: 宿主环境的概念
5.2: 小程序的通信模型
5.3: 运行机制
6:组件
6.1:常用的视图容器组件
6.2:view组件的基本使用
6.3:scroll-view组件的基本使用
6.4:swiper和swiper-item的基本使用
6.5.1:swiper组件的常用属性
6.6: text和rich-text组件
6.7: button按钮组件
6.8: image图片组件
阶段小结:小程序API的3大分类
7:小程序后台管理 - 协同工作和发布
7.1:权限管理需求、组织结构、开发流程
7.2:小程序成员管理的两个方面
7.3:开发者的权限说明
7.4:如何添加项目成员和体验成员
7.5:小程序的版本阶段
7.6:小程序发布上线的主要步骤
7.7:小程序码进行推广
7.8:查看小程序的运营数据
阶段小结:
8:小程序基础语法
8.1:小程序数据绑定
8.1.1: 数据绑定的原则
8.1.2: 动态绑定属性
8.1.3: 三元运算
8.1.4: 算数运算
8.2:事件绑定
8.2.1:什么是事件以及小程序中常用的事件
8.2.2:事件对象的属性列表
8.2.3: target和currentTarget的区别
8.2.4:bindtap的语法格式
8.2.5:在事件处理函数中为data中的数据赋值
8.2.6:事件传参
8.2.7:bindinput的语法格式
8.2.8:实现文本框和data之间的数据同步
8.3: 条件渲染 if else
8.3.1: if...elif...else
8.3.2: 基于block标签使用if条件渲染
8.3.3: hidden
8.3.4: if和hidden的区别
8.4:for循环
8.4.1:for循环的基本用法
8.4.2:手动指定索引和当前项的变量名
8.4.3:指定key值提高渲染效率
9:微信小程序进阶
9.1:WXSS
9.1.1:wxss以及它和css之间的关系
9.1.2:rpx以及它的实现原理
9.1.3: rpx与px之间的单位换算
9.1.4:@import样式导入
9.1.5:全局样式
9.1.6:局部样式
9.2: 小程序全局配置
9.2.1:常用的全局配置项以及小程序窗口的组成部分
9.2.2:window - 设置导航栏的标题
9.2.3:window - 设置导航栏的背景色
9.2.4: window - 设置导航栏的标题颜色
9.2.5:window - 全局开启下拉刷新的功能
9.2.6:window - 关于模拟器的问题说明
9.2.7:window - 设置下拉刷新时的窗口背景色
9.2.8:window - 设置下拉刷新时loading的样式
9.2.9:window - 设置上拉触底的距离
9.4: tabBar
9.4.1:什么是tabBar
9.4.2:tabBar的6个组成部分
9.4.3:了解tabBar中的配置项
9.4.4:实现tabBar案例的效果
9.4.5:页面配置和全局配置的关系
9.4.6:页面配置中常用的配置项
10:小程序数据请求
10.1:小程序中网络数据请求的限制
10.2: 配置request合法域名
10.3: 发起GET请求
10.4:发起POST请求
10.5:如何在页面刚加载的时候请求数据
10.6:跳过request合法域名校验
10.7:关于跨域和Ajax的说明
基于综上所学知识,完成 [本地生活] 小程序案例
创建项目并梳理项目结构
配置导航栏效果
配置tabBar效果
获取轮播图的数据
渲染轮播图效果
获取九宫格的数据
渲染九宫格的布局效果
实现首页底部图片的布局效果
阶段小总结:
11:微信小程序页面导航
小程序中实现页面导航的两种方式
11.1:声明式导航
11.1:导航到tabBar页面
11.2:导航到非tabBar页面
11.3:实现后退导航效果
11.2:编程式导航
11.2.1:导航到tabBar页面
11.2.3:导航到非tabBar页面
11.2.4:实现后退导航效果
11.3.:导航传参
11.3.1:声明式导航传参
11.3.2:编程式导航传参
11.3.3:导航传参
12:小程序页面上拉和下拉事件
12.1:下拉刷新页面数据
12.1.1:什么是下拉刷新
12.1.2:启用下拉刷新
12.1.3: 配置下拉刷新窗口的样式
12.1.4:监听页面的下拉刷新事件
12.1.5:停止下拉刷新的效果
12.2:上拉触底加载数据
12.2.1: 什么是上拉触底
12.2.2: 监听页面的上拉触底事件
12.2.3: 配置上拉触底距离
[下拉随机加载颜色块]案例
基于以上学习到的上拉和下拉,将请求到的数据,下拉刷新随机生成颜色条
案例效果展示
定义获取随机颜色的方法,获取数据
渲染UI结构并美化页面效果
上拉触底时获取随机颜色,下拉加载更多数据
添加loading提示效果
介绍为什么需要对上拉触底进行节流处理
对上拉触底进行节流处理
自定义编译模式
13:小程序生命周期
13.1:什么是生命周期
13.2:小程序中生命周期的两个分类
13.3:生命周期函数
13.4:小程序中生命周期函数的两个分类
13.5:应用的生命周期函数
13.6:页面的生命周期函数
14:小程序WXS
14.1:什么是wxs以及应用场景
14.2:wxs和JavaScript的关系
14.3:内嵌wxs脚本
14.4:定义外联的wxs脚本
14.5:使用外联的wxs脚本
14.6:了解wxs的4个特点
重写 [本地生活小程序] 案例、完善
商铺列表页面的效果演示
把项目代码加载到微信开发者工具中
实现导航跳转并传参
动态设置商铺列表页面的标题内容
创建商铺列表页面的编译模式
了解API接口并定义需要的数据节点
定义getShopList方法获取商品列表数据
渲染商铺列表的UI结构并美化样式
展示loading提示效果
上拉触底时请求下一页数据
对上拉触底事件进行节流控制
演示并分析数据加载的问题
介绍判断是否还有下一页数据的公式
根据公式判断是否还有下一页的数据
为商铺列表页面开启下拉刷新效果
实现下拉刷新的功能
解决下拉刷新窗口效果不会自动关闭的问题
使用wxs处理手机号
小段总结:
小程序基础部分知识还是挺多的,所以文章分为了上下共2部分讲解,所以路漫漫其修远兮,共勉哈!