小程序,巧应用——微信小程序开发实战.html.pdf
《小程序,巧应用——微信小程序开发实战.html.pdf》由会员分享,可在线阅读,更多相关《小程序,巧应用——微信小程序开发实战.html.pdf(59页珍藏版)》请在三一文库上搜索。
1、序一 不管是美国的工业互联网,还是中国的互联网+,这些都表明互联网正在催生新一轮的产业革命。移动App在不断地连接“人”,创造一个个新的基于人的应用 场景;物联传感器在不断地连接“物”,也在创造一个个新的基于物的应用场景。连接带来了大的并发量和数据量,从而又促使了云计算和大数据这种分布式计算 方式和数据处理方式的普及。“云大移物”为代表的新一代信息技术是当今互联网技术的核心,它们正在形成一种新的体系。正如时任工业和信息化部副部长杨学 山先生在中国新一代IT产业推进联盟成立仪式上用“五个新”做了精辟总结:信息技术正在新的体系结构(新体系);新的技术体系形成了新的能力(新能力); 在新的能力支撑下
2、正在形成许多新的应用模式(新模式);新的应用模式正在导致新的竞争格局(新格局);新体系、新能力、新模式和新格局一起在推动人类社 会迈入新的发展阶段(新阶段)。 在新的互联网时代,企业级IT应用正在面临颠覆性的变革:从单机架构走向分布式架构,从瀑布式开发走向迭代式开发,从大模块走向微服务,从大项目交付 走向持续交付。这一切都需要企业IT开发与应用的模式要适应互联网环境下敏捷开发、快速迭代和弹性扩展的需求。可以说,企业级IT应用已经到了一个不得不换代 的关键时期。在新的互联网基础设施平台上,进行原生云应用的开发,已是企业IT的必然选择。 微信确实是一个伟大的产品,它不仅成为我们每一个人日常沟通交流
3、的工具,也成为了整个社会的信息基础设施。在国内,由于微信几乎在实时连接每一个 人,它自然也成了一个最强大的“入口”。公众号、服务号和企业号的诞生已经让微信在开始连接后端的企业系统,但是这些后端的系统还可能是过去那些笨重的 遗留系统。如何真正实现互联网化的即连即用,或许应用号才开始真正打开一个企业级的应用市场,我们正翘首以待。业界一直有一个说法:“企业级应用太重, 很难互联网化”,然而我一直不以为然。企业架构(Enterprise Architecture)之父Zachman告诉我们,复杂的复合件应该是建立在简单的原子件组装基础上。没 有良好的架构设计,系统会有大量的重复开发和重叠,复杂性也会随
4、着需求的增加而指数级增长,到一定时候不得不推倒重来。今天的大多数企业信息化还处于这 种手工作坊式的“复杂”漩涡中。大道至简,但“简”需要好的架构设计。但愿企业号的“小程序”和“巧应用”能为我们下一代信息化打开一扇新的窗户。 熊普江和谢宇华分别是我们第二届和第三届互联网CIO-CTO班学员。特别是普江,他本人是腾讯的架构师,对互联网架构有深刻的认识,对腾讯的所有产品都 有足够的了解。我很高兴能为他们俩的这本书作序!可以说,小程序、巧应用这本书是这个时代的及时雨,它不仅仅告诉我们应用号小程序的开发和使用,也 为我们下一代信息化模式转型做了一个非常好的铺垫。 姚乐,北大CIO时代学院院长 2016年
5、11月28日 序二 “触手可及、用完即走”,作为用户当然会期待这样的应用产品。微信小程序正是这样的产品,它面对月活超过8亿用户的微信生态为服务开发者推出一个方便 快捷地链接用户的开发平台。 从小程序对外发布内测,我身边就有很多人在关注。当时我创办的1024学院也计划邀请微信的专家来上公开课,为此我还联系了本书作者普江,他当时说公测 期,内部人士不好对外发声,正式上线后可以安排。 没有想到普江自己藏着大招,从内测开始到现在不到两个月,便给我传了一份书稿,让我写序。 认识普江很多年,知道他不仅是技术专家,也是热心公益、乐于分享助人的好朋友。就如他自己所言,因为太多的朋友找到他问,促使他开始准备这本
6、书,普 江的初心还是要帮助朋友,帮助小程序的开发者。 这本书可能会是第一本微信小程序的实战类书籍。感谢普江、宇华两个作者夜以继日的辛苦努力,能让广大开发者在第一时间拿到详实的开发指南和参考资 料。 我们也很期待在微信生态里出现一批高质量的微信小程序,为用户提供更多、更好、更便捷的服务。 吴华鹏,iTechClub(互联网精英俱乐部)理事长,1024学院创始人 前言 随着移动互联网的兴起,互联网作为一种信息技术在传统社会与传统工业中发挥的作用,越来越强大,互联网与整个社会运作正在加速深度融合。“互联网 +”的趋势显而易见,政府、社会组织、企业以及个人,都对移动互联网时代的融合或转型充满期待而又心
7、怀忐忑:移动化的场景如何结合?是否有足够的移动应用 开发能力?即便场景与能力都满足,是否能应对获取用户成本、打开频率等移动互联网运营的巨大挑战? 好在我们有微信!这是一款为移动时代而生,让世界互联网震惊的中国创新应用。经过5年多的发展,微信已有超过8亿月活用户且仍在不断进化与演进,是移 动时代当之无愧的超级App王。更加幸运的是,腾讯的微信团队源源不断地将微信的能力开放出来,为我们提供了融合与转型的超强连接力。 2016年1月在广州举办的微信公开课上,“微信之父”张小龙在他演讲的最后一部分,宣布将推出“应用号”。小龙提到:“我自己当了多年程序员,我觉得 我们应该为开发团体做一些事情。”至于“应
8、用号”的样子,小龙当时的大概表述是“类似于公众号,但比公众号更便捷、更好找,有更容易使用的形态”。这就 是微信小程序的由来。 历时8个多月,在2016年9月21日,微信小程序公布开启“内测”。随即这个内测消息便刷爆了朋友圈,我在接下来的数天内便接到不下30个“求内测邀请 码”需求留言,小程序火爆程度可见一斑。由于微信团队首批仅开放了200个内测号,物以稀为贵,网络上不久就有传言:转让某个带小程序功能的微信号,账号有 30.7万女粉丝,起拍价300万。 2016年11月3日,小程序正式开放公测。我再次在朋友圈刷屏中体验到了“小程序”的火爆,感受到了开发者、企业以及市场对微信小程序的好奇、疑惑,同
9、 时也感受到大家在移动浪潮中拥抱变化的期待。 微信官方页面指出:“小程序可以在微信内便捷地获取和传播,同时具有出色的使用体验。”张小龙在小程序内测首发当天,也在朋友圈给出了解释:小程序 是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开。这也体现了“用完即走”的理念,用户无须担心安 装应用过多的问题。应用将无处不在,随时可用,但又无须安装卸载。 移动互联网时代的微信应用不可或缺,微信小程序切合了时代需要,毫无疑问会成为政府、组织机构、企业以及开发者必争的互联网应用场景。微信小程序必 将再一次扩展微信强大的“连接力”,帮助我们解决现有服务痛点,或者发
10、掘、衍生出新的商业模式,帮助行业、企业以及政府机构改善服务或实现“互联网+”转 型。 感谢微信团队,为我们带来微信小程序这个新生事物。绝大部分场景下,不用单独开发App的时代来临了。那么如何开发小程序?如何将现有的服务或场景与 小程序结合? 由于小程序是新生事物,基本上多数人都无经验可言。与小龙一样,我觉得此时有必要为所有对小程序感兴趣、有期待的朋友,提供一些有关小程序开发的指 南,这是一件非常有意义的事情。 由于我在工作上与微信团队联系紧密,沟通频繁,有近水楼台优势;而且对腾讯业务有相对全面的了解,熟悉丰富的应用场景,学习了大量小程序项目案例。 自小程序内测开启以来,我们更是夜以继日,同步研
11、读与理解微信团队的文档,梳理开发逻辑,测试各个场景案例,希望尽早奉献给大家一本从入门到精通的 小程序开发大全。 我们尝试通过本书将我们的先发优势发挥出来。由小程序的框架、语法、函数及API开始,结合丰富实用的案例,帮助大家熟练掌握小程序的开发与应用,并探 讨小程序的适用范围以及未来优化演进的方向。 本书读者对象包括: 前端开发工程师 微信应用开发者 移动开发爱好者 计算机相关专业的学生 如何阅读这本书 作为“开放连接体系”的一环,微信团队为小程序提供连接标准与规范,最大限度地降低了开发门槛,但开发小程序还是需要一定的“专业开发能力”与程序 开发的理解力。 微信小程序的开发是基于框架的。因此,开
12、发者首先要理解“框架”(framework)的概念。 从软件设计角度,框架是一个可复用的软件架构解决方案。框架规定了应用的体系结构,阐明软件体系结构中各层次间及其层次内部各组件间的依赖关系、责 任分配和控制流程,框架表现为一组接口、抽象类以及实例间协作的方法。 框架一般是成熟、稳健的,可以处理系统中很多的细节问题,比如,事物处理、安全性、数据流控制等问题。框架一般都为多人所用,所以结构很好,扩展性 也很好,而且它是不断升级的,可以直接享受别人升级代码带来的好处。 显然,框架极大地方便了开发者,减少了开发代码量并提升了代码质量。 微信团队为小程序提供的开发框架为MINA框架,它类似于淘宝Weex
13、、Vue框架。MINA框架经过大量底层的优化设计,有着接近原生App的运行速度,对 Android端和iOS端做到了高度一致的呈现,具有完备的开发和调试工具。 微信团队为小程序的开发者提供了包含UI界面、社交与支付、语音、多媒体、LBS服务、手机硬件、网络传输等基础能力。功能丰富且实用,可以覆盖绝大部分 移动应用的场景需求。 基于对框架的理解与小程序能力及开发过程,我们将本书基本内容划分为五大块: 创建一个小程序项目并解析体验:由零开始创建一个小程序,全面体验小程序的开发工具、小程序界面、开发框架、实现过程及代码解析,了解小程序的应 用场景及开发要求。这部分内容非常适合对小程序开发感兴趣的初学
14、者。 小程序开发基础指南:按框架构成,阐述小程序开发的语言与语法、函数方法、模块及事件交互等。这部分内容对小程序开发者而言,是必须掌握的部分。 组件开发应用指南:详细阐述使用组件进行页面视图的开发过程与组件应用技巧,熟练掌握组件的使用,将大大提高小程序开发的效率。 API接口开发应用指南:微信强大的基础能力均通过API接口开放出来,它为小程序实现强大功能及适配各种应用场景提供了可能。这一部分内容阐述如何使 用各个微信原生API接口进行小程序开发,可帮助开发者创建出功能强大且极具原生体验的小程序应用。 小程序经典案例:通过几个应用场景的案例,让读者实践小程序的各项功能并掌握一些应用技巧。 本书力
15、图帮助读者充分理解小程序的功能、开发过程,由浅入深,使读者快速掌握小程序项目的开发。相信读者通过学习本书,一定可以尝试简单、高效地搭 建具有原生App体验的小程序应用或服务。 致谢 在写作本书的过程中,得到了很多同行、同事以及朋友的鼓励,在此衷心感谢。也感谢华章公司编辑们的努力,感谢家人的支持与理解。 场景代表未来,每一个对应现实需要的服务场景或实用功能的小程序,通过微信的连接与巧妙应用,汇聚起来,最终成为改变世界的力量。 我们相信:小程序,巧应用,可以成就大梦想。 现在,我们邀请所有对移动互联网服务与应用感兴趣的朋友,都来开发微信小程序。 作者 2016年12月 第1章 创建自己的第一个小程
16、序 学习计算机语言,一般会最先接触“Hello World!”程序。与之类似,要掌握微信小程序的开发,我们也先来创建自己的第一个小程序实例。 1.1 准备工作 微信小程序是继订阅号、服务号、企业号之后,微信公众平台上全新的一种连接用户与服务的方式。 开始创建之前,我们需要做些准备工作,包括工作账号及项目ID获取,开发环境要求与搭建等,这也是开发小程序必备的前提工作。 1.2 创建第一个小程序Hello WXapplet 事不宜迟,我们马上开始创建第一个微信小程序Hello WXapplet。 在安装开发者工具的电脑上运行“微信Web开发者工具”,通过开发者的微信扫码进入后,即可得到如图1-9所
17、示的界面。 图1-9 添加小程序项目 点击“添加项目”,填入前面我们获得的AppID(无AppID可以忽略),并输入项目名称“Hello WXapplet”,选定本地文件夹作为“项目目录”,如图1-10 所示。 图1-10 指定项目名称 勾选“在当前目录中创建quick start项目”后,点击“添加项目”按钮,即已成功创建了我们的第一个微信小程序项目Hello WXapplet。 Hello WXapplet项目创建成功后,即进入并看到完整的开发者工具界面。我们创建的Hello WXapplet这个小程序只包含两个页面:首页及信息页,实现一些简 单的功能。其中,首页显示当前登录的微信号头像及
18、昵称。点击首页,则进入信息页,可以查看到小程序启动的日志信息。我们将在第2章中全面解析Hello WXapplet这个项目的代码。 在进行Hello WXapplet小程序项目代码介绍之前,我们需要熟悉一下微信Web开发者工具的操作。 1.3 微信Web开发者工具的操作与使用 “工欲善其事,必先利其器”。熟悉开发者工具界面与操作,将为我们今后的开发带来极大的便利。 第2章 小程序初体验 上一章我们成功地创建了第一个示例小程序Hello WXapplet。本章通过解析这个小程序项目,使大家尽可能对小程序有个全局的认知,包括小程序的框 架、目录结构、开发步骤以及入口界面、示例代码的使用与运行等。
19、2.1 理解小程序 对于用户而言,小程序的直观表现只是多个相互关联的页面。我们的小程序Hello WXapplet也一样,它由2个相互关联的页面构成:首页(index)与信息页 (logs)。点击首页的头像就切换到信息页,在信息页点击“返回”可以从信息页返回到首页,如图2-1所示。 图2-1 两个相互关联的页面 小程序的开发实际上就是实现这些页面的展示(视图),以及实现“页面上用户交互事件”、“页面间切换逻辑”、“数据存储及网络调用”等事务与逻辑处 理的过程。 2.2 小程序的线程架构与开发步骤 2.2.1 小程序线程架构 通过对小程序项目Hello WXapplet的解析,我们知道每个小程序
20、包含一个描述整体程序的app实例和多个描述页面的page。其中app由三个文件构成:公共配 置app.json、公共样式app.wxss、主体逻辑app.js。每个page最多由四个文件构成:页面配置page.json、页面结构page.wxml、页面样式page.wxss、页面主体 逻辑page.js。 我们可以按需在app.js和page.js中添加程序在生命周期的每个阶段相应的事件。比如在页面onLoad的时候进行数据加载,onShow的时候进行数据的更新。 典型的app.js代码结构如下: App( onLaunch: function() / 启动时执行的初始化工作 , onShow
21、: function() / 小程序启动或从后台进入前台时,触发执行的操作 , onHide: function() / 小程序从前台进入后台时,触发执行的操作 , globalConf: indexDate:, matchDate: , dataCache: , globalData: I am global data ) 典型的一个页面page.js代码结构: Page( Data: Text:This is page data. onLoad: function(options) / 页面加载时执行的初始化工作 onReady: function() / 页面就续后触发执行的操作 , o
22、nShow: function() / 页面打开时,触发执行的操作 , onHide: function() / 页面隐藏时,触发执行的操作 , onUnLoad: function() / 页面关闭时触发执行的操作 , / Event handler viewTap: function() this.setData( text:set some data for updating view. ) , ) 一个完整的小程序执行的生命周期如图2-4所示。 图2-4 小程序的生命周期 一个page的生命周期从onLoad开始,整个生命周期内onLoad、onReady、onUnload这三个事件仅
23、执行一次,而onHide和onShow在每次页面隐藏和显示时 都会触发。当用户手动触发左上角的退出箭头时,小程序仅触发app.onHide,下次进入小程序时会触发app.onShow以及当前page.onShow。仅当小程序在后台 运行超过一定时间未被唤起、或者用户手动在小程序的控制栏里点击退出程序、或者小程序内存占用过大被关闭时,小程序将被销毁,会触发app.onUnload事件。 小程序的线程架构示意如图2-5所示。 图2-5 小程序线程架构示意图 每个小程序分为2个线程,view与appSer-ver。其中view线程负责解析渲染页面(wxml和wxss),而appServer线程负责运
24、行js。appSer-ver线程运行在 jsCore中(安卓下运行在X5中,开发工具中运行在nwjs中)。由于js不跑在web-view里,就不能直接操纵DOM和BOM,这就是小程序没有window全局变量的原 因。 2.3 进一步了解小程序开发框架 微信团队为小程序提供的框架命名为MINA应用框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能,对上层提 供一整套JavaScript API,让开发者能够非常方便地使用微信客户端提供的各种基础功能与能力,快速构建一个应用。 2.4 小程序的发布与使用 2.4.1 小程序预览、上传、审核与发布 一旦开发者对
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 程序 应用 微信小 开发 实战 html
链接地址:https://www.31doc.com/p-5518925.html