第1页 / 共751页
第2页 / 共751页
第3页 / 共751页
第4页 / 共751页
第5页 / 共751页
第6页 / 共751页
第7页 / 共751页
第8页 / 共751页
微信小程序技术参考手册.docx
初识微信小程序
微信小程序是什么
程序
小
简介
背景和作用
设计指南
概要
友好礼貌
重点突出
案例示意1
案例示意2
流程明确
清晰明确
导航明确，来去自如
小程序菜单
小程序菜单深浅配色方案（iOS和Android）
页面内导航
减少等待，反馈及时
启动页加载
页面下拉刷新加载
页面内加载反馈
模态加载
局部加载反馈
全局加载反馈
加载反馈注意事项
结果反馈
页面局部操作结果反馈
页面全局操作结果——图标型弹出提示
页面全局操作结果——文字型弹出提示
页面全局操作结果——模态对话框
页面全局操作结果—结果页
异常可控，有路可退
异常状态——表单出错
便捷优雅
减少输入
避免误操作
利用接口提升性能
统一稳定
视觉规范
字体
字体颜色
列表
表单输入
按钮
图标
资源下载
制作
微信小程序制作流程
注册
技术栈
HTML
CSS
JavaScript
变量和数据类型
函数
对象
总结
准备工作
IDE搭建
一、下载工具包
二、安装步骤
知识准备
获取微信小程序的AppID
申请帐号
开发工具
概览
开发工具实战
获取开发工具
扫码登录
创建项目
添加项目
新建项目
项目目录
模拟器
调试工具
Wxml panel
Sources panel
Network panel
Appdata panel
Storage panel
Console panel
小程序操作区
五大微信小程序开发IDE深度评测
微信小程序官方开发工具
Sublime Text 3
Vim + WEPT
WebStorm
Egret Wing
总结
测试
概述
测试工具选择
测试工具使用
测试用例文档
管理员web测试
测试过程
微信小程序前端测试
发布前的准备
用户身份
预览
上传代码
小程序的版本
上线
提交审核
发布
运营数据
微信小程序架构分析
项目目录结构
开发思路
基础
微信小程序中的文件
app.json
project.config.json
page.json
app.js
app.wxml
WXML 模板
app.wxss
WXSS 样式
JS 交互逻辑
手动创建目录结构
需求
步骤
开发第一个小程序
编译预览
小程序的启动
程序与页面
组件
API
微信小程序开发实战
Hello World
创建程序实例
美化ActionBar
美化页面
配置首页
超级Hello World
绑定事件
更新界面数据
源文件内容
index.js
index.json
index.wxml
index.wxss
输出文字
修改文字颜色
按钮事件，并修改文本
页面传值
一. 跨页面传值.
1 . 用 navigator标签传值或 wx.navigator, 比如
2 . 用getCurrentPages() 获取栈中全部页面的, 然后把数据写入相应页面.
3 . 写入本地, 跨页面在取出来 wx.setStorage/wx.getStorage等, 小程
4 . 把 数据声明为全局变量, 可在任何页面获取
二. 页内传值
1 . 设置id的方法标识跳转后传递后的参数
2 . 设置 data-xxx 的方法来标识要传递的值
3 . form表单和input输入框
页面跳转
一. 跳转页面的方法及坑
需求：从 index.wxml 页面,跳转到 aaa.wxml 页面
方法一：WXML页面实现
方法二：js页面实现
二.点击跳转页面的几种方法
页面刷新
方法一
方法二
方法三
页面跳转以及传参
一. 页面带参数跳转及接收参数内容navigator
二. 带参传递的界面跳转的两种方式
三. 小程序开发如何进行页面跳转以及传参
条件渲染
网络请求
数据绑定
数据绑定更新的用法及调试
数组遍历
数据存储
使用本地存储对象数据并查看
小程序界面传值
一、url传值
二、本地储存 tips:本地数据存储的大小限制为 10MB
三、全局的app对象
全局存储
wx.setStorage(OBJECT)
使用 npm 安装第三方包
npm 支持
使用 npm 包
发布 npm 包
发布小程序 npm 包的约束
发布其他 npm 包的约束
发布流程
原理介绍
js 模块示例
自定义组件相关示例
登录界面
导航栏样式设置
tabBar导航栏
include方式引用header.wxml文件
实例说明
实例代码
实例效果
import方式引用footer.wxml文件
微信视图模版（template）
实例说明
实例代码
实例效果
小程序退出时清除本地数据
include 与 import
import的作用域
登录界面
form相关属性
input 相关属性
button 相关属性
处理登录表单数据
处理登录表单数据（异步）
清除本地数据
request请求
上滑加载下拉刷新
主视图内容左右联动
省市联动选择器
WebSocket应用
WebSocket是什么（简述）
WebSocket与Ajax 的选择
WebSocket协议名
实例：实时显示交易信息
实例：判断websocket是否已打开
微信WebSocketAPI参数说明
wx.connectSocket(OBJECT)
wx.onSocketOpen(CALLBACK)
wx.onSocketError(CALLBACK)
wx.sendSocketMessage(OBJECT)
wx.onSocketMessage(CALLBACK)
wx.closeSocket()
wx.onSocketClose(CALLBACK)
关于localhost
文章列表
UI框架
wxml文件引用、模版、生命周期
实例内容
实例一: include方式引用header.wxml文件
实例说明
实例代码
实例效果
实例二: import方式引用footer.wxml文件
微信视图模版（template）
实例说明
实例代码
实例效果
实例三: 小程序退出时清除本地数据
include 与 import
import的作用域
简易form、本地存储
实例一: 登录界面
form相关属性
input 相关属性
button 相关属性
实例二: 处理登录表单数据
实例三: 处理登录表单数据（异步）
实例四: 清除本地数据
Array数组对象
小程序与服务端通信
条件、遍历、网络请求、获取本地图片
实例一： 条件渲染
实例二： 数据遍历
实例三： 网络请求
wx.request说明
实例四： 获取本地图片
wx.chooseImage说明
页面事件和数据绑定
数据绑定
数据的操作
事件绑定
文件和图片上传
数据处理
JSON数据提取
使用xmldom解析XML
前言
准备工作
示例
部署到iphone7
使用wxParse解析html
下载并把wxParse放到小程序的目录中
使用Towxml解析HTML和MARKDOWN
Towxml
Towxml 下载
特色
快速上手
API
Demo示例
License
数据分析
概况
统计工具
词频统计
授权人数
报名人数
访问来源
支付
前言
支付的简单实现
小程序的实现
接口的实现
通知的简单说明
查询的简单说明
总结
使用WebService(ASP.NET)进行数据交互
通过asp.net WebService给微信小程序传递数据
API
网络
下载
DownloadTask
mDNS
发起请求
RequestTask
上传
UploadTask
WebSocket
SocketTask
媒体
音频
AudioContext
InnerAudioContext
背景音频
BackgroundAudioManager
相机
CameraContext
字体
图片
实时音视频
LivePlayerContext
LivePusherContext
录音
RecorderManager
视频
VideoContext
文件
FileSystemManager
Stats
数据缓存
位置
设备
加速计
电量
蓝牙
低功耗蓝牙
剪贴板
罗盘
联系人
陀螺仪
iBeacon
设备方向
网络
NFC
性能
电话
扫码
屏幕
振动
Wi-Fi
界面
动画
Animation
背景
自定义组件
交互
菜单
导航栏
下拉刷新
滚动
置顶
Tab Bar
窗口
开放接口
接口调用凭证
帐号信息
收货地址
授权
卡券
客服消息
数据分析
发票
登录
小程序跳转
附近的小程序
支付
插件管理
二维码
内容安全
设置
生物认证
模板消息
统一服务消息
动态消息
用户信息
微信运动
更新
UpdateManager
Worker
Worker
数据上传
基础
画布
CanvasContext
CanvasGradient
调试
console
LogManager
第三方平台
地图
MapContext
路由
转发
系统
系统信息
定时器
WXML
IntersectionObserver
NodesRef
SelectorQuery
框架
响应的数据绑定
页面管理
基础组件
丰富的 API
组件
基础组件
插件
开通小程序插件
云开发
我的第一个云开发小程序
兼容性问题
开通云开发
云开发控制台
资源环境
CSV导入数据库
Bug
CSS
JS事件
模拟器bug
素材
textarea
兼容性
modal
上传文件
websocket关闭问题
支付功能
开发需要注意的30个坑
常见问题及解决方法
平台兼容性
运行环境差异
ES6 转 ES5
样式补全
兼容
获取系统信息
版本比较
Javascript 标准库兼容性问题
微信小程序兼容性问题
微信本身的 Bug 引起的
Javascript 标准库兼容性问题
解决方法
各个平台对 JavaScript 标准库支持情况
总结
地图定位
简介
Hello world！
使用限制
核心类
QQMapWX
方法options参数通用属性
调用结果状态码
示例
地点搜索
search(options:Object)
options属性说明
调用结果
示例
关键词输入提示
getSuggestion(options:Object)
options属性说明
调用结果
示例
逆地址解析(坐标位置描述)
reverseGeocoder(options:Object)
options属性说明
调用结果
示例
地址解析(地址转坐标)
geocoder(options:Object)
options属性说明
调用结果
示例
路线规划
代码示例与说明
距离计算
calculateDistance(options:Object)
options属性说明
调用结果
示例
获取城市列表
getCityList(options:Object)
options属性说明
调用结果
示例
获取城市区县
getDistrictByCityId(options:Object)
options属性说明
调用结果
示例
腾讯地图插件实现地图需求
map地图组件，定位，并手动修改位置偏差
环境搭建
工程结构
开发地图定位，选择位置功能
准备
添加定位功能
地图控件布局
逻辑代码编写
展示
OCR
一、应用
二、接口介绍
2.2接口限制及申请
2.3使用TIPS
三、接口文档
3.1请求示例
3.2返回参数样例：
语音文字互转
行业解决方案
医疗
交通
停车
公交地铁
公路客运
微信HCE卡模拟能力
品牌
非税缴费
超市
配送到家
扫码购
超市行业解决方案
微信小程序技术参考手册
目录
初识微信小程序...................................................................................................................................... 23
微信小程序是什么.................................................................................................................................. 23
程序............................................................................................................................................................ 23
小.................................................................................................................................................................24
简介............................................................................................................................................................ 24
背景和作用............................................................................................................................................... 25
设计指南....................................................................................................................................................26
概要............................................................................................................................................................ 26
制作............................................................................................................................................................ 82
微信小程序制作流程..............................................................................................................................82
注册............................................................................................................................................................ 86
技术栈........................................................................................................................................................86
HTML.........................................................................................................................................................87
CSS............................................................................................................................................................. 88
JavaScript...................................................................................................................................................91
准备工作................................................................................................................................................... 96
IDE 搭建.................................................................................................................................................... 96
知识准备................................................................................................................................................. 109
获取微信小程序的 AppID.................................................................................................................... 109
1
微信小程序技术参考手册
开发工具................................................................................................................................................. 112
概览 .......................................................................................................................................................... 112
开发工具实战.........................................................................................................................................113
获取开发工具.........................................................................................................................................115
扫码登录................................................................................................................................................. 116
创建项目................................................................................................................................................. 119
模拟器......................................................................................................................................................126
调试工具................................................................................................................................................. 127
小程序操作区.........................................................................................................................................132
五大微信小程序开发 IDE 深度评测.................................................................................................133
测试.......................................................................................................................................................... 141
概述.......................................................................................................................................................... 141
管理员 web 测试.................................................................................................................................. 142
微信小程序前端测试............................................................................................................................142
发布前的准备.........................................................................................................................................143
用户身份................................................................................................................................................. 143
预览.......................................................................................................................................................... 146
上传代码................................................................................................................................................. 146
小程序的版本.........................................................................................................................................146
2
微信小程序技术参考手册
上线.......................................................................................................................................................... 148
提交审核................................................................................................................................................. 148
发布.......................................................................................................................................................... 149
运营数据................................................................................................................................................. 149
微信小程序架构分析............................................................................................................................150
项目目录结构.........................................................................................................................................150
开发思路................................................................................................................................................. 153
基础.......................................................................................................................................................... 161
微信小程序中的文件............................................................................................................................161
手动创建目录结构................................................................................................................................ 169
开发第一个小程序................................................................................................................................ 177
编译预览................................................................................................................................................. 178
小程序的启动.........................................................................................................................................180
程序与页面............................................................................................................................................. 181
组件.......................................................................................................................................................... 182
API............................................................................................................................................................183
微信小程序开发实战............................................................................................................................185
Hello World...........................................................................................................................................185
创建程序实例.........................................................................................................................................185
美化ActionBar...................................................................................................................................... 186
美化页面................................................................................................................................................. 188
配置首页................................................................................................................................................. 190
3
微信小程序技术参考手册
超级 Hello World.................................................................................................................................191
绑定事件................................................................................................................................................. 191
更新界面数据.........................................................................................................................................200
源文件内容............................................................................................................................................. 200
输出文字................................................................................................................................................. 202
修改文字颜色.........................................................................................................................................205
按钮事件，并修改文本....................................................................................................................... 208
页面传值................................................................................................................................................. 209
一. 跨页面传值.......................................................................................................................................209
二. 页内传值........................................................................................................................................... 216
页面跳转................................................................................................................................................. 217
一. 跳转页面的方法及坑..................................................................................................................... 219
二.点击跳转页面的几种方法............................................................................................................. 221
页面刷新................................................................................................................................................. 229
方法一......................................................................................................................................................229
方法二......................................................................................................................................................229
方法三......................................................................................................................................................230
页面跳转以及传参................................................................................................................................ 233
一. 页面带参数跳转及接收参数内容 navigator.......................................................................... 234
二. 带参传递的界面跳转的两种方式............................................................................................... 235
三. 小程序开发如何进行页面跳转以及传参.................................................................................. 240
4
微信小程序技术参考手册
条件渲染................................................................................................................................................. 246
网络请求................................................................................................................................................. 247
数据绑定................................................................................................................................................. 247
数据绑定更新的用法及调试...............................................................................................................247
数组遍历................................................................................................................................................. 252
数据存储................................................................................................................................................. 254
使用本地存储对象数据并查看..........................................................................................................256
小程序界面传值.................................................................................................................................... 258
全局存储................................................................................................................................................. 264
使用 npm 安装第三方包..................................................................................................................... 264
npm 支持................................................................................................................................................ 264
登录界面................................................................................................................................................. 273
导航栏样式设置.................................................................................................................................... 278
tabBar 导航栏........................................................................................................................................281
include 方式引用 header.wxml 文件.......................................................................................... 285
实例说明................................................................................................................................................. 285
实例代码................................................................................................................................................. 285
实例效果................................................................................................................................................. 293
import 方式引用 footer.wxml 文件.............................................................................................294
5
微信小程序技术参考手册
微信视图模版（template）............................................................................................................... 295
实例说明................................................................................................................................................. 296
实例代码................................................................................................................................................. 296
实例效果................................................................................................................................................. 297
小程序退出时清除本地数据...............................................................................................................298
include 与 import.............................................................................................................................301
登录界面................................................................................................................................................. 302
form 相关属性.......................................................................................................................................307
input 相关属性.................................................................................................................................... 308
button 相关属性..................................................................................................................................309
处理登录表单数据................................................................................................................................ 310
处理登录表单数据（异步）...............................................................................................................316
清除本地数据.........................................................................................................................................320
request 请求.............................................................................................................................................321
上滑加载下拉刷新................................................................................................................................ 330
主视图内容左右联动............................................................................................................................339
省市联动选择器.................................................................................................................................... 342
WebSocket 应用..................................................................................................................................... 354
WebSocket 是什么（简述）..............................................................................................................354
6
微信小程序技术参考手册
WebSocket 与 Ajax 的选择...............................................................................................................354
WebSocket 协议名...............................................................................................................................355
实例：实时显示交易信息...................................................................................................................355
实例：判断 websocket 是否已打开...............................................................................................368
微信 WebSocketAPI 参数说明.......................................................................................................... 368
wx.connectSocket(OBJECT)......................................................................................................... 368
wx.onSocketOpen(CALLBACK).......................................................................................................369
wx.onSocketError(CALLBACK).....................................................................................................369
wx.sendSocketMessage(OBJECT)................................................................................................369
wx.onSocketMessage(CALLBACK)................................................................................................370
wx.closeSocket().............................................................................................................................370
wx.onSocketClose(CALLBACK).....................................................................................................370
关于 localhost....................................................................................................................................370
文章列表................................................................................................................................................. 370
UI 框架.....................................................................................................................................................373
wxml 文件引用、模版、生命周期....................................................................................................377
实例内容................................................................................................................................................. 377
实例一: include 方式引用 header.wxml 文件...................................................................... 377
实例说明................................................................................................................................................. 377
实例代码................................................................................................................................................. 377
7
微信小程序技术参考手册
实例效果................................................................................................................................................. 382
实例二: import 方式引用 footer.wxml 文件.........................................................................383
微信视图模版（template）.............................................................................................................. 383
实例说明................................................................................................................................................. 383
实例代码................................................................................................................................................. 383
实例效果................................................................................................................................................. 385
实例三: 小程序退出时清除本地数据...............................................................................................386
include 与 import.......................................................................................................................... 389
import 的作用域...................................................................................................................................389
简易 form、本地存储...........................................................................................................................389
实例一: 登录界面..................................................................................................................................390
form 相关属性......................................................................................................................................394
input 相关属性................................................................................................................................... 395
button 相关属性.................................................................................................................................396
实例二: 处理登录表单数据................................................................................................................ 397
实例三: 处理登录表单数据（异步）...............................................................................................401
实例四: 清除本地数据.........................................................................................................................405
Array 数组对象...................................................................................................................................... 405
8
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
