小程序开发教程

Transcription

1 s 小程序开发 入 门教程

2 目录 CONTENTS 微信 小程序介绍与准备上 手第 一个 小程序微信 小程序开发框架微信 小程序原 生组件微信 小程序原 生API 小程序开发核 心技能 小程序开发项 目实战案例例 小程序开发实战注意事项与进阶指导

3 微信 小程序介绍与开发准备 1 为什什么会有 小程序? 2 什什么是 小程序? 背景 3 小程序和移动应 用程序区别 4 小程序能做什什么?

4 微信 小程序介绍与开发准备 为什什么会有 小程序 更更好的 体验 诞 生背景 规范与 管理理

5 微信 小程序介绍与开发准备 什什么是 小程序 什什么是 小程序 小程序是 一种不不需要下载安装即可使 用的应 用, 它实现了了应 用 触 手可及 的梦想 用户扫 一扫或者搜 一下即可打开应 用, 也体现了了 用完即 走 的理理念 用户不不 用关 心是否安装太多应 用的问题 应 用将 无处不不在, 随时可 用, 但 又 无需安装卸载

6 微信 小程序介绍与开发准备 小程序与应 用程序区别 APP 应 用 小程序 vs 无需安装不不占内存易易传播

7 微信 小程序介绍与开发准备 小程序能做什什么 内容 / 工具 小程序零售 小程序游戏 / 娱乐 小程序 知乎热 榜微博热 门 拼多多 京东购物 跳 一跳 欢乐 斗地主 摩拜单 车 今 日头条 蘑菇街 女女装精选 每 日优鲜 欢乐麻将全集 斗 鱼直播 腾讯地图 讯翻译君 小 米商城 屈 臣 氏官 方商城 腾讯 NOW 直播 YY 直播

8 微信 小程序介绍与开发准备 从业 人员就业前景和发展 小程序 生态云图 s 游戏 小游戏 头脑王者全 民 大乐 斗贵州麻将星途 wegoing 天天德州保卫萝 卜讯玩版 广州麻将爱消除乐园跳跃 音符纪念碑碑 谷 开发 / 服务 即速应 用有赞轻芒 小程序 + 微萌 SEE 小店铺腾讯云 小程序解决 方案 出 行行朝夕 日历功夫打印花帮主识花朋友猜猜 小纸条微应 用画画猜猜云充吧微驿站 小游戏开发商腾讯育碧 生活开眼视频 小睡眠卡路路 里里 日记 食物派 lite 91ud 小程序商店 即速商店 很快 小程序商店 第三 方服 务 内容百思不不得姐 lite k 米点歌汽 车 大事问答实时 NBA 99 广场舞视频 电商什什么值得买卷 皮折扣猫眼电影了了不不起百货店蜜芽拼团官 方拼多多 第九程序 小程序管家 知晓程序 应 用商店 华映资本君联资本平安创投熊猫资本达晟创投创新 工场红杉资本真格基 金金经纬中国 IDG 资本 社群 Bi 神器器 一键接 龙群 play 小打卡群约助 手 出 行行 出 行行南航 e 行行 创业者 交通通勤勤助 手铁友实 车 行行情 非常准查航班神州租 车 GO 运营者 传统 行行业 餐饮 Coco 都可以 手机点餐肯德基会员活动 麦当劳星巴克 用星说沃尔玛卡包幸福 西饼 互联 网公司代表 投资机构 爱奇艺视频 大众点评滴滴出 行行汽 车之家 小 米商城腾讯视频今 日头条京东购物美团外卖 + 摩拜单 车携程酒店机票 火 车票 金金融 南粤银 行行北北京银 行行信 用卡农 行行微服务中信信 用卡 门店 七 牛云 通晓程序 知晓程序 媒体 通晓程序 LeamClod 知晓云 阿 里里云 腾讯云 Bass 苏宁易易购云店万达 广场优 衣库 UNIQLO 屈 臣 氏 E 卡 造程序 微果酱 即速咨讯 晓程序观察 分析 工具 Growinglo 小程序数据助 手 QuestMoblie 腾讯移动助 手 TalkigData 神策数据易易观 方 舟阿拉丁及策

9 微信 小程序介绍与开发准备 从业 人员就业前景和发展 小程序 生态 开发者总数 :100 万 + 第三 方平台 : 岁以下占 比 :5.5% 海海外开发者占 比 :1.1% 女女性开发者 :1.6% 已上线 小程序数 :58 万 + 日活跃 用户数 :1.7 亿 + 一线城市 :30% 二线城市 :20% 三线城市 :19% 四线及以下 :31%

10 微信 小程序介绍与开发准备 小程序开发准备 工作 1 信息登记 3 完善 小程序 信息 5 注册 小程序 账号 2 4 绑定开发者 激活邮箱 登录 小程序 管理理后台

11 微信 小程序介绍与开发准备 安装使 用微信开发者 工具 安装微信开发者 工具

12 微信 小程序介绍与开发准备 安装使 用微信开发者 工具 1 2 3

13 微信 小程序介绍与开发准备 安装使 用微信开发者 工具

14 微信 小程序介绍与开发准备 安装使 用微信开发者 工具 体验版本 小程序版本 开发版本 审核版本 线上版本

15 上 手第 一个 小程序 小程序代码结构与基本配置 app.js app.json app.wxss project.config.json pages utils

16 上 手第 一个 小程序 小程序代码结构与基本配置 navigationbarbackgroundcolor navigationbartextstyle navigationbartitletext backgroundcolor backgroundtextstyle onreachbottomdistance enablepulldownrefresh Pages tabbar networktimeo debug app page disablescroll navigationstyle

17 目录 CONTENTS 微信 小程序开发框架 微信 小程序原 生组件 微信 小程序原 生 API

18 微信 小程序开发框架 WXML WXML WXML(WeiXin Markup Language) 是框架设计的 一套标签语 言, 结合组件 WXS 和事件系统, 可以构建出 页 面的结构 语法

19 微信 小程序开发框架 WXML

20 微信 小程序开发框架 基本构成 WXML WXSS WXS Java Script

21 微信 小程序开发框架 WXML 数据绑定 WXML 列列表渲染 条件渲染 模板引 用

22 微信 小程序开发框架 数据绑定 Mustache

23 微信 小程序开发框架 数据绑定

24 微信 小程序开发框架 数据绑定

25 微信 小程序开发框架 属性

26 微信 小程序开发框架 列列表渲染

27 微信 小程序开发框架 条件渲染

28 微信 小程序开发框架 模板引 用

29 微信 小程序开发框架 模板引 用 import 文件 引 用 include

30 微信 小程序开发框架 模板引 用

31 微信 小程序开发框架 模板引 用

32 微信 小程序开发框架 模板引 用

33 微信 小程序开发框架 WXSS WXSS WXSS (WeiXin Style Sheets) 是 一套样式语 言, 用于描述 WXML 的组件样式 CSS (Cascading Style Sheets) CSS 是 一套样式语 言, 是 一种样式表语 言, 用来描 述 HTML 或 XML 文档的呈现 width height position color border

34 微信 小程序开发框架 WXSS 尺 寸单位 rpx WXSS 样式导 入 内联样式 选择器器

35 微信 小程序开发框架 WXSS 设备像素 (device pixels) CSS 像素 (CSS pixels) PPI/DPI (pixel per inch) rpx DPR (devicepixelratio)

36 微信 小程序开发框架 WXSS 以 iphone6 为例例 4.7 = 325.6

37 微信 小程序开发框架 执 行行顺序 样式导 入 从上到下 从左往右

38 微信 小程序开发框架 WXSS

39 微信 小程序开发框架 WXSS 内联样式 : style

40 微信 小程序开发框架 WXSS 优先级?

41 微信 小程序开发框架 WXSS 优先级!important style #element.element element

42 微信 小程序开发框架 JavaScript JavaScript 是 一种轻量量的 解释型的 面向对象的头等函数语 言, 是 一种动态的基于原型和多范式的脚本语 言, 支持 面向对象 命令式和函数式的编程 风格 JavaScript 高级程序设计 JavaScript 权威指南

43 微信 小程序开发框架 JavaScript 语法 类型 ECMAScript 语句句 关键字 操作符 对象

44 微信 小程序开发框架 JavaScript 浏览器器中的 JavaScript ECMAScript DOM BOM

45 微信 小程序开发框架 JavaScript Nodejs 中的 JavaScript ECMAScript Native NPM

46 微信 小程序开发框架 JavaScript 小程序中的 JavaScript ECMAScript 小程序框架 小程序 API

47 微信 小程序开发框架 JavaScript IOS android IDE JavaScriptCore X5 内核 nwjs

48 微信 小程序开发框架 WXS 模块 变量量 注释 WXS 运算符 语句句 数据类型 基础类库

49 微信 小程序开发框架 WXS 模块

50 微信 小程序开发框架 WXS

51 微信 小程序开发框架 WXS

52 微信 小程序开发框架 WXS

53 微信 小程序开发框架 WXS

54 微信 小程序开发框架 MINA 框架及运 行行机制 框架 实现 运 行行 机制

55 MINA 框架 View( 视图层 ) page page page App Service( 逻辑层 ) Manger API WXML WXSS Event Data Data Event JSBridge 微信能 力力离线存储 网络请求 Native( 系统层 )

56 运 行行机制 启动 冷启动 启动 热启动

57 运 行行机制 加载 In WeChat Network View Data Event App Service Init request Package CDN Event Data Ajax request JSON Data Web Server Storge

58 微信 小程序开发框架 生命周期 onlaunch 程序 生命周期 onshow onhide globaldata onerror

59 微信 小程序开发框架 生命周期 onload 页 面 生命周期 onshow onready onhide onunload data

60 微信 小程序开发框架 生命周期 Create.. onload onshow onready onhide onshow onunload AppService Thread Start Created waiting notify.. waiting notify.. Active Alive Active End View Thread Init.. Notify. send Initial Data Notify. First Render send Data send Data send Data Start Inited waiting data.. Ready Rerender Rerender Rerender End

61 微信 小程序开发框架 路路由

62 微信 小程序开发框架 路路由

63 微信 小程序开发框架 事件 事件 事件是视图层到 逻辑层的通讯 方 式 事件可以将 用户 的 行行为反馈到逻 辑层进 行行处理理 事件可以绑定在组件上, 当达到触发事件, 就会执 行行逻辑层中对应的事件处理理函数 事件对象可以携 带额外信息

64 微信 小程序开发框架 事件

65 微信 小程序开发框架 事件 事件捕获阶段 事件处理理阶段 view view view 事件捕获阶段 事件冒泡阶段 view 事件处理理阶段 事件冒泡阶段

66 微信 小程序开发框架 事件 可捕获事件 可冒泡事件 touchstart touchmove touchcancel touchend tap longpress longtap touchstart touchmove touchcancel touchend tap longtap transitionend animationstart animationiteration animationend longpress touchforcechange

67 微信 小程序开发框架 组件 组件是视图层的 基本组成单元 组件 自带 一些功能与 微信 风格的样式 组件 一个组件通常包括 : 开始标签和结束标签 属性 用来修饰这个组件 内容在两个标签之内

68 微信 小程序开发框架 组件 媒体组件 视图容器器 地图 开放能 力力 组件 基础内容 表单组件 画布 导航

69 微信 小程序开发框架 组件 icon 基础内容 text rich-text progress

70 微信 小程序开发框架 组件 view scroll-view swiper movable-view cover-view 视图容器器

71 微信 小程序开发框架 组件 表单组件 button checkbox form input label picker picker-view radio switch text-area

72 微信 小程序开发框架 组件 导航组件 navigato

73 微信 小程序开发框架 组件 audio image 媒体组件 video live-player camera live-pusher

74 微信 小程序开发框架 组件 地图组件 map

75 微信 小程序开发框架 组件 画布组件 canvas

76 微信 小程序开发框架 组件 open-data 开放能 力力 组件 web-view

77 微信 小程序开发框架 组件 自定义组件? 怎么写 自定义组件?

78 微信 小程序开发框架 组件

79 微信 小程序开发框架 API API 网络 媒体 文件 数据缓存 位置 设备 界 面 开放接 口

80 微信 小程序开发框架 API wx.on 规则 Object 参数 wx.get/wx.set success fail complete

81 微信 小程序开发框架 API 直调函数 回调函数

82 微信 小程序开发框架 API HTTP 是基于 TCP/IP 通信协议通过万维 网服务器器传输 数据到本地浏览器器的应 用层协议 websocket 是由 HTML5 规范提出的 一种在单个 TCP 连接上 进 行行全双 工通信的应 用层协议

83 微信 小程序开发框架 API 微信 APP ios : 版本要求 微信 APP android : 小程序基础库最低版本要求 :1.7.0

84 微信 小程序开发框架 登录授权 小程序 MiniProgram 开发者服务器器 Developer Service 微信接 口服务 Wechat Http Api wx.login( ) 获取 code wx.request( ) 发送 code 登录凭证校验接 口 appid+appsecret+code 登录 流程 返回 自定义登录态 自定义登录态存 入storage wx.request ( ) 发起业务请求携带 自定义登录态返回业务数据 session_key + openid 等 自定义登录态与 openid session_key 关联 通过 自定义登录态查询 openid 和 session_key 小程序 MiniProgram 开发者服务器器 Developer Service 微信接 口服务 Wechat Http Api

85 微信 小程序开发框架 登录授权 注意事项 code 和 session_key 为 一 一对应的关系 session_key 有时效性

86 微信 小程序开发框架 登录授权 开始 小程序启动 onlaunch 业务端 Yes checksession storage 存在 skey 登录态过期 No login() 登录态未过期 业务请求 结束

87 微信 小程序核 心功能 微信 支付

88 微信 小程序核 心功能 微信 支付 设置密钥并 下载商户证书 确认 web 服务 器器 https 服务

89 微信 小程序核 心功能 微信 支付 绘制交互 支付交互图 微信 支付 用户微信 小程序商户系统 进 入 小程序. 下单 () 用户确认 支付 () 请求下单 支付 () 返回 支付参数 (5 个参数和 sign) 调 用 小程序登陆 API() 返回 Openid() 生成商户订单 () 调 用 支付统 一下单 API() 返回预付单信息 (prepay_id) 鉴权调起 支付 () 将组合数据再次签名 () 返回 支付结果 () 微信后台 展示 支付结果 () 推送 支付结果 () 更更新订单状态 ()

90 微信 小程序核 心功能 模板消息 推送位置 服务通知 下发条件 支付 / 提交表单 跳转能 力力 小程序各个 页 面

91 微信 小程序核 心功能 转发 Page.onShareAppMessage

92 微信 小程序核 心功能 打开 APP 打开 小程序 小程序启动 主动触发 是否是 APP 分享卡 片1036? No Yes 同 一微信开放平台账号 Yes 是否是 1089 任务栏 1099 长按 多任务 No 只 支持分享 至好友会话 flag 置为 true 可以打开 APP Yes 保持 flag 不不变 flag 为 true? No flag 置为 false 不不可以打开 APP

93 微信 小程序实战项 目 小书架 登录授权已购书籍浏览书籍评论模块 需求 分析 个 人信息书籍详情书籍列列表推送消息

94 微信 小程序实战项 目 小书架 E-R 图

95 微信 小程序实战项 目 小书架 users 数据库设计 books comments orders access

96 微信 小程序实战项 目 小书架 前 端 服 务 端

97 微信 小程序组件化开发框架 wepy

98 微信 小程序组件化开发框架 优化 提 高 页 面加载速度 Oms 300~400ms 500~600ms 优化前 load page fetching data 优化后 fetching data start redirect page onload fetching data end

99 微信 小程序组件化开发框架 优化 Promise 异步解决 方案

100 微信 小程序组件化开发框架 优化 首屏图 片本地加载 图 片优化 内容类图 片迁移 至 cdn

101 微信 小程序组件化开发框架 分包加载 首次启动, 先下载 小程序主包 分包加载 进 入某个分包 页 面时, 下载对应分包