当前播放: 05 | 小程序运行机制简介:从零构建一个Web App需要做哪些事情?
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
第一章:重新认识微信小程序 (6讲)
01 | 课程介绍
免费
02 | 内容综述
免费
03 | 小程序的特点及开发能力
免费
04 | 新的一年,微信小程序开放了哪些新功能?
免费
05 | 小程序运行机制简介:从零构建一个Web App需要做哪些事情?
免费
06 | 开发环境配置:创建你的第一个小程序项目
第二章:微信小程序组件介绍及使用 (43讲)
07 | icon组件:关于图标的4个实现方案
08 | progress组件:如何自定义实现一个环形进度条?
09 | rich-text组件:如何单击预览rich-text中的图片并保存?
10 | view容器组件及Flex布局(一):学习容器组件view及其重要属性
11 | view容器组件及Flex布局(二):介绍flex布局中常用的样式及样式值
12 | 可移动容器及可移动区域(一):学习使用movable-view与movable-area组件
13 | 可移动容器及可移动区域(二):如何实现侧滑删除功能
14 | scroll-view介绍:在小程序中如何实现滚动锚定?
15 | scroll-view介绍:如果渲染一个滚动的长列表?
16 | 滚动选择器(一):学习使用选择器组件
17 | 滚动选择器(二):使用两种方式自定义实现省、市、区三级联动的选择器
18 | 滑动选择器表单组件:如何基于wxs自定义一个竖向的slider?
19 | 页面链接组件:如何自定义一个导航栏?
20 | image媒体组件(上):如何实现图片的懒加载?
21 | image媒体组件(下):开发中经常遇到的问题?
22 | 如何实现直播间功能?(一):了解live-pusher、live-player组件的主要属性及使用限制
23 | 如何实现直播间功能?(二):如何开启、使用腾讯云的云直播功能
24 | 如何实现直播间功能?(三):安装与使用ffmepg,及使用ffmpeg进行推拉流验证
25 | 如何实现直播间功能?(四):使用live-pusher、live-player组件在小程序中实现直播功能
26 | 如何实现直播间功能?(五):同层渲染
27 | 如何实现直播间功能?(六):live-pusher、live-player组件在开发中的常见问题
28 | web-view(一):了解session、cookie等相关基本概念
29 | web-view(二):了解常见的四种鉴权方式
30 | web-view(三):如何使用koa框架,及如何进行热加载?
31 | web-view(四):如何在服务器端实现cookie与sesson的生成?
32 | web-view(五):如何将session存储到服务器端,及如何实现token验证?
33 | web-view(六):基于koa中间件,实现微信一键登陆的后端接口
34 | web-view(七):实现微信用户一键登陆
35 | web-view(八):了解正确的微信登陆姿势
36 | web-view(九):web-view组件在开发的常见问题讲解
37 | WebGL介绍(一):了解WebGL相关的基础概念
38 | WebGL介绍(二):如何在小程序中取到WebGL上下文环境对象
39 | WebGL介绍(三):了解WebGL的世界坐标系
40 | WebGL介绍(四):重新认识右手坐标系及如何编写顶点着色器代码
41 | WebGL介绍(五):学习片断着色器编写,了解变量修饰变型uniform与attribute
42 | WebGL介绍(六):了解在WebGL中裁剪空间是如何裁剪出来的
43 | WebGL介绍(七):了解着色器变量值的绑定及三种三角形绘制模式之间的差异
44 | WebGL介绍(八):在着色器中使用共享变量,绘制一个颜色渐变的正方形
45 | WebGL介绍(九):完成动画
46 | WebGL介绍(十):绘制一个旋转的立方体
47 | WebGL介绍(十一):在3D绘制中使用纹理材质
48 | WebGL介绍(十二):如何创建相机、场景及光源
49 | WebGL介绍(十三):创建加载器、渲染器与控制器,完成3D模型文件的加载与展示
第三章:微信小程序开发常用的API介绍及使用 (17讲)
50 | 网络接口简介(一):如何使用wx.request接口
51 | 网络接口简介(二):将登陆代码模块化封装
52 | 网络接口简介(三):Promise介绍及 6 个常用方法
53 | 网络接口简介(四):Promise三个方法any、all与race的使用介绍
54 | 网络接口简介(五):基于Promise+await、async关键字改写登录模块
55 | 网络接口简介(六):关于Page页面隐藏代码执行及Promise对象的catch处理的补充
56 | 网络接口简介(七):学习EventChannel对象
57 | 网络接口简介(八):观察者模式介绍及Event模块实现
58 | 网络接口简介(九):扩展wxp模块的request3方法,实现用户登录的自动融合
59 | tabBar组件(一):系统默认的tabBar组件如何开启及使用
60 | tabBar组件(二):基于系统提供的自定义方式,实现一个tabBar组件
61 | tabBar组件(三):通过自定义组件扩展的方式,给任意组件添加通用方法
62 | 开放接口(一):如何对Page进行全局扩展
63 | 开放接口(二):优化前后端登录代码,解决后端解密错误
64 | 设备能力:如何实现扫码连WiFi功能?
65 | 前期留言集中答疑(一)
66 | 前期留言集中答疑(二)
第四章:快速构建商家小程序前端页面 (77讲)
67 | 搭建UI框架(一):如何基于Vant快速创建小程序页面?
68 | 搭建UI框架(二):使用art-template模板引擎
69 | 搭建UI框架(三):规整后端koa项目结构
70 | 用户登录(一):创建与使用数据库
71 | 用户登录(二):创建sessionKey model并完善用户登录
72 | 商品列表页:创建分类模型
73 | 商品列表页:使用存储过程初始化分类表
74 | 商品列表页:创建商品表、品牌表
75 | 商品列表页:创建商品描述表
76 | 商品列表页:创建商品SKU表
77 | 商品列表页:初始化SKU表数据
78 | 商品列表页:创建商品列表接口
79 | 商品列表页:关联查询
80 | 商品列表页:实现vtabs侧边栏导航
81 | 商品列表页:调用商品分类分页列表接口
82 | 商品列表页:实现延迟加载
83 | 商品列表页:修改vtabs组件算法
84 | 商品列表页:实现分页加载
85 | 商品列表页:使用骨架屏
86 | 商品详情页:创建商品详情接口
87 | 商品详情页:使用EventChannel
88 | 商品详情页:显示标题与价格
89 | 商品详情页:使用Sketch
90 | 商品详情页:使用蓝湖
91 | 商品详情页:实现选择商品规格的UI
92 | 商品详情页:在底部添加商品导航组件
93 | 商品详情页:实现商品规格接口
94 | 商品详情页:展示商品规格以供选择
95 | 购物车页面:整合用户自动登陆功能
96 | 购物车页面:添加 tabBar 导航
97 | 购物车页面:构建商品列表
98 | 购物车页面:实现编辑模式与正常模式切换
99 | 购物车页面:创建购物车模型
100 | 购物车页面:实现向购物车添加商品的接口
101 | 购物车页面:实现“加入购物车”功能
102 | 购物车页面:实现购物车拉取接口
103 | 购物车页面:调用购物车列表接口与绑定页面数据
104 | 购物车页面:实现改变购物车商品数量的接口
105 | 购物车页面:实现商品增减
106 | 购物车页面:实现批量删除
107 | 确认订单页面:实现地址项与商品列表UI
108 | 确认订单页面:绑定商品列表数据
109 | 确认订单页面:实现确认订单页面其它UI
110 | 购物车页面:尝试使用计算属性
111 | 快递地址列表页面:创建快递列表页面UI
112|新增地址页:创建新增收货地址页面UI与双向绑定
113|微信接口:验证接口是否可用
114|收货地址列表页:从微信获取预存的收货地址
115|后端:创建address模型与列表接口
116|后端:创建新增收货地址接口、添加索引
117|新增地址页:实现收货地址新增功能
118|收货地址列表页:拉取真是收货地址并渲染
119|收货地址列表页:优化微信收货地址获取的逻辑
120|后端:实现收货地址编辑接口
121|新增编辑地址页:实现前端编辑功能
122|地址列表页:实现滑动删除功能的 UI
123|地址列表页:实现地址删除接口及前端删除功能
124|微信支付:申请微信认证及微信支付
125|微信支付:登录商户平台作支付开发准备
126|微信支付:安装微信支付模块 koa3-wechat
127|微信支付:初始化 koa3-wechat 支付模块
128|微信支付:使用 koa3-wechat 调用统一下单接口准备支付参数
129|微信支付:使用 wx.requestPayment 接口发起微信支付
130|微信支付:确认支付订单状态
131|微信支付:在云服务器上部署测试代码与配置 nginx
132|微信支付:测试支付确认接口是否可用
133|确认下单页:清空已经下单的购物车商品
134|微信支付:实现退款接口
135|微信支付:尝试使用 weixin-pay 调用统一下单接口准备支付参数
136|微信支付:解决 weixin-pay 退款失败的问题
137|小微商户:申请帐号与支付测试
138|小微商户:试用小微商户
139|小微商户:实现下单接口
140|小微商户:在手机上测试支付功能
141|小微商户:解决商户 ID 不能为空等问题
142|小微商户:实现支付结果回调的接口
143|小微商户:实现退款接口
第五章:基于Node.js快速打造后端接口及公众号页面管理后台 (9讲)
144|公众号:公众号开发接入配置
145|公众号:接管公众号消息并作应答
146|微信认证:关于小程序公众号开放平台等帐号认证
147|服务号:网页授权的两种方式
148|云数据库:将线下数据库同步至线上
149|网页授权:通过测试号拉取用户信息
150|网页授权:在微信开发者工具中测试网页授权代码
151|测试:使用内网穿透服务 ngrok
152|微页面:如何实现 JS-SDK 的初始化
第六章:微信小程序云开发常用功能简介及使用 (12讲)
153|云开发:创建第一个小程序云开发项目
154|云开发:创建第一个云开发环境
155|云开发:创建第一个云函数login
156|云函数:如何获取用户的openid
157|微信支付:基于云函数实现微信支付
158|云数据库:如何创建集合并实现数据的基本操作
159|云函数:如何在本地调试云函数
160|云数据库:如何在小程序中操作云数据库
161|TCB:小程序与公众号共享云环境
162|云开发:使用实时数据监听实现多端信息同步
163|云数据库与云存储:使用事务与图片的上传下载功能
164|云环境:通过安装扩展应用快速实现功能
第七章:添加广告实现流量变现 (3讲)
165|广告:创建与展示 Banner 广告
166|广告:创建与使用视频激励广告
167|广告:使用封面广告与自定义模板广告
第八章:添加运营插件促进用户活跃和留存 (8讲)
168|插件开发:关于微信小程序插件的基础介绍
169|插件开发:创建第一个插件项目
170|插件开发:实现“每日天气”第一个版本的功能
171|插件开发:插件的提交审核与使用
172|插件开发:实现第二个版本的功能“每日微报”
173|插件开发:在插件中调用云函数
174|订阅与通知:实现消息订阅功能
175|插件开发:转发插件内页面
第九章:小程序第三方开发框架简介与使用 (4讲)
176|在小程序中使用Vue:使用kbone创建同构项目
177|Webpack构建小程序项目的示例:支持原生混合开发与云开发
178|课程答疑:如何使用源码
179|课程回顾及结束语
05 | 小程序运行机制简介:从零构建一个Web App需要做哪些事情?

05 | 小程序运行机制简介:从零构建一个Web App需要做哪些事情?

李艺
腾讯云TVP
已完结7769
37
本节摘要

12人觉得很赞给内容提建议

登录 后留言

精选留言(16)

  • 小程序实战专栏作者李艺
    置顶
    https://mp.weixin.qq.com/s/UX60IDer13C3YWPqnaDZHA
    微信小程序底层机制:小程序基础库主要包括什么内容?

    (关于小程序运行机制,推荐补充看一下这篇文章)
    2020-05-23
    1
    4
  • 3.141516
    之前碰到 map 组件在滑动的时候,没办法跟着一起滑动应该就是因为 map 为原生组件,其层级在一般组件之上。

    原生组件包括:camera、canvas、input、live-player、live-pusher、map、textarea、video。

    不过刚刚看了下官网发现,现在 map、video、live-player、live-pusher、canvas(2d) 组件已经支持同层渲染了,官网链接:https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html#原生组件同层渲染。

    别人写的同层渲染原理文章:https://developers.weixin.qq.com/community/develop/article/doc/000c4e433707c072c1793e56f5c813

    作者回复: 是的,这是一篇讲同层渲染的好内容,推荐大家读下。
    同时推荐另一篇:https://juejin.im/post/5e7ad0d1e51d4526cd1e149b
    为啥说小程序不简单呢,看完同层渲染就认同了~~

    2020-05-20
    4
  • Middleware

    # 小程序的启动方式

    - 冷启动
    - 热启动


    # 什么是热启动
    加入用户已经打开过某个小程序,然后在一定时间内再次打开,此时它不需要重新启动,只是将后台状态的小程序切换到前台,这就是热启动。

    # 什么是冷启动
    用户首次打开小程序,或者是小程序被微信主动销毁之后再次打开,这时候小程序需要重新加载并启动

    # 检测新版本
    小程序冷启动时如果发现新版本,将会异步下载新版本的代码包,并且同时用客户端本地的代码包进行启动,既新版本的小程序需要等下一次冷启动才用得上

    # 小程序主动销毁的情况

    1. 小程序进入后台,在后台维持运行;超过一定的时间,大概是5分钟;就会被微信主动销毁
    2. 短时间内,目前为5秒钟,连续2次以上收到系统内存警告;微信就会对小程序进行主动销毁。将会收到提示:运行内存不足,请重新打开小程序。我们可以用 wx.onMemoryWarning 监听内存的警告事件,提前处理

    作者回复: 👍

    2020-05-23
    2
  • Geek_jack
    网址为 https://raw.githubusercontent.com/geektime-geekbang/geektime-WeChat-Applets/master/第一章:重新认识微信小程序及%202020%20年最新发布的平台能力.pdf 的网页可能暂时无法连接,或者它已永久性地移动到了新网址。
    李老师,课件好像无法下载呢?

    作者回复: 如果不行,可以试一下git clone的方法~

    2020-12-13
    1
    1
  • 龙的心
    阳明心学,老师讲的挺好,跟踪学习中.

    作者回复: 最佳留言奖

    2020-10-21
    1
  • John
    据说小程序要借用flutter的架构 老师对使用基于flutter的工具和taro来开发小程序怎么👀呢

    作者回复: 我对flutter也比较感兴趣,你如果看到了比较好的基于它的实践,欢迎发给我,我们一起研究学习一下,祝天天进步。

    2020-07-07
    1
  • 小丸子
    老师 vx.login获取code后传给后台服务器 后台nodejs去调用接口获取openid 目前后台有没有封装好的直接npm能用的

    作者回复: 有的,你从源码中也可以看到,因为长时间没有维护,那个模块有bug了,欢迎你给原作者提一个pr

    2020-06-08
    1
    1
  • 卢珑文
    # 热启动

    1. 已经打开过小程序,一定时间内再次打开,不需要重新启动;将后台状态的小程序切换到前台

    # 冷启动

    1. 首次打开是冷启动
    2. 被微信销毁关闭后,再次打开,需要重新加载运行
       1. 冷启动如果发现新版本,将会异步下载新版本的代码包;
       2. 并且同时用客户端的本地代码进行启动
       3. 新版本的小程序要等下一次的冷启动才会用上

    # 小程序主动销毁的情况

    1. 小程序进入后台,在后台维持运行;超过一定的时间,大概是5分钟;就会被微信主动销毁
    2. 短时间内,大概5秒钟,连续2次以上收到系统内存警告;微信就会对小程序进行主动销毁
       1. 会收到提示:运行内存不足,请重新打开小程序
       2. 用 wx.onMemoryWarning 监听内存的警告事件,提前处理

    作者回复: 👍

    2020-05-21
    1
  • 🙃沃野乡里😄
    请问如何查看源码和课件?

    作者回复: 在最后一节有所有课件。也给你发一下,

    链接: https://pan.baidu.com/s/1mJq_NVstuPpNRi7PDawjkg 提取码:liyi

    这是Mac上的keynote文件,如果在Windows上查看,可以从这个网站转化: https://zhuanhuan.supfree.net/hao.asp?f=key&t=pdf

    2021-03-15
  • 夏微
    李老师,那个课件和demo的资源下不下来

    作者回复: 从这里一气下载所有课件
    ---
    有读者问到视频专栏《微信小程序全栈开发实战》的演示文稿,我整理了出来,都在这里了:
    链接:https://pan.baidu.com/s/1mJq_NVstuPpNRi7PDawjkg
    提取码:liyi

    2021-03-11
  • HoSalt
    「后续的数据数据更新,不与后台交互相关,我们就使用WXS编程语言」
    不是说WXS不能绑定事件吗,那怎么交互?

    作者回复: 有机制可以绑定,稍后大概在picker-view时有详细介绍~

    2020-07-01
  • 卡尔
    老师,在上一个页面里把数据加载好,怎么传递到下一个页面呢?用query传也会闪白吧,用localstroage吗?

    作者回复: https://b23.tv/BV1CK411n7wr
    直播中有这个问题

    2020-06-28
    1
  • InfoQ_56473c01003d
    老师,请问如何在onLoad之前初始化后台返回的数据?还是说是在onLoad中调用后台接口,初始化Data中的数据,然后通过setData更新界面?

    作者回复: 在本页面onLoad 加载数据,再渲染视图,这里一般做法,可能页面会有闪白现象。
    更好的做法是在上一个页面把数据加载好,在本页面的onLoad周期函数里面直接绑定。

    2020-06-03
  • 翠玉奶白菜
    支持老师~支持阳明学说^_^

    作者回复: 坚持,践行之,一起~~

    2020-05-28
  • 一步
    检查是否新版本只有 微信主动销毁以后再次打开的时候吗? 从后台转为前台会不会检查新的版本?

    作者回复: 从后台转前台是热启动。是不检查的。
    但热启动的有效时间是很短的。我们今天看昨天打开的小程序,其实都不是热启动,都是检查版本的~

    2020-05-21
  • InfoQ_31b5ad0788d7
    分:冷启动,热启动
    检测小程序版本,异步下载,下次使用新版本
    view试图线程
    appservice逻辑线程

    作者回复: 👍

    2020-05-21
收起评论
看过的人还看
数据结构与算法之美

王争 前Google工程师

81讲 | 113598 人已学习

新人首单¥69.9原价 ¥199
MySQL实战45讲

林晓斌 网名丁奇,腾讯云数据库负责人

49讲 | 78644 人已学习

新人首单¥69.9原价 ¥199
左耳听风

陈皓 网名“左耳朵耗子”,资深技术专家,骨灰级程序员

118讲 | 57578 人已学习

新人首单¥99原价 ¥399
设计模式之美

王争 前Google工程师,《数据结构与算法之美》专栏作者

113讲 | 40428 人已学习

新人首单¥99原价 ¥299