微信小程序开发零基础入门(txt+pdf+epub+mobi电子书下载)

作者：张帆

出版社：电子工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

微信小程序开发零基础入门试读：

前言

对于商家来说：

● App打开率越来越低！

● App开发成本越来越高！

● App部署难度越来越大！

● App上线周期越来越长！

对于用户来说：

● 手机存储空间越来越不够用！

● App越来越用不着！

● 垃圾通知越来越多！

● 安全性越来越差！

这一切，用小程序都能解决！

微信小程序通过极低的开发成本，大量简化了相关的开发操作和应用信息获取，结合HTML 5和微信的API，几乎能开发出类似App的大多数功能！

迄今为止，已经有大量的应用接入微信小程序端，并迅速攫取了大量的用户，部分应用的使用体验甚至要高于应用本身App的体验。通过微信小程序提供的API，可以方便地实现对手机信息、照片信息及其他媒体信息的获取和操作，而其推送和使用微信账号的登录效果远远方便于原生应用使用第三方插件的体验效果。

对于初学者而言，这是一次技术革新的机会，你可能是开发小白，可能只是一个大学生，可能面对各种移动开发无从选择。本书帮你零基础走进微信小程序开发。作者结合自己多年的后端项目开发和培训经验写作了本书，全面地介绍了微信小程序开发基础、微信小程序通用API、HTML 5与WXML、CSS 3与WXSS、JavaScript等技术，并通过完整的实例介绍了微信小程序开发的步骤和基本架构。

小程序能做什么

大多数内容发布类App都可以被小程序所代替，因为微信小程序是一种轻度的云端应用。目前来看，小程序主要应用范围如下：

目前已经有很多常用的App都开发出了自己的小程序（如下图所示），这样我们就不用再下载这些应用，直接在微信里打开或搜索这些小程序即可。

本书对读者的帮助

本书是针对小程序开发的完全零基础入门读物，所以本书包括了小程序的基础、微信API的基础、网页开发（HTML 5+CSS 3+JavaScript）的基础，还有完整工程化的项目案例，本书的知识体系如下图所示：

本书的特点

1.重点突出

全书共分8章，采用从易到难、循序渐进的方式进行讲解。内容涉及了微信小程序从开发到实际项目实践的全过程。

2.涉及广泛

由于程序是相对网页开发的一种技术，为了方便读者学习，本书首先让读者了解HTML、CSS、JavaScript等Web基础开发技术，并掌握小程序的开发环境和工具。读者在掌握开发环境和工具的基础上，逐渐学习微信小程序特有标签和API，掌握小程序的系统构建。读者可以边学习边实践，更快掌握微信小程序开发的各种知识。

3.重点实践

书中每个API和控件都有练习实例，并且包含了完整的代码。例程都采用了分步骤实现方法，这样读者可以很清晰地知道每个技术的具体实现步骤，从而提高学习效率。

4.理论和实践相互结合

由于小程序本身相关技术较多，即使读者理解其控件和API对于如何开发一个小程序可能也无从下手。本书通过传统讲解的方式并结合每一个实例，帮助读者解决这个问题。通过对具体项目的实践，读者可以对这几种技术及其相互结合有更深入的理解。

5.工程化思想

本书对于案例的讲解，并非传统的只讲述代码部分，而是采用工程化的思路，从项目需求开始进行分析、系统设计、原型图设计，再到具体的编码部分。本书采用一个从零开始的案例，对系统做整体分析，让读者先对小程序系统有整体把握，然后通过对开发过程以及知识点的详细讲解，使读者真正掌握系统开发的精髓。

本书的内容安排

本书一共8章，章节规划如下所示。

第1～2章是微信小程序的概述。讲述了微信小程序的基础，包括对于小程序的介绍和开发环境的搭建，以及第一个基础的小程序演示等。

第3章是Web开发基础知识。讲述了Web静态开发的HTML 5、CSS 3、JavaScript等知识，并且将其与微信WXSS、WXML做了相关的综述对比。

第4章和第6章是微信小程序标签与API。讲述了微信小程序开发中的WXML标签和微信小程序为开发者提供的API，并且对于每一个知识点进行了介绍和实例分析。

第5章和第7章是两个完整的项目实践。通过实践开发两个具有典型代表性的微信小程序应用程序，从零开始，并提供详细开发步骤，介绍了微信小程序应用程序的开发过程，通过对整个流程的介绍，既复习了前面学习的知识，也了解了项目实践的流程和技巧。

第8章补充了微信在2017年3月最新开发的一些API，包括蓝牙、卡券、收货地址等，由于微信开发对ES 6的支持，本章也简单介绍了ES 6语法的变化。

本书由浅入深，由理论到实践，尤其适合初级读者逐步学习和完善自己的知识结构。

适合阅读本书的读者

● 希望做微信小程序开发的人员。

● Web网页开发人员。

● 微信开发人员。

● 微信公众号管理人员。

● 想将原生App制作为微信小程序的人员。

● 想降低App开发成本的初创企业。

● 大中专院校的学生。

致谢

参与本书编写的还有谢郁、杨艳玲、赵毅峰、刘宁、刘海琛、刘轶、姜永艳、李玉莉、杨超、林江闽、薛淑英、赵东、陈宇、陈超，在此一并表示感谢。

轻松注册成为博文视点社区用户（www.broadview.com.cn），扫码直达本书页面。

● 提交勘误：您对书中内容的修改意见可在【提交勘误】处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。

● 与作者交流：在页面下方【读者评论】处留下您的疑问或观点，与作者和其他读者一同学习交流。

页面入口：http：//www.broadview.com.cn/314281微信小程序开发微信是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通信服务的免费应用程序，支持跨运营商、跨操作系统平台通过网络快速发送免费（需消耗少量网络流量）语音短信、视频、图片和文字，同时，也可以使用基于位置的社交插件“摇一摇”“漂流瓶”“朋友圈”、公众平台、语音记事本等服务插件。现在微信已经是亚洲地区最大用户群体的移动即时通信软件，这个平台已经远远不止社交如此简单，它已经包含了生活、娱乐、支付、媒体等服务，甚至提供了新式的应用服务入口，而2017年1月正式面世的小程序，便是最新的应用技术，也昭示着微信想做一个App整合平台的野心。本章涉及的主要知识点如下。● 微信公众号介绍：介绍微信公众号的特点和优势。● 微信小程序介绍：介绍微信的小程序功能，并且对此功能进行分析。● 应用领域：分析小程序的应用场景和适合拥抱小程序的应用类型。● 优势和特点：通过对小程序特性的剖析，找到小程序的适用范围和有优势的使用场景，并且对其将来的发展趋势做出描述。1.1初识微信小程序开发

本节首先介绍了什么是微信小程序应用，以及为什么要使用微信小程序进行开发。理解这些概念是学习微信小程序开发的基础，同时也是为什么选择微信小程序的必备知识。了解了微信小程序的强大，才能增强学习兴趣与乐趣。1.1.1 什么是微信公众号

微信公众号是开发者或商家在微信公众平台上申请的应用账号，该账号与QQ账号互通，通过公众号，商家可在微信平台上实现和特定群体的文字、图片、语音、视频的全方位沟通、互动，形成了一种主流的线上线下微信互动营销方式。

线上线下微信互动营销的代表微部落，率先提出标准的行业通用模板和深度定制的微信平台开发理念相结合，形成了线上线下微信互动营销的开放应用平台。

微信公众号主要是面向个人、政府、媒体、企业等机构推出的合作推广业务。在这里可以通过微信渠道将品牌推广给数以亿计的微信用户，减少宣传成本，提高品牌知名度，打造更具影响力的品牌形象。微信公众号有三类：

● 服务号。

● 订阅号。

● 企业号。

对于这三种账号的官方介绍，如图1-1所示。图1-1 种类介绍

请通过电脑登录微信公众平台官网（http：//mp.weixin.qq.com/），注册微信公众号，账号可以是个人用户或者企业用户。个人用户存在一些限制，企业用户需要进行企业资质的审核，但是无论如何都需要使用个人身份证件或者企业资料进行微信公众号审核，没有通过审核的公众号是没有任何用处的。

注册结束之后，登录此账号，会提示绑定管理者的个人微信，在第二次登录的时候会提示扫描登录。使用手机上管理者的微信单击“登录”按钮，网页也会自动跳转到管理界面，一个微信公众号就申请成功了，进入的管理界面如图1-2所示。

在这个管理界面里可以选择不同的开发模式，选择开发者模式后可以对接口和应用行为进行管理，对于微信小程序的申请和开发就在这个管理界面中，如图1-3所示。

注意：为什么要申请公众号呢？因为小程序就是借助于微信公众号进行发布的。图1-2 管理界面图1-3 小程序列表1.1.2 什么是微信小程序

2016年9月21日深夜，微信官方发放了一份关于微信小程序的内测邀请函，2016年年初张小龙提出的应用号终于面世了，这意味着微信又一新的布局的展现。

根据微信官方的说法，小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用担心是否安装太多应用的问题。应用将无处不在，随时可用，但又无须安装卸载。

小程序依托于微信平台，由于微信多平台的特性，所以小程序自然也会跟随微信进入多平台，实现简单且实用的跨平台体系，有可能成为一个巨大的App生态圈。

简单来说，微信小程序是一种基于微信生态圈的WebApp式应用。在提供面向用户友好的基础UI和交互体验的同时，也定制了统一的开发规范，并且为开发者提供基于微信的表单、导航、地图、媒体和位置等开发组件，这使得开发小程序的过程变得更加便利。

通过对于传统开发方式的打包，让开发者能够非常迅速地在微信的WebView里构建一个基于HTML 5和JavaScript的应用。微信还开放了登录和微信支付等接口，让这个小程序可以充分利用微信这一个平台的资源，对于Socket的支持，也使得小程序本身不会太过受限于微信提供的功能，极大地提高了开发的便利度和拓展性。1.1.3 微信小程序的应用领域

2016年1月，“微信之父”张小龙就曾宣布微信公众号将推出应用号，他当时的观点是，“很多人做微信公众号，而非App，因为App推广成本太高。这导致公众号现在更像是媒体化的平台。但我们本意不是传播内容，我们要提供服务，所以推出了服务号，但是服务号也没达到预期效果。我们在讨论一个新形态，叫应用号。用户关注应用号，就像安装一个App一样。”

所以大多数的内容发布类App都可以被小程序所代替，因为微信小程序是一种轻度的云端应用。

由于云和网络的发展，整个App的生态不再局限于本地一些应用的模式，而是逐渐进化成一种基于云端的体验，由于HTML 5的出现和服务器运载量以及带宽的高速发展，还有市场自由竞争的发展，使得用户不再被限制于某一个App提供的某项服务，但是手机的存储能力就成为了一个发展瓶颈。

用户不能在一个内存时常会满的终端上无止境地下载不同的App进行服务的体验，也不能时刻保证其在Wi-Fi环境下，而使用流量下载几十兆甚至上百兆，却可能只使用一两次的App对于用户而言，无疑是天方夜谭。

对于开发者而言，一个良好的跨平台开发环境非常重要。尤其是对于个人或者小团队的开发者而言，快速的市场反应能力远比开发出一个完美的App更值得追求，这样，产品才可以选择性地针对市场进行高速迭代。

并不是所有的服务都适合接入小程序，但大部分个人开发者和创业者团队的服务都适合接入其中，在微信的云端发布产品，同时也可以在云端缓存数据，这对于初创团队而言，大量减少了人力成本和运维成本。

适合用于微信小程序的应用分类如图1-4所示。图1-4 应用分类

对图1-4的分类进行一些分析：

● 第一分类的应用是不应该接入小程序的。这个分类都是互联网巨头，贸然接入可能会造成自我生态链的断裂，甚至于数据的安全性也不可以保证，且这个分类的应用需要更好的客户体验和更好的数据加密，所以是不适合接入小程序的。

● 第二分类的应用非常适合小程序的开发。这个分类主要是信息服务类的产品，涉及教育、医疗、家政、求职招聘、二手买卖、旅游、票务、金融理财等，属于非高频的专用信息服务，通过和微信的结合，可以为用户提供更加便捷的登录和预订服务，而不用常驻手机内存，即用即开。

● 第三分类的应用是比较尴尬的分类应用，可以尝试分析是否符合公司的具体生态圈和用户体验推广等，具体情况具体分析。当然，如果能用于打造创业团队，用于试错MVP产品减少试错成本，提升成功概率，也是值得去尝试开发的。

● 第四分类的应用比较适用于专业开发，视其特点的产品和分类进行是否介入小程序，因为对于小程序而言，其接口受限制于微信本身的API，所以对于有些专业的小程序应用可能并不能适用于或者是满足于需求，所以需要视情况而定。

综上，小程序的适用范围是广泛而普遍的，非常适用于中国的创业团队打造一个MVP，进行市场上的试错，并且可以在微信生态圈里减少了对于前期大量App Store的推广费用，并且能获得第一批初始用户。所以，这种快速而灵活的方式正是一个初创团队所需要的，而紧跟科技的脚步，能在一个现有产品上不断快速迭代开发的产品和开发模式才是最适合如今的互联网创业的。

注意：技术和市场是同样重要的，但是对于一个初创团队而言，最重要的并不是做一个足够完美的产品，而是做出一个Demo式的产品，然后推向用户，一点点完善，最后成为一个“完美”的产品。1.1.4 怎样学好微信小程序

微信小程序虽然已经正式发布，但是版本还处于一个不稳定的环境下，所以较Java、C++这样成熟的技术而言可能会变动较大。所以，要学好这样一门新技术，可能需要下面的一些能力：

1.基本的技术基础（1）JavaScript（简称JS）基础。微信小程序基于JS，并且支持原生JS进行逻辑开发，所以有一定的JS基础是非常重要的。（2）CSS基础。虽然用于布局样式的WXSS并不是单纯的CSS，但是也是基于CSS技术的一种封装，所以有一定的CSS基础对于学习WXSS也是必要的。（3）HTML（XML）基础。用于布局的WXML同样也是对于HTML（XML）的一种封装应用，所以HTML基础对于学习也是有一定意义的。

2.基本的编程思维（1）熟悉基本的编程思想，拥有写网页或者是App的思维模式。（2）拥有不错的逻辑思维能力，明确需求达到的目标。

3.解决问题的能力（1）熟练应用Google、Baidu等搜索引擎，找到相应的解决办法。（2）学会使用GitHub、StackOverflow等社区找到解决方案。

4.自学能力

能够不断自主学习相应的知识和计算机的最新技术，这也是在编程学习中最重要的一点。

其实小程序的开发还是很简单和便捷的，但是这并不意味着它是一个简单的程序，腾讯将服务和接口打包开放给了开发者，这使得开发人员的工作和难度大大减少了，但是正如任何一个入门简单的行业和技术一样，学习曲线都是冗长的。

所以想要实现在一个技术行业的不断成长，总结和学习是非常重要的。

注意：本书不会太多地涉及JS、HTML等技术，只是一个粗浅的学习过程，并不是从原理开始讲起，只会涉及一些简单的、我们需要使用的技术。剩下的需要读者不断地自主学习。1.1.5 微信小程序的前景

根据微信团队的说法，现阶段的小程序可以借助微信联合登录，和开发者已有的App后台的用户数据进行打通，但不会支持小程序和App的直接跳转。

1.优势

总体来看，腾讯为小程序的开发者开放多种服务及支撑能力，主要包括以下功能点。

● 视图容器：视图（View）、滚动视图、Swiper。

● 基础内容：图标、文本、进度条。

● 表单组件：按钮、表单等。

● 操作反馈。

● 导航。

● 媒体组件：音频、图片、视频。

● 地图位置服务。

● 画布。

● 文件操作能力。

● 网络：上传下载能力、WebSocket。

● 数据：数据缓存能力。

● 位置：获取位置、查看位置。

● 设备：网络状态、系统信息、重力感应、罗盘。

● 界面：设置导航条、导航、动画、绘图等。

● 开放接口：登录，包括签名加密、用户信息、微信支付、模板消息。

也就是说，可以通过调用已有的接口去实现很多原本只能通过App实现的功能，大大简化了开发成本，提高了开发速度。

按照App的发展规律和需求而言，小程序这样的应用模式的出现，无疑是很美好的。对开发者来说，微信小程序提供了一整套跨平台方式，这使得用户不用费尽心思开发多平台的App，尤其是屏幕适配问题不用考虑各种奇形怪状的机型和屏幕分辨率了，对于前端工程师而言更是一件利器。

这其实并非一个新的技术或者是跨时代的一次革命，但是对于微信推进的这次云端App而言，无疑是值得去跟进学习的，其可能并非代表着现在，更多的是将来的一种App的布局和发展趋势。

还有一点很重要，因为所有的逻辑和页面其实都是存于服务器上的，无须用户的更新和版本推送，不同版本的推送其实就只是一次服务器的版本更新，出现bug也可以随时地回滚或者修复版本。整个流程如图1-5所示。图1-5 具体流程

对于用户而言，微信小程序带来的更是便捷和手机存储空间的释放，无须安装App，无须无止境地更新和同步数据，甚至于将登录系统都整合为一个微信账户实现的自动登录。

此处其实能类比微信的服务号业务，比如滴滴出行的服务号，用户打车无须安装滴滴出行App，而是直接打开滴滴的应用号，单击“我要打车”按钮，输入目的地，就可以实现叫车的业务逻辑。滴滴的应用号如图1-6所示。图1-6 滴滴的应用号

而微信的小程序可以更好地实现这一业务逻辑，并且极大地提高整体的用户体验和应用的性能，给用户提供更好的服务体验。同时，包括外卖、团购等业务将来也可以选择使用小程序来解决方案。无须用户下载，却能给予用户原生或者是接近于原生App的体验，通过统一的微信接口解决一切，给用户最佳体验。

2.不足

微信小程序的未来也不一定一帆风顺，虽然微信小程序提供了大量方便的开发模式和平台，但对于有些大公司的主流大众产品，从利益的角度来说，利用微信的入口和平台流量，就会受制于微信和腾讯本身，这是值得衡量的。

还有一个问题，微信暂时没有解决多任务运行的问题。也就是说，如果正在使用一个应用的时候，突然有朋友给你发送了一条信息，当你去回复信息后，再打开那个小程序可能需要重新刷新应用。

也就是说，无法达到操作系统一样的效果，所以应该分应用、分场景、分人群进行不同类型的程序开发，而不是盲目地拥抱小程序。但是无疑，它的发展前景是非常不错的。

注意：微信小程序的前景是非常不错的，技术已经成熟，并且有着占绝对优势的生态圈和服务平台，所以小程序出现之后一定能引发一定的热潮。1.2小程序开发需要的技术

微信小程序本身是基于微信中的WebKit而存在的，所以其本身就是一个网页端的应用。但是与传统的HTML不同的是，它的页面并非是DOM的操作方式，这是为了避免多层嵌套DOM速度过慢的问题，对于开发者而言，这些都是透明不可见的，也就是说不用专门学习。

虽然小程序开发的技术并不是完全原生的JS、HTML、CSS，但其是用这些技术封装起来的，所以学习这些技术也是必要的。1.2.1 JavaScript技术

JavaScript是世界上最流行的脚本语言，它属于Web语言，它适用于PC、笔记本电脑、平板电脑和移动电话。JavaScript的设计目的是增加HTML页面的交互性。

许多HTML开发者都不是程序员，但JavaScript拥有非常简单的语法，所以几乎每个人都有能力将小的JavaScript片段添加到网页中。

JavaScript本身是一种高级编程语言，通过解释执行，是面向对象（基于原型）的直译语言。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、FireFox、Safari、Opera）支持。

在客户端，JavaScript在传统意义上被实现为一种解释语言，但在最近，它已经可以被即时编译（JIT）执行。随着最新的HTML 5和CSS 3语言标准的推行，它还可用于游戏、桌面、移动应用程序的开发和在服务器端网络环境运行，如通过Node.js。1.2.2 CSS技术

层叠样式表（Cascading Style Sheets，简称CSS），又称级联样式表、串接样式表。层叠样式表是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。目前最新版本是CSS 3。

网页的用户和开发者都可以使用CSS来决定文字的颜色、字体、排版等显示特性。它使得网页更加生动，甚至可以使用不同的样式来控制网页上出现动画或其他效果。CSS最主要的目的是将文件的内容与显示分隔开来，之后通过引入选择器的方式控制DOM的样式效果。这有许多好处：

● 文件的可读性加强。

● 文件的结构更加灵活。

● 用户和开发者可以自己决定不同的显示。

● 文件的结构简化了。

通过分离出来的CSS文件，可以针对每个不同的用户显示不同的效果，并且整个网站或其中一部分网页的显示信息被集中在一个地方，要改变它们很方便。针对不同的读者可以有不同的样式，比如有的用户需要的字体比较大，有的用户对于某些图标不可见或者是色弱等要对色彩做不同的调整。

CSS还可以控制其他参数，例如声音（假如浏览器有阅读功能的话）或给视障者用的感受装置。

对于最新的CSS 3，不但将CSS 3拆分为“模块”，而且在原有简单样式的基础上增加了一些新的属性，一些最重要CSS 3模块如下：

● 选择器。

● 盒模型。

● 背景和边框。

● 文字特效。

● 2D/3D转换。

● 动画。

● 多列布局。

● 用户界面。1.2.3 HTML（XML）技术

HTML（XML）技术其实是两种不同的技术，即HTML和XML。

超文本标记语言（HyperText Markup Language，简称HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义，最新版本为HTML 5。

可扩展标记语言（Extensible Markup Language，简称XML），是一种标记语言。标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种信息的文章等。如何定义这些标记，既可以选择国际通用的标记语言，比如HTML，也可以使用像XML这样由相关人士自由决定的标记语言，这就是语言的可扩展性。XML用到的主要有可扩展标记语言、可扩展样式语言（XSL）、XBRL和XPath等。

XML的诞生是为了取代HTML，但由于XML一些烦琐的写法和不够灵活的方式，它并没有取代HTML的位置，反而因其清晰的结构和自定义的节点名称，被用于一些配置文件的书写和一种数据持久化的手段。

由于HTML和XML本源和初衷是一致的，所以对于两者的学习是通用的、可扩展的。

通过以上对HTML和XML的介绍，这里总结一下它们的联系与区别：XML和HTML都用于操作数据或数据显示结构，在结构上大致相同，但在本质上的区别也相当明显。

1.语法要求不同（1）在HTML中不区分大小写，在XML中严格区分大小写。（2）在HTML中，结构不严格，对于解析而言，如果能通过上下文清楚地显示出段落或者某一标签在何处结尾，那么可以省略

2.标记不同（1）HTML使用已经定义好的既有标记，但XML的语法结构是可以扩展的，所以并没有固有的标记。（2）HTML标签是预定义的，对于任意的标签都是存在含义和使用规范的，包括自定义的标签也应该提前解析；但XML的所有标签都是可以进行自定义、可扩展的，其属性也是扩展的一部分。

3.作用不同（1）HTML是用来显示数据的；XML是用来描述数据、存放数据的，所以可以作为持久化的介质。HTML将数据和显示结合在一起，在页面中把数据显示出来；XML则将数据和显示分开。XML和HTML都是被设计用来描述数据，XML的焦点是数据的内容，而HTML的焦点是数据的外观。（2）XML中的标签和属性是不具有任何的效果和操作的，更倾向于一种数据的表达形式和存储形式。而HTML更加倾向的是一种数据的显示形式和展示形式，所以这两种技术各有所长。（3）通过HTML（XML）与CSS文件的结合，可以构造出任意一种样式的网页和排版模式，比如对于微信小程序本身，就使用类似于HTML（XML）的一套标签语言，所以通过微信小程序的WXSS和WXML的结合也可以构造出丰富的页面。1.3小程序开发所使用的技术

从MVC的传统开发模式来说，小程序本身其实只是对于View层的一种扩充，虽然它同样拥有一个逻辑层，但是由于小程序的体积以及应用方式的限制，所以逻辑层更多的是实现应用的显示方式和数据的整合，以及API的调用等操作，而非实现一个完整的应用。

小程序的开发并非是一种完全全新的开发形式和语言逻辑，对于任何一个拥有HTML、CSS和JS基础的开发者而言，小程序的开发是简单和便捷的，并没有学习的门槛和陡峭的学习曲线。如果读者并非一个网页开发者，也无须担心，因为就小程序本身的开发而言，是简单易用的。

注意：MVC全名是Model View Controller，是模型Model、视图View、控制器Controller的缩写，是一种软件设计典范。它用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。1.3.1 开发文件结构

对于微信小程序整个开发框架而言，其程序中包含一个描述整体程序的App和多个描述各自页面的pages。小程序开发项目目录如图1-7所示。

图1-7是由微信小程序开发工具勾选quickstart选项后自动生成目录的一部分，也是小程序本身需要的一些文件组成。图1-7 小程序开发项目目录

一个小程序主体部分由三个文件构成（如表1-1所示），它们必不可少，必须放在项目的根目录上。表1-1 项目列表

页面是开发者需要关注的地方，它存放在文件夹pages中，由于是系统自动生成的项目，其index文件夹中的文件就是一个常用页面的三个部分，而log文件夹是微信小程序自动生成的日志页面。

一个完整的小程序页面由四部分组成，具体的项目文件格式如表1-2所示。表1-2 项目文件格式

注意：对于微信小程序自身，一个页面的四个文件名称都是一致的，并且如果使用开发者工具，要在app.js中先注册这个页面，注册完成后会自动生成对应的三个同名文件（除去json文件）。1.3.2 配置程序

app.json文件是小程序中最基本的全局配置文件，它决定页面文件的路径（路由）、窗口表现、设置网络超时时间、设置多tab等。对于app.json的具体配置如表1-3所示。表1-3 app.json配置项

下面分别对每个配置项进行说明。

1.pages

pages接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的（路径+文件名）信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对pages数组进行修改。

文件名不需要写文件后缀，因为框架会自动去寻找路径.json、.js、.wxml、.wxss的四个文件进行整合。

quickstart项目的开发目录结构如图1-7所示，则需要在app.json中配置：

2.window

window配置用于设置小程序的状态栏、导航条、标题、窗口背景色，其具体包含的属性及配置如表1-4所示。表1-4 window属性及配置

注意：HexColor（十六进制颜色值），如＂＃000000＂。

比如对于第5章的实践示例，其window的配置如下：

Windows配置后的显示效果如图1-8所示。图1-8 window配置后的显示效果

3.tabBar

tabBar用于配置小程序的菜单选项。如果小程序是一个多tab应用（客户端窗口的底部或顶部有tab栏可以切换页面），其本质相当于一个链接。可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。

注意：通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在tabBar配置中的页面，也不会显示底部的tab栏。

tabBar是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序，其具体的配置属性如表1-5所示。表1-5 tabBar配置属性

tarBar的属性list是一个数组，数组中的每个项都是一个对象，其属性值如表1-6所示。表1-6 list属性【示例1-1】

如果对一个quickstart自动生成的项目增加如下配置，并且将其两个页面链接指向首页和日志页：

其显示效果如图1-9所示。图1-9 tarBar显示效果

4.networkTimeout

networkTimeout属性可以设置各种网络请求的超时时间，其具体属性如表1-7所示。表1-7 networkTimeout属性

5.debug

可以在开发者工具中开启debug模式，在开发者工具的控制台界面，调试信息以info的形式给出，其信息有page的注册、页面路由、数据更新、事件触发。目的是帮助开发者快速定位一些常见的问题。

6.page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置，这比app.json全局配置简单得多，只是设置app.json中的window配置项的内容，页面中配置项会覆盖 app.json的window中相同的配置项。页面的.json只能设置window相关的配置项，以决定本页面的窗口表现，所以无须写window这个键。

page.json的配置属性如表1-8所示。表1-8 page.json的配置属性1.3.3 逻辑层

对于微信小程序的逻辑层而言，其主要技术手段是JavaScript，用于一些数据的定义和API方法的实现。

开发人员创建的任何一个页面，都至少有一个相关的JS文件，可以在文件中新建对此页面的操作和数据实现逻辑，该文件完全符合JS的语法和书写习惯，并且支持ES 6，对于微信小程序运行的三大平台（iOS、Android和用于调试的开发工具）的解析方式而言：

● 在iOS上，小程序的JS代码运行在JavaScriptCore中。

● 在Android上，小程序的JS代码通过X5内核来解析。

● 在开发工具上，小程序的JS代码运行在nwjs（Chrome内核）中。

虽然三大平台的环境十分相似，但至少在目前还是有一些区别的，这给开发者带来很大的困扰。注意：在0.10.101000及之后版本的开发工具中，会默认使用babel将开发者代码ES 6语法转换为三大平台都能很好支持的ES 5代码，帮助开发者解决环境不同所带来的开发问题。开发者也可以在项目设置中关闭这个功能。ES 6（ECMAScript 6）是JavaScript最新标准，也称为ECMAScript 2015。

1.注册程序

App（）函数用来注册一个小程序，它接受一个object参数，指定小程序的生命周期。object参数说明如表1-9所示。表1-9 object参数说明

注意：前台、后台定义——当用户单击左上角的“关闭”按钮，或者按了设备Home键离开微信，小程序并没有直接销毁，而是进入了后台；当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台，只有当小程序进入后台一定时间后，或者系统资源占用过高，小程序才会被销毁。

微信小程序提供了全局的getApp（）函数，可以获取到小程序实例，在定义了App的函数中，使用this即可获得实例。

注意：App（）必须在app.js中注册，且不能注册多个。

2.注册页面

Page（）函数用来注册一个页面，同样接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

对于一个page拥有本身的函数和属性，具体的属性和说明如表1-10所示。表1-10 page属性和说明续表

当定义一个页面之后，保存app.json文件，微信编辑器会自动生成page页面的代码，其代码如下：

上述代码自动生成的这些函数，我们称之为生命周期函数。

表1-10中的onShareAppMessage是用户分享函数，只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮。用户单击“分享”按钮时会调用其方法，此事件需要返回一个Object，用于自定义分享内容，可以自定义分享的字段如表1-11所示。表1-11“分享”按钮字段【示例1-2】

自定义分享的示例代码：

其显示效果如图1-10所示。图1-10 显示效果

3.模块化——文件作用域

在JS文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数getApp（）可以获取全局的应用实例，如果需要全局的数据可以在App（）中设置。

试读结束[说明：试读内容隐藏了图片]

下载完整电子书