一文掌握 - 微信小程序基础(上半部分)

576 阅读6分钟

手机端 - 扫码体验微信小程序: 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部分讲解,所以路漫漫其修远兮,共勉哈!

下一篇:一文掌握 - 微信小程序基础(下半部分)