微信小程序开发图解案例教程(附精讲视频)

微信小程序开发图解案例教程(附精讲视频)
分享
扫描下方二维码分享到微信
打开微信,点击右上角”+“,
使用”扫一扫“即可将网页分享到朋友圈。
作者:
2017-04
版次: 1
ISBN: 9787115450456
定价: 59.80
装帧: 平装
开本: 16开
纸张: 胶版纸
页数: 344页
正文语种: 简体中文
分类: 教育
46人买过
  •   《微信小程序开发图解案例教程》分两篇,介绍了微信小程序设计的基本知识和实战案例。为微信小程序快速入门,包括认识微信小程序、微信小程序框架分析、用微信小程序组件构建UI界面、微信小程序API、微信小程序设计及问答;第二篇为综合案例应用,包括仿智行火车票12306微信小程序、仿糗事百科微信小程序、仿中国婚博会微信小程序3个综合实战案例。本书采用图、表与详细说明的示例代码相结合的叙述方式,讲解微信小程序设计的基本原理和知识,简单易懂,提供了丰富详尽的实战案例,带读者边做边学,快速掌握微信小程序的设计和实现。

      小刚老师,本名刘刚,参与过多个软件项目的研发、设计和管理工作,拥有项目管理师高级认证、项目监理师中级认证,出版过《原型设计大师:AxureRP网站与APP设计从入门到精通》、《AxureRP原型设计图解微课视频教程(Web+App)》书籍。在中国擎天公司、神州软件子公司任职过,在项目管理和项目实践、软件设计等方面有一定经验。曾负责过纪检监察廉政监督监管平台产品的设计与开发、国家邮政局项目的设计与开发、政务大数据项目的设计与开发等等项目。

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

    第1章 认识微信小程序

    1.1 微信小程序介绍 1 1

    1.1.1 初识微信小程序 1

    1.1.2 微信小程序的功能 2

    1.1.3 微信小程序能否取代App 3

    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

    13.8.2 手机号注册设计 123

    13.8.3 企业用户注册设计 128

    3.9 小结 136

    第4章 必备的微信小程序API 137

    4.1 请求服务器数据API 137

    4.2 文件上传与下载API 140

    4.2.1 wx.uploadFile文件

    上传 140

    4.2.2 wx.downloadFile文件下载 143

    4.3 WebSocket会话API 145

    4.4 图片处理API 150

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

    4.4.2 wx.previewImage

    (OBJECT)预览图片 151

    4.4.3 x.getImageInfo

    (OBJECT)获得图片信息152

    4.5.1 wx.saveFile保存文件到

    本地 153

    4.5 文件操作API 153

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

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

    4.5.4 wx.removeSavedFile删除本地文件 156

    4.5.5 wx.openDocument打开

    文档 157

    4.6 数据缓存API 158

    4.6.1 数据缓存到本地 158

    4.6.2 获取本地缓存数据 160

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

    4.7 位置信息API 165

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

    4.7.2 地图组件控制 169

    4.8 设备应用API 170

    4.8.1 获得系统信息 171

    4.8.2 获取网络状态 172

    4.8.3 重力感应 172

    4.8.4 罗盘 173

    4.8.5 拨打电话 173

    4.9 交互反馈API 174

    4.8.6 扫码 174

    4.9.1 消息提示框 174

    4.9.2 模态弹窗 176

    4.9.3 操作菜单 177

    4.10 登录API 179

    4.11 微信支付API 183

    4.12 分享API 184

    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

  • 内容简介:
      《微信小程序开发图解案例教程》分两篇,介绍了微信小程序设计的基本知识和实战案例。为微信小程序快速入门,包括认识微信小程序、微信小程序框架分析、用微信小程序组件构建UI界面、微信小程序API、微信小程序设计及问答;第二篇为综合案例应用,包括仿智行火车票12306微信小程序、仿糗事百科微信小程序、仿中国婚博会微信小程序3个综合实战案例。本书采用图、表与详细说明的示例代码相结合的叙述方式,讲解微信小程序设计的基本原理和知识,简单易懂,提供了丰富详尽的实战案例,带读者边做边学,快速掌握微信小程序的设计和实现。

  • 作者简介:
      小刚老师,本名刘刚,参与过多个软件项目的研发、设计和管理工作,拥有项目管理师高级认证、项目监理师中级认证,出版过《原型设计大师:AxureRP网站与APP设计从入门到精通》、《AxureRP原型设计图解微课视频教程(Web+App)》书籍。在中国擎天公司、神州软件子公司任职过,在项目管理和项目实践、软件设计等方面有一定经验。曾负责过纪检监察廉政监督监管平台产品的设计与开发、国家邮政局项目的设计与开发、政务大数据项目的设计与开发等等项目。

  • 目录:
    第一篇 微信小程序快速入门

    第1章 认识微信小程序

    1.1 微信小程序介绍 1 1

    1.1.1 初识微信小程序 1

    1.1.2 微信小程序的功能 2

    1.1.3 微信小程序能否取代App 3

    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

    13.8.2 手机号注册设计 123

    13.8.3 企业用户注册设计 128

    3.9 小结 136

    第4章 必备的微信小程序API 137

    4.1 请求服务器数据API 137

    4.2 文件上传与下载API 140

    4.2.1 wx.uploadFile文件

    上传 140

    4.2.2 wx.downloadFile文件下载 143

    4.3 WebSocket会话API 145

    4.4 图片处理API 150

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

    4.4.2 wx.previewImage

    (OBJECT)预览图片 151

    4.4.3 x.getImageInfo

    (OBJECT)获得图片信息152

    4.5.1 wx.saveFile保存文件到

    本地 153

    4.5 文件操作API 153

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

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

    4.5.4 wx.removeSavedFile删除本地文件 156

    4.5.5 wx.openDocument打开

    文档 157

    4.6 数据缓存API 158

    4.6.1 数据缓存到本地 158

    4.6.2 获取本地缓存数据 160

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

    4.7 位置信息API 165

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

    4.7.2 地图组件控制 169

    4.8 设备应用API 170

    4.8.1 获得系统信息 171

    4.8.2 获取网络状态 172

    4.8.3 重力感应 172

    4.8.4 罗盘 173

    4.8.5 拨打电话 173

    4.9 交互反馈API 174

    4.8.6 扫码 174

    4.9.1 消息提示框 174

    4.9.2 模态弹窗 176

    4.9.3 操作菜单 177

    4.10 登录API 179

    4.11 微信支付API 183

    4.12 分享API 184

    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

查看详情
12
您可能感兴趣 / 更多
微信小程序开发图解案例教程(附精讲视频)
宋玉赋地理、宋玉遗迹传说田野调查与研究
刘刚 李骜
微信小程序开发图解案例教程(附精讲视频)
融合发展中的中国智能经济
刘刚 著
微信小程序开发图解案例教程(附精讲视频)
中观思维:读懂中医的智慧
刘刚 著
微信小程序开发图解案例教程(附精讲视频)
农产品电子商务理论与案例解析
刘刚 著
微信小程序开发图解案例教程(附精讲视频)
中观思维:读懂中医的智慧
刘刚 著
微信小程序开发图解案例教程(附精讲视频)
中国汽车企业对外直接投资研究
刘刚 著
微信小程序开发图解案例教程(附精讲视频)
多媒体素材处理实用软件与技巧
刘刚 著;刘刚 编
微信小程序开发图解案例教程(附精讲视频)
出来吧!恐龙
刘刚 编/张京 绘;童趣出版有限公司出版
微信小程序开发图解案例教程(附精讲视频)
企业安全生产管理
刘刚 主编;钱建忠 副主编;王伟;戴卫东;封晓华;张连华
微信小程序开发图解案例教程(附精讲视频)
出来吧!海洋生物
刘刚 编/张京 绘;童趣出版有限公司出版
微信小程序开发图解案例教程(附精讲视频)
微信小程序开发项目教程(慕课版)
刘刚 著
微信小程序开发图解案例教程(附精讲视频)
刘刚色调(第8季)
刘刚 著;品博文化联合研发中心 编