微信小程序开发图解案例教程2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载

微信小程序开发图解案例教程PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第一篇 微信小程序快速入门1

第1章 认识微信小程序1

1.1 微信小程序介绍1

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.6 setData设值函数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.1 wx:if判断单个组件38

2.5.2 block wx:if判断多个组件39

2.6 微信小程序列表渲染39

2.6.1 wx:for列表渲染单个组件39

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

2.6.3 wx:key指定唯一标识符40

2.7 微信小程序定义模板40

2.7.1 定义模板40

2.7.2 使用模板41

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

2.8.1 import引用41

2.8.2 include引用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.1 view视图容器57

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

3.1.3 swiper滑块视图容器61

3.2 基础内容组件65

3.2.1 icon图标组件65

3.2.2 text文本组件66

3.2.3 progress进度条组件67

3.3 丰富的表单组件68

3.3.1 button按钮68

3.3.2 checkbox多项选择器70

3.3.3 radio单项选择器71

3.3.4 input单行输入框72

3.3.5 textarea多行输入框75

3.3.6 label组件77

3.3.7 picker滚动选择器79

3.3.8 slider滑动选择器85

3.3.9 switch开关选择器87

3.3.10 form表单89

3.4 导航组件92

3.4.1 navigator页面链接组件92

3.4.2 wx.navigateTo保留当前页跳转94

3.4.3 wx.redirectTo关闭当前页跳转95

3.4.4 wx.switchTab跳转到tabBar页面96

3.4.5 wx.navigateBack返回上一页97

3.4.6 设置导航条98

3.5 媒体组件100

3.5.1 audio音频100

3.5.2 image图片103

3.5.3 video视频107

3.6 地图组件110

3.7 画布组件114

3.8 沙场大练兵：表单登录注册微信小程序116

3.8.1 登录设计117

3.8.2 手机号注册设计123

3.8.3 企业用户注册设计128

3.9 小结136

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

4.1 请求服务器数据API137

4.2 文件上传与下载API140

4.2.1 wx.uploadFile文件上传140

4.2.2 wx.downloadFile文件下载143

4.3 WebSocket会话API145

4.4 图片处理API150

4.4.1 wx.chooseImage（OBJECT）选择图片150

4.4.2 wx.previewImage（OBJECT）预览图片151

4.4.3 x.getImageInfo（OBJECT）获得图片信息152

4.5 文件操作API153

4.5.1 wx.saveFile保存文件到本地153

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

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

4.5.4 wx.removeSavedFile删除本地文件156

4.5.5 wx.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.8.6 扫码174

4.9 交互反馈API174

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

第二篇 综合案例应用216

第6章 综合案例：仿智行火车票12306微信小程序216

6.1 需求描述217

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

6.2.1 设计思路219

6.2.2 相关知识点220

6.3 准备工作220

6.4 设计流程221

6.4.1 底部标签导航设计221

6.4.2 海报轮播效果设计224

6.4.3 火车票查询界面设计226

6.4.4 火车票列表设计238

6.4.5 个人中心界面设计253

6.4.6 抢票界面设计262

6.4.7 项目上传和预览271

6.5 小结272

第7章 综合案例：仿糗事百科微信小程序274

7.1 需求描述274

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

7.2.1 设计思路276

7.2.2 相关知识点276

7.3 准备工作276

7.4 设计流程277

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

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

7.4.3 糗事列表页设计281

7.4.4 视频列表页设计291

7.4.5 分享设计294

7.4.6 项目预览296

7.5 小结297

第8章 综合案例：仿中国婚博会微信小程序298

8.1 需求描述299

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

8.2.1 设计思路301

8.2.2 相关知识点302

8.3 准备工作302

8.4 设计流程304

8.4.1 底部标签导航设计304

8.4.2 海报轮播效果设计307

8.4.3 宫格导航设计309

8.4.4 全部分类导航设计313

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

8.4.6 现金券列表页设计325

8.4.7 婚博会索票界面设计332

8.4.8 获知渠道弹出层设计337

8.5 小结344