微信小程序开发【PPT】 第01章 初识微信小程序.docx

目录第1章初识微信小程序21.1 小程序诞生背景21.1.1 先驱者百度“轻应用” 21.1.2 生逢其时的微信小程序31.1.3 “富二代”微信小程序41.2 小程序特点41.3 小程序现状51.3.1 小程序发展现状51.3.2 小程序开发现状61.4 小程序MINA框架81.4 . 1 MVVM模型简介91.5 .2小程序MINA框架简介10小程序Ml NA框架简介其实MINA使用上述的MVVM架构模式。MINA的目标是通过尽可能简单、 高效的方式让开发者可以在微信中开发具有原生APP体验的服务。MINA提供了 自己的视图层描述语言WXML和WXSS,以及基于JavaScript的逻辑层框架，并 在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦 于数据与逻辑上。MINA的核心是一个响应的数据绑定系统。整个系统分为两个 部分，即视图层(View)、逻辑层(App Service),另外还有相关的Native层。view 层对应渲染层，model层对应逻辑层，viewmodel层对应Native层。MINA框架的工作原理如下图1-5所示，逻辑层将数据进行处理后发送给视 图层，同时接受视图层的事件反馈。视图层将逻辑层的数据反映成视图，同时将 视图层的事件发送给逻辑层。Native层主要做了两件事情：数据绑定和事件监听。 逻辑层发送网络请求也经由Native转发。AppService应用层逻辑页面视图层逻辑处理数据缓存网络请求JS APIJS Bridge文件系统任务管理网络权限管理Native System 系统层图1-5 MINA框架工作原理示意图MINA框架为页面组件提供了 bindtap> bindtouchstart等事件监听相关的属 性，来与AppService中的事件处理函数绑定在一起，实现也面向AppService层同 步用户交互数据。MINA框架同时提供了很多方法将AppService中的数据与页面 进行单向绑定，当AppService中的数据变更时，会主动触发对应页面组件的重新 渲染。MINA使用virtualdom技术，加快了页面的渲染效率。第1章初识微信小程序微信小程序简称小程序（本书后面如无特别说明，小程序均指微信小程序）， 英语名称为Mini Program。它最早由微信教父张小龙2016年1月11日提出。当 时微信已经普及，很多传统Web产品和业务都在向微信公众号迁移，因为通过 微信作为人口，可以降低用户获取成本和开发成本。但是当时的微信公众号、服 务号都不能很好的满足这种需求。微信内部研究新的应用形态，叫微信小程序。2016年9月21日，微信小程序正式开启内测，随后内测消息刷爆了技术爱 好者的朋友圈，微信小程序内测码一时成为市场上的香悖管。与此同时腾讯云也 上线了微信小程序服务端解决方案，为小程序提供服务技术支持。2016年11月 3日，微信小程序正式开发公测，广大开发者都迫不及待的进行体验测试。2017年1月9日，张小龙在微信公开课上正式宣布微信小程序上线。同时 小程序全面开发申请注册。从此微信小程序开始变得流行起来。2017年12月28 日，微信开放了小游戏，微信还专门在启动页面里宣传了著名的小游戏一一跳一 跳，这款游戏迅速火爆中国，几乎所有微信用户都在“跳一跳”。1.1小程序诞生背景二维码微课：001-微信小程序简介其实小程序的概念最早由百度提出，当时被称为“轻应用”。但是受制于技 术及生态等原因，“轻应用”没有被成功的推广开来。1.1.1 先驱者百度“轻应用”2013年8月，百度全球开发者大会上百度首先提出了 “轻应用”的概念。 百度早已判断未来的互联网主战场是移动APP,百度选择使用“轻应用”来企图 开辟一条全新的赛道，将传统PC互联网的优势延续到移动互联网，确保自身移 动互联网的人口位置。百度对轻应用的描述为“百度轻应用是无需下载、即搜即 用的全功能应用，既有媲美甚至超越Native App的用户体验，又具备Web App 的可被检索与智能分发的特征，可以有效解决优质应用和服务与移动用户需求对 接的问题。”但是结果非常遗憾，百度“轻应用”未能获得广大移动互联网使用者的厚爱, 大家都没由听说过百度“轻应用”，更别说使用。百度“轻应用”逐渐边缘化。百度“轻应用”折戟沉沙总结失败原因如下：整体技术不够成熟。4G尚未普及且资费非常昂贵，我国于2013年正式启动 4G网络建设，2013年年底移动运营商获得了 4G牌照，彼时移动互联网主要依 靠的是WIFI及3G,其速度严重影响了移动应用的体验。另外智能手机性能不高、 价格昂贵，大部分手机还基本处于功能键状态。整体技术不够成熟严重影响了百 度“轻应用”的用户体验，用户更倾向于使用Native APPO移动支付尚未普及。移动应用最重要的场景就是网络消费，而这些应用场景 的终点都是移动支付。没有移动支付意味着这些网络消费场景不太可能实现，这 也注定了百度“轻应用”难以爆发并获得大量用户。百度产品无社交属性，用户粘性不强。百度的主要产品是百度搜索引擎、百 度地图、百度网盘等，都属于工具类应用，只需用户单独使用即可，没有任何的 社交场景。另外使用百度搜索引擎的群体以大学生和知识分子为主，对其他用户 几乎没有粘性。并且百度产品人均单日使用时间不足10分钟。所以百度本身没 有强力的爆款本地APP,用户数量及用户粘性的不足也造成百度“轻应用”无法 “挟用户以令开发者”，这样的恶性循环，也就造成了百度“轻应用”的难产。我们需要给百度“轻应用”以掌声表示感谢。虽然百度“轻应用”失败了， 但是它作为第一个吃螃蟹的人，对“小程序”类的技术进行实践，为后面其他“小 程序”提供了宝贵的经验。其实百度“轻应用”并没有消失，今天它以百度“小 程序”的形式继续存在于百度APP中。1.1.2 生逢其时的微信小程序时间进入2016年，距百度发布“轻应用”过了 3年，那么这3年时间里， 移动互联网界发生了什么变化呢？首先是4G的全面普及。根据工信部的数据，2016年底我国4G用户数量已 经超过7亿。也就是说4G用户数量从2013年的0用户爆发式的增长到2016的 7亿用户仅用了 3年时间。与此同时4G资费的价格也变得亲民，甚至出现了不 限量套餐。4G智能手机的大范围普及为移动APP百花争鸣提供了肥沃的土壤。 微信就是其中超级APP, 2013年微信APP用户数为3.55亿，而2016年微信APP 用户数则为7.68亿，几乎可以认为4G用户都是微信APP用户。其次是智能手机性能大幅提升。在高通、华为海思、联发科等移动处理器芯 片厂商努力下，智能手机的芯片变量越来越强、且能耗越来越低。同时电池技术 不断革新，石墨烯等新电池技术的出现也进一步促进了智能手机的全面发展。这为微信这种日均使用时间超长的APP提供了条件。最后就是移动支付的普及。为争夺移动支付的主导地位，微信和支付宝进行 了旷日持久、挥金如土的红包大战，全民都再通过支付宝扫一扫领取红包、微信 摇一摇领取红包。最后微信凭借其用户粘性和抢红包游戏，微信支付取得了胜利。 至此类似共享单车、打车、外卖等应用就形成闭环。微信小程序在2016年中旬被提出可谓是占尽天时地利人和，真是生逢其时。1.1.3 “富二代”微信小程序2016年，微信日均活跃用户数量达7.68亿，过半用户日均使用时间达90 分钟，而且还有进一步突破的趋势。拥有如此群众基础的微信可谓宇宙第一 APP, 那么作为微信亲儿子的微信小程序可谓不折不扣的富二代。“富二代”微信小程序从一出生就备受瞩目。微信小程序具有众多光环：使 用微信团队开发的MINA框架（使用了 MVVM模型）；可以使用腾讯云开发技 术（英语全称为Tencent Cloud Base,简称TCB,包括云数据库，云函数等功能） 作为服务端；统一的WeUI用户界面；微信登陆免鉴权。1.2 小程序特点目前，微信小程序在食品、购物、旅游、酒店、教育、生活、医疗、金融、 公共服务等多个行业具有一定的影响力，对传统应用产生了很大的影响，迫使许 多企业放弃"客户至上的理念，转而将技术和资金投入到微信小程序中。在营销 方面，微信小程序简化了推广流程。依托微信生态，商家可以利用微信自身流量 快速提升品牌知名度，获取更多客户。同时，小程序免费安装的策略也能满足更 多群体的使用需求，更容易被用户接受。另外，热门小程序有哪些特点？覆盖面广自2017年1月9日微信小程序推出以来，官方公布的个人/非个 人主体小程序开放的服务类目的条目越来越丰富。无论是公司还是个人，您都 可以快速轻松地找到您计划运营的项目。经过两年多的开发，小程序的用户界面 经过多次调整，最终将主要类别项设置为20个。无需安装和卸载微信小程序最大的特点就是可以即刻打开，用户只需扫描商 家二维码即可以浏览网页的形式使用，小程序可简化为手机桌面的快捷方式图 标，而且不会像其他软件一样在后台占用过多的内存和流量。此外，用户还可以 方便地使用小程序的分享功能，将小程序直接转发给他人，因此越来越多的人开 始接受这种新的程序使用方式。随着小程序的大规模普及，未来几年将有80%的应用被取代。生产和维护成本低对于很多大众创业者和线下零售商来说，选择使用微信小 程序进行运营和推广，可以大大减少资金投入。小程序后端服务器无需商家购买 自建，可节省运维成本。在开发过程中，小程序类似于简易的网站开发。小程序 官网上已经有很多现成的模板，相比开发同款APP可以节省不少成本。微信小程序主页右上角有一个搜索按钮，可以进行高效推广，让所有微信用 户都可以搜索到自己感兴趣的小程序。这个功能也让很多商家节省了推广成本. 凭借微信用户如此庞大的流量，你的应用可以被全国10亿微信用户搜索。小程 序上线时，您可以申请免费的"附近小程序功能，让5公里范围内的微信用户可 以看到您的小程序。在当今互联网时代，微信小程序逐渐被更多用户了解和使用, 各种小程序也逐渐走进我们的日常生活。随着这一趋势的发展，小程序将发展成 为大型在线平台，越来越多的商家会选择微信小程序作为主要的营销方式。其实 小程序的核心就是切分生活场景，将微信服务融入生活。我们相信，随着微信小 程序的不断发展，手机上安装的应用数量会越来越少，生活场景会越来越便捷。支持微信云开发技术。微信云开发是微信团队联合腾讯云推出的专业的小程 序开发服务。开发者可以使用云开发快速开发小程序、小游戏、公众号网页等， 并且原生打通微信开放能力。开发者无需搭建服务器，可免鉴权直接使用平台提 供的API进行业务开发。微信云开放技术众多，无需搭建服务器，快速构建小 程序、公众号；无需搭建服务器，只需使用平台提供的各项能力，即可快速开发 业务；免登录、免鉴权调用微信开放服务，无需管理证书、签名、秘钥，直接调 用微信API o复用微信私有协议及链路，保证业务安全性；统一开发多端应用, 支持环境共享，一个后端环境可开发多个小程序、公众号、网页等，便捷复用业 务代码与数据；按量计费，成本更低，支持按量计费模式，后端资源根据业务流 量自动扩容，先使用后付费，无需支付闲置成本。1.3 小程序现状1.3.1 小程序发展现状2021年1月19日微信公开课PRO在广州开讲主论坛现场，微信小程序负责 人表示，微信小程序日均活跃用户突破4亿，人均使用小程序个数较2019年增 长25%,人均小程序交易金额较2019年增长67%o值得注意的是，微信小程序全年累计交易额同比增长100%。而据腾讯2019 年财报中，小程序8000亿的全年交易额计算，2020年微信小程序的全年交易额约为1.6万亿。在开发者端，年同比活跃小程序数整体增长了 75%,有交易的小程序数年同 比增长68%。微信方面表示，“在出行、旅游、政务、教育及多个零售板块，有 交易的小程序数增长率远超整体小程序数量的增长，体现了行业交易生态的逐步 丰满。”具体应用上，在政务民生领域，小程序健康码累计服务用户超过8亿，累计 展示码量超200亿次；社保缴费小程序帮助1.59亿人不出门在线完成参保。在商业化领域，到2020年底，全年累计有超过1亿人次在购物中心和百货 小程序购物；借助小程序预售+线下自提等模式，累计超过3亿用户在微信内购 买生鲜蔬果。在我国移动互联网已经普及的情况下，移动互联网领域巨头阿里系、腾讯系、 头条系内卷严重，移动App获取新用户成本越来越高。微信小程序获得如此高 速增强趋势实属难得。1.3.2 小程序开发现状总体而言，微信小程序开发难度低、效率高，这主要得益于微信小程序开发 团队全新设计的MINA框架。与传统的原生Android App开发相比，微信小程序 开发可以使用主流Web前端开发框架的特性，完整的页面视图生命周期、数据 绑定、条件渲染、列表渲染、响应事件等。优秀的集成开发环境。目前微信小程序官方开发工具是“微信开发者工具”， 其界面如下图1-1所示，该工具除了可以开发微信小程序外，还可以开发微信小 游戏、公众号网页等。该工具整合了编辑器、模拟器、调试器、可视化、云开发 等众多模块，同时支持真机调试。微信团队对开发工具进行着长期持续更新和维 护，目前最新版本是更新），该工具的用户体验较好, 运行流畅，从不崩溃，亦无Bug。皿目 文件 «« 工具®择 优is rik tea ««Q U 宿 s «nia mm «Mi可凌叱 云开费erSubjectAddjsmdex.wxmlX«il Kt&机试肩Q存上传阪。理洋00 (D -（D白冬小Q优第团购 通知公告 门店导航 电话联豕在送客最口 <" miniprogum > pages > i5dex > fit index.wxml > & view cont 1 <vi«w cl*ss«"contain«r">89 ie12 v13 v14(view clas$s"page-section page-section-spacing swiper"><s.iiper indicator-dots=" indicatorDots " autoplayc- autoplay " circulars" (circular " vertical*" vertical)interval«" (interval) " duration*"-；duration)" previous-«argin«M (previousMargin px" next-margin.” (nextMargin px"><swiper-item wx:for»" swiper) - wx:key»"index" class«-swip-iteni">(image class="swiper-image" src=".item.poster," data-indexs" (index - mode="heightFixH bindtap>'*go2ViewPage"></ifrage></swip«r*item></swip«r></view>编辑器I明星学员模拟器16<vie» class«"quick_entry"><navigator cl«ss»"«ntryM urlM"/pages/cour$«/cour$«'* op«n-typ«»"switchT«b"> <vi«w class»"">< - " " '' r ' c - ' . Ege-mc:e = ".："h =:".= #></view><view clas$a"w«ui-grid_团购</vi，w>oG Wxml Console Sources Netwcdc Memory AppData Storage Security Sensor Mode Audits Trace VulnerabMyE 0 «ppscrvi«Defauft lewis A "ten” 索 tfl况提示HR sit»Mp 的规则6,pges/indax/indax身梗索引LF WXML 0图1;微信开发者工具界面完善的技术文档。除了优秀的开发工具外，微信小程序的配套技术文档也是非常齐全，可以说微信官方文档小程序（又名“微信开放文档”）就是微信小程序的百科全书，亦是优秀的教程，如下图1-2所示。该文档不但系统的讲解了微信小程序开发全部知识，而且提供了很多代码示例，并且是代码片段的形式，可以通过点击链接跳转到微信开发者工具直接将该代码片段导入到微信开发工具中进行运行调试，开发者文档代码的导入如下图1-3所示。微信官方文档小程序开发介绍设计 运营数据 社区中文指南组件API服务端工具云开发云托管小程序配置小程序框架参考文档场景值本章为4涯序框架配置、框架接口、WXML和WXS等的参考文档，关于组件和API的详细参考文档请参见:框架接口WXML语法参考 4濯序组件参考文档 小程序API参考文档 小程序服务端API参考文档WXS语法参考官方教程-小程序开发进阶之前端开发4节课，教你快速入门”濯序蒯赢本系列视频，由腾讯课 堂NEXT学院、微信学堂联合出品.小梗停开发进阶图1-2微信官方文档小程序框架部分的首页示例代码御发者工具中-11一点击该链接可期炼专到微信开发工具J并导入该代码片段<live-player src="https:/domain/pull_stream" mode="RTCnautoplay bindstatechange="stateckPage(statechange(e) console.log( live-player code:', e.detail.code) 卜error(e) console.error( live-player error:', e.detail.errMsg) )图1-3微信官方文档小程序中的示例代码的导入众多框架支持。目前已经有一些比较被广泛使用的框架了，比如WeUI、 WePY、Taro mpvue等。其中WeUI是微信团队专门针对微信开发的样式框架， 让开发者可以快速使用微信官方的推荐的UI风格。WePY是小程序最早的框架之 一，是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选 择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise, Async Functions 的引入都是为了能让开发小程序项目变得更加简单，高效。Taro是一个开放式跨 端跨框架解决方案，支持使用React/Vue/Nerv等框架来开发微信/京东/百度/支 付宝/字节跳动/QQ小程序/H5/RN等应用。mpvue是美团点评开源的一个使用 Vue.js开发小程序的前端框架。框架基于Vue.js核心，mpvue修改了 Vue.js的 runtime和compiler实现，使其可以运行在小程序环境中，从而为小程序开发引 入了整套Vue.js开发体验。强大的微信开放社区。微信小程序社区非常活跃，里面不但有众多的开发者 讨论各种问题，另外还有腾讯的官方工作人员参与，他们可以对各种“疑难杂症” 进行诊断，必要的时候他们还会主动向我们索取问题代码。1.4小程序MINA框架MINA是腾讯给微信小程序框架的命名。MINA框架通过封装微信客户端提 供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供一整套 JavaScript API,让开发者能够非常方便地使用微信客户端提供的各种基础功能与 能力，快速构建一个应用。小程序开发框架的目标是通过尽可能简单、高效的方 式让开发者可以在微信中开发具有原生APP体验的服务。MINA不但性能优异，而且开发简单，对开发人员极其友好，非常适合新手学习，深受广大开发者喜爱。1.4. 1 MWM模型简介MVVM是Model-View-ViewModel的缩写。MVVM是一种架构模式，是一种 思想，是一种组织和管理代码的艺术，而并非一种框架。它利用数据绑定、属性 依赖、路由事件、命令等特性实现高效灵活的架构。MVVM 源于著名的 MVC(Model-View-Controller)模式，期间还演化出 MVP(Model-View-Presenter)模式。MVVM的出现直接促进了现代GUI前端开发和 后端开发逻辑的分离，提高了前端开发效率。MVVM框架的示意图如下图1-4所示，MVVM的核心是数据驱动即 ViewModel, ViewModel 是 View 和 Model 的关系映射。在 MVVM 中 View 和 Model 是不可以直接进行通信的，它们之间存在着ViewModel这个中介。ViewModel 类似中转站(Value Converter),负责转换Model中的数据对象，使得数据变得更 加易于管理和使用。MVVM本质就是基于操作数据来操作视图进而操作DOM, 借助于MVVM无需直接操作DOM,开发者只需完成包含声明绑定的视图模板， 编写ViewModel中有业务，使得View完全实现自动化。当用户操作View, ViewModel感知到变化，然后通知Model发生相应改变，反之亦然。ViewModel 向上与视图层View进行双向数据绑定，向下与Model通过接口请求进行数据交 互，起到承上启下的作用。ViewModelModelView数据视图通讯观察者DOMMVVM框架Javascript)图1-4 MVVM框架示意图目前有主流Web前端框架都有MVVM模型的身影，Vue、React、Angular, 甚至Android原生App开发中也出现了 MVVM框架。原因很简单，就是MVVM 可以大大提高开发效率。