《微信小程序:开发入门及案例详解》—— 导读

简介: 自2016年9月21日微信小程序公布以来,微信技术群中关于小程序的讨论就没间断过,这是又一次创业的好机会,尤其是对中小企业扩大网络影响力很有利。我们在抓紧时间学习小程序的过程中,总结并实践了小程序的功能,并希望通过这本书传达给广大的读者。

26d535be9ae72a0528bba7b7091626a5f4404eb2

前  言

     自2016年9月21日微信小程序公布以来,微信技术群中关于小程序的讨论就没间断过,这是又一次创业的好机会,尤其是对中小企业扩大网络影响力很有利。我们在抓紧时间学习小程序的过程中,总结并实践了小程序的功能,并希望通过这本书传达给广大的读者。我们在编写过程中正临电商行业中最忙的几个月,双11、双12、圣诞节、元旦节等需求已经堆叠如山,我和边思白天处理公司需求,晚上编写书籍,几乎没有周末,这样坚持了几个月终于完成本书,直至交稿时才如释重负。
     小程序刚发布不久,很多功能都还在不断更新中,本书内容在官方文档基础上进行补充说明,并给出实践案例,尝试给出现阶段尽可能完善的开发模式,适合小程序初学者入门。在小程序的学习过程中,我们做过很多尝试,这里我们仅仅提出了自己的一些实现方案和观点供大家参考。小程序整体推动还需要更多开发者参与,小程序还未正式公布前,便有很多公司及个人针对小程序研发过程中的痛点推出了各类三方框架,希望阅读本书后,大家也能提出自己的想法,积极参与小程序相关话题讨论,推动小程序研发方案优化与普及。

本书内容和组织结构

     本书内容大致可分为三部分。

     第一部分为基础部分,共3章,主要介绍小程序开发的基础知识。
     第1章介绍微信小程序环境搭建、运行第一个小程序demo。
     第2章介绍小程序核心知识,包括整体框架运行原理、规则,每个文件的作用,以及WXML与WXSS。
     第3章介绍CSS布局基础,讲解了盒子模型、浮动、定位以及Flex布局。

     第二部分为组件和API,共2章,主要讲解小程序组件、API相关知识。
     第4章介绍小程序组件相关知识,主要内容包括视图容器、基础组件、表单组件、导航、媒体组件、地图、画布等。
     第5章介绍小程序API相关知识,主要内容包括网络、媒体、文件、数据缓存、位置、设备、界面、开放接口等。

     第三部分为案例实践,共5章,通过实际案例介绍如何开发小程序应用,包括一些思路和框架,以及部分代码和实现技巧。
     第6章介绍如何开发豆瓣电影小程序,主要讲解一个最简单小程序的代码结构。
     第7章介绍如何开发驾考小程序,主要讲解如何利用第三方API创建小程序引用。
     第8章介绍如何开发打赏小程序,主要讲解小程序支付流程。
     第9章介绍如何开发日程表小程序。
     第10章介绍如何开发多点商城,主要讲解如何架构一个复杂小程序项目。本书创作时间较短,如有疏漏,恳请各位读者斧正。

致谢

     在这里感谢那些一直支持我们的人,感谢韩鑫、杨凯等公司领导对本书写作的支持,让我能空出时间投入到书籍编写,感谢吴怡编辑的辛勤工作,感谢龙伟湖对本书案例UI设计的友情支持,感谢杨帆、王庆平、许彬、张磊、范彩霞等同事在工作期间对我的各种支持,感谢罗东、杨小英等同事在这段时间为我分担工作,谢谢大家,正是因为你们的支持,才有了本书的面世。
     最后特别感谢我的爱人张舒,一直相信我、支持我,一直为我默默付出,让我能全身心投入到工作中。

目  录

前 言
第1章 初识小程序
1.1 简介
1.2 接入流程
1.2.1 注册小程序帐号
1.2.2 开发环境准备
1.3 第一个小程序
1.4 小结
第2章 小程序开发核心
2.1 简介
2.2 “徒手”创建小程序
2.3 框架主体文件
2.3.1 配置文件(app.json)
2.3.2 小程序逻辑(app.js)
2.3.3 全局样式(app.wxss)
2.4 框架页面文件
2.4.1 页面配置文件
2.4.2 页面逻辑文件(JavaScript)
2.4.3 页面结构文件(WXML)
2.4.4 页面样式文件(WXSS)
2.5 模块化
2.5.1 模块化简介
2.5.2 文件作用域
2.5.3 模块的使用
2.5.4 其他
2.6 小结
第3章 布局
3.1 基本知识
3.1.1 盒子模型
3.1.2 块级元素
3.1.3 行内元素
3.1.4 行内块元素
3.2 浮动和定位
3.2.1 浮动
3.2.2 定位
3.3 Flex布局
3.3.1 基本概念
3.3.2 容器属性
3.3.3 项目属性
3.4 小结
第4章 组件
4.1 组件定义及属性
4.2 视图容器
4.2.1 view组件
4.2.2 scroll-view组件
4.2.3 滑块视图组件
4.3 基础组件
4.3.1 icon
4.3.2 text组件
4.3.3 progress组件
4.4 表单组件
4.4.1 radio组件
4.4.2 checkbox组件
4.4.3 switch组件
4.4.4 label组件
4.4.5 slider组件
4.4.6 picker组件
4.4.7 picker-view组件
4.4.8 input组件
4.4.9 textarea组件
4.4.10 button组件
4.4.11 form组件
4.5 导航组件
4.6 媒体组件
4.6.1 image
4.6.2 audio
4.6.3 video
4.7 地图组件
4.8 画布组件
4.9 客服会话
4.10 小结
第5章 API
5.1 网络
5.1.1 发起HTTPS请求
5.1.2 上传、下载
5.1.3 WebSocket
5.2 媒体
5.2.1 图片
5.2.2 录音
5.2.3 音频播放控制
5.2.4 音乐播放控制
5.2.5 音频组件控制
5.2.6 视频
5.2.7 视频组件控制
5.3 文件
5.4 数据缓存
5.4.1 保存数据
5.4.2 获取数据
5.4.3 获取本地数据信息
5.4.4 删除数据
5.4.5 清空数据
5.5 位置
5.5.1 获取位置
5.5.2 选择位置
5.5.3 查看位置
5.5.4 地图组件控制
5.6 设备
5.6.1 系统信息
5.6.2 网络状态
5.6.3 重力感应
5.6.4 罗盘
5.6.5 拨打电话
5.6.6 扫码
5.7 界面
5.7.1 交互反馈
5.7.2 设置导航条
5.7.3 导航
5.7.4 动画
5.7.5 绘图
5.7.6 下拉刷新
5.8 开放接口
5.8.1 登录
5.8.2 用户信息
5.8.3 微信支付
5.8.4 模板消息
5.8.5 客服消息
5.8.6 分享
5.8.7 获取二维码
5.9 小结
第6章 案例分析——豆瓣电影
6.1 准备工作
6.1.1 豆瓣API
6.1.2 跳转层
6.2 技术架构
6.3 公共模块开发
6.3.1 业务逻辑层
6.3.2 公共模块
6.4 页面构建
6.4.1 首页
6.4.2 详情页
6.5 页面逻辑开发
6.5.1 首页
6.5.2 详情页
6.6 小结
第7章 案例分析——驾考
7.1 业务流程
7.2 项目架构
7.2.1 功能点分析
7.2.2 项目结构图
7.2.3 数据接口
7.3 代码分析
7.3.1 小程序底层代码封装
7.3.2 首页
7.3.3 答题页
7.3.4 答题结果页
7.4 小结
第8章 案例分析——打赏
8.1 登录
8.1.1 登录流程
8.1.2 源码讲解
8.2 支付
8.3 小结
第9章 案例分析——日程表
9.1 业务流程
9.2 项目架构
9.2.1 功能点分析
9.2.2 项目结构图
9.3 代码分析
9.3.1 日程详情页
9.3.2 首页
9.3.3 日程管理页
9.4 小结
第10章 案例分析——多点商城
10.1 需求分析
10.2 技术架构
10.2.1 主界面架构
10.2.2 业务逻辑层
10.2.3 代理网络请求接口
10.2.4 本地模拟接口数据
10.2.5 widgets
10.2.6 全局样式控制
10.3 页面实现
10.3.1 主界面实现
10.3.2 首页与活动页
10.3.3 分类页与搜索页
10.3.4 支付流程
10.3.5 其他页面
10.4 小结

相关文章
|
13天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
13天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
13天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
1月前
|
小程序 JavaScript 前端开发
【微信小程序】-- 案例 - 本地生活(二十)
【微信小程序】-- 案例 - 本地生活(二十)
|
13天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
13天前
|
SQL 安全 小程序
探索微信小程序全栈开发的安全性问题
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的安全性问题,包括数据安全、接口安全、隐私保护和代码安全。为解决这些问题,建议采取数据加密、使用HTTPS协议、身份认证与授权、输入验证、安全审计及漏洞扫描以及安全培训等措施。通过这些方法,开发者可提升小程序安全性,保护用户隐私和数据。
|
16天前
|
小程序 数据库
【微信小程序7】云开发中实时聊天系统的实现方法
【微信小程序7】云开发中实时聊天系统的实现方法
22 0
|
1月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
32 2
|
1月前
|
JSON 小程序 前端开发
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
|
1月前
|
小程序
【微信小程序】-- 自定义组件 - 数据监听器 - 案例 (三十五)
【微信小程序】-- 自定义组件 - 数据监听器 - 案例 (三十五)

热门文章

最新文章