微信小程序开发必备100Tip 免费编辑 添加义项名

内容提要

《微信小程序开发必备100Tip》提供了微信小程序开发必备的100 个Tip 和一个完整的电商案例京东购物微信小程序，100 个Tip分为四类:关于微信小程序的框架及工具16 个Tip、关于微信小程序丰富的组件24 个Tip、关于微信小程序必备API 技能50 个Tip、关于微信小程序高级交互设计10 个Tip，每一个Tip 都会有详细的介绍和相关的示例，方便开发人员快速学习这些Tip，同时也可以作为工具书指南进行查询，应用到哪个知识点可以到这里快速的查询进行使用。京东购物微信小程序是综合应用这些Tip，将这些Tip 综合应用到实际项目开发过程中。通过学习100 个Tip 和项目案例，让读者全面、深入、透彻地理解微信小程序开发，提高微信小程序开发能力和项目实战能力。

《微信小程序开发必备100Tip》内容丰富，实例典型，实用性强，适合各个层次想要学习微信小程序开发技术的人员阅读，《微信小程序开发必备100Tip》也可以作为微信小程序开发查询工具书使用，方便快速查询微信小程序开发所应用到的知识点。[1]

目录

第1 章 微信小程序的框架及工具 . 1

1.1 app.json 配置 1

1.1.1 决定页面文件路径 2

1.1.2 配置窗口表现 3

1.1.3 配置tab 标签导航 5

1.1.4 设置网络超时时间 8

1.1.5 配置debug 模式 9

1.2 App()函数使用 10

1.3 Page()函数使用 12

1.3.1 初始化数据 13

1.3.2 生命周期函数 13

1.3.3 相关事件函数 14

1.4 数据绑定 14

1.5 wx:if 条件判断 15

1.6 wx:for 列表渲染 16

1.7 定义和使用模板 17

1.8 import 引用模板 18

1.9 include 引用文件 19

1.10 Console 面板 20

1.11 Sources 面板 21

1.12 Network 面板 22

1.13 Storage 面板 24

1.14 Appdata 面板 24

1.15 Wxml 面板 26

1.16 Sensor 面板 27

第2 章 微信小程序丰富的组件 28

2.1 view 视图容器组件 28

2.2 scroll-view 可滚动视图容器组件 31

2.3 swiper 滑块视图容器组件 34

2.3.1 海报轮播效果 35

2.3.2 页签切换效果 36

2.4 movable-view 可移动的视图容器组件 40

2.5 icon 图标组件 42

2.6 text 文本组件 44

2.7 progress 进度条组件 45

2.8 button 按钮组件 46

2.9 checkbox 多项选择器组件 48

2.10 radio 单项选择器组件 57

2.11 input 单行输入框组件 59

2.12 textarea 多行输入框组件 61

2.13 label 改进表单组件 63

2.14 picker 选择器组件 70

2.14.1 picker 普通选择器组件 71

2.14.2 picker 时间选择器组件 73

2.14.3 picker 日期选择器组件 74

2.15 picker-view 嵌入页面的滚动选择器 76

2.16 slider 滑动选择器组件 78

2.17 switch 开关选择器组件 80

2.18 form 表单组件 85

2.19 navigator 页面链接导航组件 92

2.20 audio 音频组件 95

2.21 image 图片组件 102

2.22 video 视频组件 104

2.23 map 地图组件 106

2.24 canvas 画布组件 112

第3 章 微信小程序必备API 技能 118

3.1 wx.request 发起网络请求 118

3.2 wx.uploadFile 上传文件 122

3.3 wx.downloadFile 下载文件 123

3.4 WebSocket 会话连接 125

3.5 wx.chooseImage 选择图片 133

3.6 wx.previewImage 预览图片 134

3.7 wx.getImageInfo 获取图片信息 135

3.8 wx.saveImageToPhotosAlbum 保存图片到相册 136

3.9 wx.startRecord 开始录音和wx.stopRecord 结束录音 138

3.10 voice 音频播放控制 139

3.11 wx.createAudioContext 音频组件控制 140

3.12 wx.playBackgroundAudio 播放音乐 141

3.13 wx.seekBackgroundAudio(OBJECT)控制音乐播放进度 143

3.14 wx.getBackgroundAudioPlayerState 获取音乐播放状态 143

3.15 wx.createVideoContext(videoId)视频组件控制 145

3.16 wx.chooseVideo(OBJECT)选择视频 146

3.17 wx.saveVideoToPhotosAlbum 保存视频到相册 147

3.18 wx.saveFile 保存文件 148

3.19 wx.getSavedFileList 获取本地文件列表 149

3.20 wx. getSavedFileInfo 获取本地文件信息 151

3.21 wx. removeSavedFile 删除本地文件 153

3.22 wx. openDocument 打开文档 154

3.23 wx.setStorage 和wx.setStorageSync 本地数据缓存 155

3.24 wx.getStorage 和wx.getStorageSync 获取本地数据缓存 157

3.25 wx.getStorageInfo 和wx.getStorageInfoSync 获取缓存信息 159

3.26 清理本地缓存数据 161

3.27 wx.getLocation 获取位置 162

3.28 wx. chooseLocation 选择位置 167

3.29 wx.openLocation 打开内置地图 168

3.30 获取设备系统信息 169

3.31 获取网络状态 172

3.32 wx.onAccelerometerChange 加速度计 172

3.33 wx.onCompassChange 监听罗盘数据 173

3.34 wx.makePhoneCall 拨打电话和wx.scanCode 扫码 173

3.35 剪贴板和屏幕亮度 175

3.36 wx.addPhoneContact 添加联系人 176

3.37 wx.showToast 和wx.showLoading 显示提示框 178

3.38 wx.showModal 显示模态弹窗 180

3.39 wx.showActionSheet 显示操作菜单 182

3.40 设置导航条 183

3.41 wx.createAnimation 创建动画 184

3.42 获取第三方平台数据 190

3.43 wx.login 登录 191

3.44 wx.authorize 授权 193

3.45 wx.getUserInfo 用户信息 195

3.46 wwx.requestPayment 微信支付 197

3.47 模板消息 199

3.48 转发信息 202

3.49 wx.chooseAddress 收货地址 203

3.50 卡券 204

第4 章 微信小程序高级交互设计 207

4.1 猫眼电影:海报轮播效果设计 207

4.2 许鲜全国送:页签切换效果设计 210

4.3 新闻频道:水平滑动效果设计 215

4.4 京东到家:手风琴导航切换效果设计 219

4.5 链家:列表式导航设计 223

4.6 支付宝:九宫格导航设计 230

4.7 58 同城:区域条件检索设计 237

4.8 12306 火车票:底部固定效果设计 242

4.9 当当购物:图文列表设计 245

4.10 中信信用卡申请:向导型表单设计 255

第5 章 综合案例:京东购物小程序 278

5.1 需求描述 279

5.2 相关知识点 285

5.3 商品数据准备 286

5.4 首页设计 290

5.5 商品详情页设计 305

5.6 立即购买页面 320

5.7 商品搜索设计 329

5.8 显示购物车商品设计 339

5.9 我的订单页面设计 350

5.10 优惠券设计 356

5.11 小结 366[1]