微信小程序开发指南(腾讯).docx

发布时间：2022-06-14 发布人：admin 分类：说明书资料大小：13.66M 资料格式：docx 举报版权申诉

a6aae9cb-9585-495f-8b44-36d4c61ef925.docx.pdf-第1页.png

第1页 / 共175页

a6aae9cb-9585-495f-8b44-36d4c61ef925.docx.pdf-第2页.png

第2页 / 共175页

a6aae9cb-9585-495f-8b44-36d4c61ef925.docx.pdf-第3页.png

第3页 / 共175页

a6aae9cb-9585-495f-8b44-36d4c61ef925.docx.pdf-第4页.png

第4页 / 共175页

a6aae9cb-9585-495f-8b44-36d4c61ef925.docx.pdf-第5页.png

第5页 / 共175页

a6aae9cb-9585-495f-8b44-36d4c61ef925.docx.pdf-第6页.png

第6页 / 共175页

a6aae9cb-9585-495f-8b44-36d4c61ef925.docx.pdf-第7页.png

第7页 / 共175页

a6aae9cb-9585-495f-8b44-36d4c61ef925.docx.pdf-第8页.png

第8页 / 共175页

第1章小程序介绍与开发环境

1.1 Hello World

1.2 小程序介绍

1.2.1 小程序技术发展历史

1.2.2 小程序与普通网页开发的区别

1.3 小程序的特色

1.4 小程序开发准备

1.4.1 申请AppID

1.4.2 安装开发者工具

1.4.3 第一个小程序

1.5 本章小结

第2章小程序代码组成

2.1 JSON 配置

2.1.1 一个例子

2.1.2 JSON 语法

2.2 WXML 模板

2.2.1 介绍

2.2.2 数据绑定

2.2.3 逻辑语法

2.2.4 条件逻辑

2.2.5 列表渲染

2.2.6 模板

2.2.7 引用

2.2.8 共同属性

2.3 WXSS 样式

2.3.1 文件组成

2.3.2 尺寸单位

2.3.3 WXSS引用

2.3.4 内联样式

2.3.5 选择器

2.3.6 官方样式库

2.4 JavaScript 脚本

2.4.1 ECMAScript

2.4.2 小程序的执行环境

2.4.3 模块化

2.4.4 脚本的执行顺序

2.4.5 作用域

2.5 本章小结

第3章理解小程序宿主环境

3.1 渲染层和逻辑层

3.1.1 渲染“Hello World”页面

3.1.2 通信模型

3.1.3 数据驱动

3.1.4 双线程下的界面渲染

3.2 程序与页面

3.2.1 程序

1. 程序构造器App()

2. 程序的生命周期和打开场景

3. 小程序全局数据

3.2.2 页面

1. 文件构成和路径

2. 页面构造器Page()

3. 页面的生命周期和打开参数

4. 页面的数据

5. 页面的用户行为

6. 页面跳转和路由

3.3 组件

3.4 API

3.5 事件

3.5.1 什么是事件

3.5.2 事件类型和事件对象

3.5.3 事件绑定与冒泡捕获

3.6 兼容

3.7 本章小结

第4章场景应用

4.1 开发流程基本介绍

4.2 基本的布局方法——Flex布局

4.2.1 基本概念

4.2.2 容器属性

4.2.3 项目属性

4.3 界面常见的交互反馈

4.3.1 触摸反馈

4.3.2 Toast和模态对话框

4.3.3 界面滚动

4.4 发起HTTPS网络通信

4.4.1 wx.request接口

4.4.2 服务器接口

4.4.3 请求参数

4.4.4 收到回包

4.4.5 一般使用技巧

1. 设置超时时间

2. 请求前后的状态处理

4.4.6 排查异常的方法

4.5 微信登录

4.5.1 获取微信登录凭证code

4.5.2 发送code到开发者服务器

4.5.3 到微信服务器换取微信用户身份id

4.5.4 绑定微信用户身份id和业务用户身份

4.5.5 业务登录凭证SessionId

4.6 本地数据缓存

4.6.1 读写本地数据缓存

4.6.2 缓存限制和隔离

4.6.3 利用本地缓存提前渲染界面

4.6.4 缓存用户登录态SessionId

4.7 设备能力

4.7.1 利用微信扫码能力

4.7.2 获取网络状态

4.8 本章小结

第5章小程序的协同工作和发布

5.1 协同工作

5.1.1 人员组织结构和权限分配

5.1.2 小程序的版本

5.2 用户体验审视

5.2.1 产品和运营思路

5.2.2 体验和设计评估

1. 导航清晰

2. 流程明确

3. 重点突出

4. 符合预期

5. 等待与反馈

6. 异常处理

7. 内容和文案准确友好

8. 和谐统一

9. 平台适配

5.2.3 用户体验测试和完善体验

5.3 发布

5.3.1 发布前最后的检查

5.3.2 发布模式

5.3.3 小程序码

5.4 运营

5.4.1 数据分析

1. 常规分析

2. 自定义分析

5.4.2 运维中心

5.4.3 微信开发者社区

5.5 本章小结

第6章底层框架

6.1 双线程模型

6.1.1 技术选型

6.1.2 管控与安全

6.1.3 天生的延时

6.2 组件系统

6.2.1 Exparser框架

6.2.2 内置组件

6.2.3 自定义组件

1. ShadowTree的概念

2. 运行原理

3. 组件间通信

6.3 原生组件

6.3.1 原生组件运行机制

6.3.2 原生组件渲染限制

6.4 小程序与客户端通信原理

6.4.1 视图层组件

6.4.2 逻辑层接口

6.5 本章小结

第7章性能优化

7.1 启动

7.1.1 代码包下载

7.1.2 分包加载流程

7.1.3 代码包加载

7.2 页面层级准备

7.3 数据通信

7.3.1 页面初始数据通信

7.3.2 更新数据通信

7.3.3 用户事件通信

7.4 视图层渲染

7.4.1 初始渲染

7.4.2 重渲染

7.5 原生组件通信

7.6 本章小结

第8章小程序基础库的更新迭代

8.1 小程序基础库

8.1.1 基础库载入时机

8.1.2 基础库的版本号

8.2 异常

8.2.1 JS运行异常

8.2.2 捕捉JS异常的方法

8.3 基础库的更新

8.3.1 基础库版本变动

8.3.2 推送基础库过程

8.4 本章小结

第9章微信开发者工具

9.1 简介

9.2 代码编译

9.2.1 编译WXML

9.2.2 编译WXSS

9.2.3 编译JavaScript

9.3 模拟器

9.3.2 逻辑层模拟

9.3.3 渲染层模拟

9.3.4 客户端模拟

9.3.5 通讯模拟

9.4 调试器

9.5 本章小结

微信小程序开发指南(腾讯) https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a 微信小程序团队 v1.0 更新于 2018.03.23 目录

第 1 章小程序介绍与开发环境小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布。最后一次编辑于 03 月 11 日（未经腾讯允许，不得转载）

1.1 Hello World 在详细介绍小程序历史和技术细节前，请先跟随我们的步骤完成开发 Hello World 例子。第一步，请前往 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 微信开发者工具下载页面根据自己的操作系统下载对应的安装包进行安装。第二步，打开微信开发者工具，选择新建小程序项目，我们先不需理解 AppID 的概念，新建项目时选择无 AppID，并取消勾选“建立普通快速启动模板”的选项。最后一步，我们来添加必要的代码。在根目录下创建 app.json，其内容如下。 { } "pages": ["pages/index/index"] 在根目录下新建 pages 目录，然后在 pages 目录下新建 index 目录，接着在 index 目录下创建两个文件 index.wxml 和 index.js。 index.wxml 的内容如下所示。Hello World index.js 的内容如下所示。Page({}) 通过编写以上短短的几行代码，微信开发者工具的模拟器界面上显示出 Hello World。 1.2 小程序介绍 1.2.1 小程序技术发展历史从技术的维度看，小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。一些开发者应该对下面的代码有印象：代码清单 1-1 使用 WeixinJSBridge 预览图片 WeixinJSBridge.invoke('imagePreview', { current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641', urls: [ // 所有图片的 URL 列表，数组格式 'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg', 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg', 'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'

] }, function(res) { console.log(res.err_msg) }) 这是一个调用微信原生组件浏览图片的 JS API，相比于额外引入一个 JS 图片预览组件库，这种调用方式显得非常简洁和高效。实际上，微信官方是没有对外暴露过如此调用的，此类 API 最初是提供给腾讯内部一些业务使用，很多外部开发者发现了之后，依葫芦画瓢地使用了，逐渐成为微信中网页的事实标准。 2015 年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个 API。给所有的 Web 开发者打开了一扇全新的窗户，让所有开发者都可以使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情了。同样是调用原生的浏览图片，调用方式如代码清单 1-2 所示。代码清单 1-2 使用 JS-SDK 调用图片预览组件 wx.previewImage({ current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg', urls: [ // 所有图片的 URL 列表，数组格式 'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg', 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg', 'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg' ], success: function(res) { console.log(res) } }) JS-SDK 是对之前的 WeixinJSBrige 的一个包装，以及新能力的释放，并且由对内开放转为了对所有开发者开放，在很短的时间内获得了极大的关注。从数据监控来看，绝大部分在微信内传播的移动网页都使用到了相关的接口。 JS-SDK 解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力，然而在更多的能力之外，JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题。用户在访问网页的时候，在浏览器开始显示之前都会有一个的白屏过程，在移动端，受限于设备性能和网络速度，白屏会更加明显。我们团队把很多技术精力放置在如何帮助平台上的 Web 开发者解决这个问题。因此我们设计了一个 JS-SDK 的增强版本，其中有一个重要的功能，称之为“微信 Web 资源离线存储”。以下文字引用自内部的文档（没有最终对外开放）：微信 Web 资源离线存储是面向 Web 开发者提供的基于微信内的 Web 加速方案。

通过使用微信离线存储，Web 开发者可借助微信提供的资源存储能力，直接从微信本地加载 Web 资源而不需要再从服务端拉取，从而减少网页加载时间，为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。这个设计有点类似 HTML5 的 Application Cache，但在设计上规避了一些 Application Cache 的不足。在内部测试中，我们发现离线存储能够解决了一些问题，但是对于一些复杂的页面依然会有白屏的问题，例如页面加载了大量的 CSS 或者是 JavaScript 文件，这些文件的执行时间占用了大量的 UI 线程，这种时候，即使通过离线存储快速的加载资源，但是依旧会有页面的白屏现象，同时这样分文件的 Cache 在处理代码文件更新的时候操作较为繁杂，对开发者的要求较高。除了白屏，影响 Web 体验的问题还有缺少操作的反馈，主要表现在两个方面：页面切换的生硬和点击的迟滞感。对于一些有经验的 Web 开发者而言，会使用一些 SPA 的框架，来模拟客户端原生的页面切换过渡。通常的方式是在一个 WebView 中去模拟多个页面，通过 CSS 处理，加之精细化的脚本代码做到点击反馈和页面切换，获得较好的体验。然而并不是所有的开发者都有足够的时间和精力来使得页面的体验变得出色。微信面临的问题是如何设计一个比较好的系统，使得所有开发者在微信中都能获得比较好的体验。这个问题是之前的 JS-SDK 所处理不了的，需要一个全新的系统来完成，它需要使得所有的开发者都能做到： - 快速的加载 - 更强大的能力 - 原生的体验 - 易用且安全的微信数据开放 - 高效和简单的开发这一系统就是本书中需要详细阐述的小程序。 1.2.2 小程序与普通网页开发的区别小程序的主要开发语言是 JavaScript ，所以通常小程序的开发会被用来同普通的网页开发来做对比。两者有很大的相似性，对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，

并没有一个完整浏览器对象，因而缺少相关的 DOM API 和 BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ 浏览器等，在移动端需要面对 Safari、Chrome 以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的，如表 1-1 所示。表 1-1 小程序的运行环境运行环境逻辑层渲染层 iOS 安卓 JavaScriptCore WKWebView X5 JSCore X5 浏览器小程序开发者工具 NWJS Chrome WebView 网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。最后一次编辑于 03 月 11 日（未经腾讯允许，不得转载） 1.3 小程序的特色对于普通用户，小程序实现了应用的触手可及，只需要通过扫描二维码、搜索或者是朋友的分享就可以直接打开，加上优秀的体验，小程序使得服务提供者的触达能力变得更强。对于开发者而言，小程序框架本身所具有的快速加载和快速渲染能力，加之配套的云能力、运维能力和数据汇总能力，使得开发者不需要去处理琐碎的工作，可以把精力放置在具体的业务逻辑的开发上。

小程序的模式使得微信可以开放更多的数据，开发者可以获取到用户的一些基本信息，甚至能够获取微信群的一些信息，使得小程序的开放能力变得更加强大。 1.4 小程序开发准备 1.4.1 申请 AppID 开发小程序的第一步，需要拥有一个小程序 AppID，后续的所有开发流程会基于这个 AppID 来完成。小程序的注册非常简单，只需几个操作。使用浏览器打开 https://mp.weixin.qq.com/ 点击立即注册，如图 1-1 所示，在打开的页面中选择小程序后，填入相关的信息，就可以完成注册了。注册成功之后，点击 “开发”—“开发设置” 就可以看到小程序的 AppID，如图 1-2 所示。图 1-1 注册小程序

图 1-2 获取 AppID 1.4.2 安装开发者工具在小程序开发文档中找到小程序开发工具的下载页面，或者直接输入 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 根据自己的操作系统下载对应的安装包进行安装。需要注意的是，小程序开发工具在 Windows 上仅支持 Windows 7 及以上版，在 Mac 上支持 OS X 10.8 及以上版本。 Windows 上，双击下载完成的安装文件，如图 1-3 所示。根据提示点击下一步，即可完成安装，安装成功后，可以在桌面或者开始菜单中找到小程序开发工具的快捷方式，打开即可。图 1-3 Windows 的安装界面

分享到：

赞收藏

资料库

微信小程序开发指南(腾讯).docx

相关推荐

开发技术

热门标签

最新资料