及时篇 微信小程序快速入门

第1章认识微信小程序

1.1微信小程序介绍 11

1.1.1初识微信小程序1

1.1.2微信小程序的功能2

1.1.3微信小程序能否取代App3

1.1.4微信小程序的发展历程3

1.1.5微信小程序带来的机会3

1.2微信小程序开发准备3

1.2.1基础技术准备3

1.2.2开发准备4

1.3微信小程序开发工具的使用5

1.3.1创建项目5

1.3.2编辑7

1.3.3常用快捷键9

1.3.4调试10

1.3.5项目12

1.3.6编译13

1.3.7前台/后台13

1.3.8缓存14

1.4沙场大练兵：Hello World 的创建14

1.5小结17

第2章微信小程序框架分析18

2.1微信小程序目录结构介绍18

2.1.1框架全局文件18

2.1.2工具类文件23

2.1.3框架页面文件24

2.1.4小试牛刀：制作猫眼电影底部标签导航24

2.2微信小程序注册程序的应用27

2.3微信小程序注册页面的使用29

2.3.1页面初始化数据30

2.3.2生命周期函数30

2.3.3页面相关事件处理函数30

2.3.4页面路由管理31

2.3.5自定义函数32

2.3.6setData设值函数32

2.4微信小程序如何绑定数据33

2.4.1组件属性绑定33

2.4.2控制属性绑定34

2.4.3关键字绑定34

2.4.4运算34

2.4.5小试牛刀：天气微信

小程序35

2.5微信小程序条件渲染38

2.5.1wx:if 判断单个组件38

2.5.2block wx:if 判断多个

组件39

2.6微信小程序列表渲染39

2.6.1wx:for 列表渲染单个

组件39

2.6.2block wx:for 列表渲染多个组件39

2.6.3wx:key 指定标识符40

2.7微信小程序定义模板40

2.7.1定义模板40

2.7.2使用模板41

2.8微信小程序的引用功能41

2.8.1import引用41

2.8.2include引用42

2.9沙场大练兵：仿香哈菜谱微信小程序42

2.9.1底部标签导航设计43

2.9.2宫格导航设计45

2.9.3香哈头条初始化数据48

2.9.4香哈头条列表渲染及绑定数据50

2.9.5香哈头条模板的引用54

2.10小结56

第3章用微信小程序组件构建UI界面57

3.1视图容器组件57

3.1.1view视图容器57

3.1.2scroll-view可滚动视图区域58

3.1.3swiper滑块视图容器61

3.2基础内容组件65

3.2.1icon图标组件65

3.2.2text文本组件66

3.2.3progress进度条组件67

3.3丰富的表单组件68

3.3.1button按钮68

3.3.2checkbox多项选择器70

3.3.3radio单项选择器71

3.3.4input单行输入框72

3.3.5textarea多行输入框75

3.3.6label组件77

3.3.7picker滚动选择器79

3.3.8slider滑动选择器85

3.3.9switch开关选择器87

3.3.10form表单89

3.4导航组件92

3.4.1navigator页面链接组件92

3.4.2wx.navigateTo保留当前页

跳转94

3.4.3wx.redirectTo关闭当前页

跳转95

3.4.4wx.switchTab跳转到

tabBar页面96

3.4.5wx.navigateBack返回上一页97

3.4.6设置导航条98

3.5导媒体组件100

3.5.1audio音频100

3.5.2image图片103

3.5.3video视频107

3.6地图组件110

3.7画布组件114

3.8沙场大练兵：表单登录注册微信

小程序116

3.8.1登录设计117

13.8.2手机号注册设计123

13.8.3企业用户注册设计128

3.9小结136

第4章必备的微信小程序API137

4.1请求服务器数据API137

4.2文件上传与下载API140

4.2.1wx.uploadFile文件

上传140

4.2.2wx.downloadFile文件下载143

4.3WebSocket会话API145

4.4图片处理API150

4.4.1wx.chooseImage(OBJECT)选择图片150

4.4.2wx.previewImage

(OBJECT)预览图片151

4.4.3x.getImageInfo

(OBJECT)获得图片信息152

4.5.1wx.saveFile保存文件到

本地153

4.5文件操作API153

4.5.2wx.getSavedFileList获取本地文件列表154

4.5.3wx.getSavedFileInfo获取本地文件信息156

4.5.4wx.removeSavedFile删除本地文件156

4.5.5wx.openDocument打开

文档157

4.6数据缓存API158

4.6.1数据缓存到本地158

4.6.2获取本地缓存数据160

4.6.3移除和清理本地缓存数据164

4.7位置信息API165

4.7.1获得位置、选择位置、打开位置165

4.7.2地图组件控制169

4.8设备应用API170

4.8.1获得系统信息171

4.8.2获取网络状态172

4.8.3重力感应172

4.8.4罗盘173

4.8.5拨打电话173

4.9交互反馈API174

4.8.6扫码174

4.9.1消息提示框174

4.9.2模态弹窗176

4.9.3操作菜单177

4.10登录API179

4.11微信支付API183

4.12分享API184

4.13沙场大练兵： 仿豆瓣电影微信小程序185

4.13.1电影顶部页签切换效果186

4.13.2电影海报轮播效果190

4.13.3电影列表方式布局192

4.13.4电影详情页布局197

4.13.5项目上传与预览206

4.14小结207

第5章微信小程序设计及

问答208

5.1微信小程序设计208

5.1.1突出重点，减少

干扰项208

5.1.2主次动作区分明显208

5.1.3流程明确，避免打断209

5.1.4局部加载反馈210

5.1.5模态窗口加载反馈210

5.1.6弹出式操作结果211

5.1.7模态对话框操作结果212

5.1.8结果页212

5.1.9表单填写友好提示212

5.2微信小程序问答213

5.3小结215

第二篇综合案例应用

第6章综合案例：仿智行火车票

12306微信小程序217

6.1需求描述218

6.2设计思路及相关知识点220

6.2.1设计思路220

6.2.2相关知识点221

6.3准备工作221

6.4设计流程222

6.4.1底部标签导航设计222

6.4.2海报轮播效果设计225

6.4.3火车票查询界面设计227

6.4.4火车票列表设计239

6.4.5个人中心界面设计254

6.4.6抢票界面设计263

6.4.7项目上传和预览272

6.5小结273

第7章综合案例：仿糗事百科

微信小程序275

7.1需求描述275

7.2.1设计思路277

7.2.2相关知识点277

7.2设计思路及相关知识点277

7.3准备工作277

7.4设计流程278

7.4.1顶部页签菜单滑动设计278

7.4.2顶部页签菜单切换效果 设计280

7.4.3糗事列表页设计282

7.4.4视频列表页设计292

7.4.5分享设计295

7.4.6项目预览297

7.5小结298

第8章综合案例：仿中国婚博会

微信小程序299

8.1需求描述300

8.2设计思路及相关知识点302

8.2.1设计思路302

8.2.2相关知识点303

8.3准备工作303

8.4设计流程305

8.4.1底部标签导航设计305

8.4.2海报轮播效果设计308

8.4.3宫格导航设计310

8.4.4全部分类导航设计314

8.4.5现金券下拉菜单筛选条件设计323

8.4.6现金券列表页设计326

8.4.7婚博会索票界面设计333

8.4.8获知渠道弹出层设计338

8.5小结345