微信小程序开发入门精要

目　录



第1章　微信小程序入门　1
1.1　什么是微信小程序　1
1.2　原生热布局　4
1.3　注册小程序账号　5
1.4　获得AppID　6
1.5　设置小程序信息　7
1.6　开发**个微信小程序　8
1.6.1　配置开发环境　8
1.6.2　建立小程序项目　10
1.6.3　猜拳游戏的布局　11
1.6.4　控制剪子、石头、布的快速
切换　13
1.6.5　真机测试小程序　15
1.6.6　真机调试小程序　16
1.6.7　上传和审核小程序　17
1.7　小结　18
第2章　布局　19
2.1　水平排列　19
2.2　水平折行排列　21
2.3　垂直排列　22
2.4　垂直折列排列　24
2.5　水平排列对齐方式　24
2.6　垂直排列对齐方式　25
2.7　水平等间隔排列　28
2.8　带边距的水平等间隔排列　29
2.9　小结　30
第3章　视图容器　31
3.1　滚动视图（scroll-view）　31
3.1.1　垂直滚动视图　31
3.1.2　水平滚动视图　32
3.1.3　滚动到边缘触发事件　34
3.1.4　滚动事件　35
3.2　广告轮询图视图容器（swiper）　37
3.2.1　显示水平和垂直滑动的广告
页面　37
3.2.2　自动切换广告轮询图　39
3.2.3　响应轮询图切换事件　40
3.3　小结　40
第4章　视图层技术　41
4.1　条件渲染　41
4.2　列表渲染　43
4.2.1　wx:for-item　43
4.2.2　wx:for-index　44
4.2.3　block wx:for　44
4.2.4　嵌套循环　45
4.2.5　wx:key　46
4.3　模板　50
4.4　引用　53
4.4.1　import　53
4.4.2　include　54
4.5　小结　54
第5章　基础组件　55
5.1　text组件　55
5.2　系统内置图标组件（icon）　57
5.3　progress组件　58
5.4　小结　59
第6章　表单组件　60
6.1　按钮组件（button）　60
6.2　复选框组件（checkbox）　63
6.3　文本输入组件（input）　65
6.4　可与其他组件绑定的文本组件
（label）　68
6.5　单选组件（radio）　71
6.6　开关组件（switch）　73
6.7　滚动组件（picker）　75
6.8　滑杆组件（slider）　77
6.9　多行输入框组件（textarea）　79
6.10　form组件　80
6.11　小结　82
第7章　多媒体组件　83
7.1　image组件　83
7.2　audio组件　86
7.3　video组件　88
7.4　小结　91
第8章　其他组件　92
8.1　交互组件　92
8.1.1　动作表单（ActionSheet）　92
8.1.2　对话框　95
8.2　画布　96
8.3　地图　98
8.4　导航　100
8.4.1　页面导航　100
8.4.2　TabBar导航　103
8.5　小结　105
第9章　网络　106
9.1　准备工作（阿里云还是腾讯云）　106
9.2　发起HTTPS请求　109
9.3　上传文件　111
9.4　下载文件　112
9.5　WebSocket　112
9.6　小结　115
第10章　多媒体　116
10.1　图像　116
10.1.1　选择图像　116
10.1.2　预览图像　120
10.1.3　获取图像信息　121
10.2　音频处理　122
10.2.1　录音　123
10.2.2　播放、暂停、停止声音　124
10.2.3　控制背景音乐　126
10.2.4　音频组件控制　129
10.3　视频处理　130
10.3.1　选择视频文件　131
10.3.2　视频组件控制　131
10.4　小结　133
第11章　数据存取　134
11.1　文件管理　134
11.1.1　保存文件　134
11.1.2　获取保存的文件列表　135
11.1.3　获取文件信息　136
11.1.4　删除永久文件　136
11.1.5　打开文档　136
11.2　数据缓存　138
11.2.1　异步存取key-value值　138
11.2.2　同步存取key-value值　139
11.2.3　获取key-value存储信息　140
11.2.4　移除指定的key-value值　140
11.2.5　清除所有的key-value值　141
11.3　小结　141
第12章　位置　142
12.1　获取经纬度　142
12.2　在地图上选中位置　143
12.3　用微信内置的地图显示位置　144
12.4　与组件绑定　146
12.5　小结　147
第13章　设备　148
13.1　获取系统信息　148
13.2　获得网络类型　150
13.3　获取重力感应数据　151
13.4　获取罗盘方向　152
13.5　拨打电话　153
13.6　扫描二维码　154
13.7　小结　155
第14章　界面　156
14.1　信息框　156
14.1.1　显示Toast信息框　156
14.1.2　隐藏Toast信息框　157
14.1.3　显示模态窗口　157
14.1.4　显示操作菜单　158
14.2　导航　159
14.2.1　为导航条添加标题　159
14.2.2　设置和隐藏导航条
动画　160
14.2.3　导航与返回页面　161
14.2.4　导航到指定页面，并关闭当前
页面　163
14.3　动画　163
14.4　绘图　166
14.4.1　绘制基本图形　166
14.4.2　绘制二次方贝塞尔曲线　167
14.4.3　绘制三次方贝塞尔曲线　168
14.4.4　阴影效果　170
14.4.5　绘制图像　170
14.4.6　图形的缩放　171
14.4.7　图形的旋转　171
14.4.8　改变坐标原点　172
14.4.9　渐变　173
14.5　下拉刷新　174
14.6　小结　174
第15章　开放接口　175
15.1　微信登录　175
15.1.1　获取SessionKey　175
15.1.2　校验登录是否过期　177
15.2　获取用户信息　178
15.3　微信支付　179
15.4　分享　181
15.5　小结　182
第16章　徽章（Badge）　183
16.1　新消息徽章　183
16.2　图标右上角显示数字徽章　186
16.3　将数字徽章改成模板　186
16.4　文字右侧显示数字徽章　188
16.5　小结　189
第17章　基础组件　190
17.1　页脚（footer）　190
17.2　网格（grid）　192
17.3　装载动画（loadmore）　193
17.4　列表组件（list）　194
17.5　单选列表项　196
17.6　复选列表项　197
17.7　小结　198
第18章　高仿计算器　199
18.1　项目概述　199
18.2　设计和实现按钮模板　200
18.3　计算器UI布局　200
18.4　编写计算器的逻辑代码　205
18.5　小结　208
第19章　快递查询　209
19.1　项目概述　209
19.2　设计UI　210
19.3　编写业务逻辑代码　213
19.4　小结　215
第20章　电影订票　216
20.1　项目概述　216
20.2　设计电影列表UI的布局　217
20.3　编写电影列表的逻辑代码　218
20.4　电影细节展示和订票页面UI布局　219
20.5　电影展示和订票逻辑实现　221
20.6　小结　222
第21章　图表　223
21.1　曲线图　223
21.2　柱状图　225
21.3　饼状图　226
21.4　环形图　228
21.5　面积图　229
21.6　小结　231