小程序架构分析
小程序面试题目(3篇)
第1篇第一部分：基础知识1. 请简要介绍小程序的概念、特点以及与App的区别。
解析：- 概念：小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的概念，用户扫一扫或者搜一下即可打开应用。
- 特点：- 即用即走：无需下载安装，快速启动。
- 轻量级：体积小，启动快。
- 便捷性：用户使用方便，无需关心版本更新。
- 平台兼容：支持微信、支付宝等多个平台。
- 与App的区别：- 安装方式：App需要下载安装，小程序无需。
- 运行环境：App运行在操作系统上，小程序运行在微信、支付宝等平台。
- 更新方式：App更新需要用户手动下载，小程序更新自动推送。
2. 请说明小程序的运行机制。
解析：- 小程序分为客户端和服务端两部分。
- 客户端负责展示界面和用户交互，服务端负责数据处理和业务逻辑。
- 客户端通过API与服务端进行数据交互。
3. 小程序的生命周期有哪些？请分别说明。
解析：- 页面生命周期：- onLoad：页面加载时触发。
- onShow：页面显示时触发。
- onHide：页面隐藏时触发。
- onUnload：页面卸载时触发。
- 小程序生命周期：- onLaunch：小程序初始化完成时触发。
- onShow：小程序显示时触发。
- onHide：小程序隐藏时触发。
- onError：小程序发生脚本错误时触发。
第二部分：技术实现4. 请简述小程序的页面结构。
解析：- 小程序页面由以下几部分组成：- WXML（微信标记语言）：用于描述页面的结构。
- WXSS（微信样式表）：用于描述页面的样式。
- JS（JavaScript）：用于描述页面的逻辑。
5. 如何在小程序中实现页面跳转？请举例说明。
解析：- 页面跳转可以通过`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等方法实现。
- 示例：```javascript// 页面Awx.navigateTo({url: '/pages/pageB/pageB'// 页面Bwx.redirectTo({url: '/pages/pageC/pageC'});// 页面Cwx.switchTab({url: '/pages/pageD/pageD'});```6. 如何在小程序中实现数据绑定？请举例说明。
微信小程序的架构与开发浅析
第35卷 第12期 福 建 电 脑 Vol. 35 No.122019年12月Journal of Fujian ComputerDec. 2019———————————————本文得到佛山科学技术学院研究生自由探索基金项目(No.2019ZYTS43)资助。
李哲，男，1993年生，主要研究领域为计算机网络、前端开发。
E-mail: lz2014210993@ 。
周灵，男，1972年生，博士，主要研究领域为计算机网络、嵌入式系统，E-mail: 393703276@ 。
微信小程序的架构与开发浅析李哲 周灵(佛山科学技术学院 广东 佛山 528225)摘 要 随着移动互联网的不断发展，网络应用和移动互联网产品日益朝着“微、小、轻”的方向不断前进，微信小程序就是一个重要体现。
微信小程序的特点是无需下载、触手可及、用完即走不占用手机内存且开发成本较低。
微信小程序是一个基于MINA 框架的前端应用，核心技术是JavaScript 技术、WXML 技术、WXSS 技术。
本文将从微信小程序的主体架构做出分析和探究核心技术的应用，最后阐述微信小程序开发思路及市场前景。
关键词 微信小程序；MINA 框架；JavaScript 技术；WXML 技术；WXSS 技术 中图法分类号 TP399 DOI:10.16707/ki.fjpc.2019.12.024Overview and Development of WeChat AppletLI Zhe, ZHOU Ling(Foshan Institute of Science and Technology, Foshan, China, 528225)Abstract With the continuous development of mobile Internet, network applications and mobile Internet products are advancing in the direction of "micro, small, and light". WeChat Applet is an important example. WeChat Applet is characterized by no need to download, easy access, memory free after running, and low development cost. WeChat Applet is a front-end application based on MINA framework. The core technologies include JavaScript technology, WXML technology, and WXSS technology. This paper analyzes and explores the application of core technologies in terms of the main structure of WeChat Applet. Finally, this paper expounds the development ideas and market prospects of WeChat Applet.Keywords WeChat Applet; MINA Framework; JavaScript Technology; WXML Technology; WXSS Technology1微信小程序概述2016年初微信之父张小龙提出一种新的应用形态微信“小程序”，目的是为了让微信用户更好地在网络化的今天方便地享受优质服务。
软件开发中的三层架构技术分析
软件开发中的三层架构技术分析计算机普及之初，软件的开发使用的都是二层架构技术，即只考虑2个端点：客户端和服务器端。
用户通过客户端界面所提供的数据，直接在客户端对数据进行计算和处理，然后通过服务器在数据库中对数据进行读取等操作，得出需要的最终结果，并将结果传输到客户端界面显示给用户。
在这种方式中，客户端直接和服务器对接，没有其他数据处理环节，有利于提高数据库数据读取的速度，但缺点是当计算机软件的任何一个部分发生更改，哪怕是最微小的变动，整个计算机软件都需要重新开发，限制了软件的通用性。
特别是对于大型软件开发，除不利于软件的修改，在软件的开发期也存在很大的困难，需要程序编程人员相互高度配合，而且也不利于工作的分配。
为了解决这种矛盾，就出现了计算机软件的三层架构技术，将原先单一的客户端和服务器端的模式，根据功能分别拆分成表示层、业务逻辑层、数据访问层和数据实体层。
采用“分而治之”的思想，把复杂的问题分成不同的部分，即不同的层，以便逐个解决问题，便于软件的设计、控制、资源分配和修改。
为了让大家更好地了解三层架构技术，本文从几个方面对软件开发中的三层架构技术进行介绍。
1三层架构技术中具体分工和各层功能介绍(1)表示层：主要是指适合用户与计算机的交互界面，目的是为了方便用户数据的输入和显示处理后的数据结果，这部分工作主要由界面的美工完成。
软件设计人员通过表示层界面收集用户输入的数据要求，并把这些数据转换成业务逻辑层可以操作的数据。
同时也把业务逻辑层传出的结果转换成客户想要的效果，通过文本、图片、动画、3D等格式显示在用户眼前。
表示层也可以被理解为输入和输出的操作平台，我们可以创建一个图书馆，然后把客户要求设计成固定的元素：图片、脚本、CSS、附件等进行统一管理。
(2)业务逻辑层：又称为领域层，是表示层和数据访问层的中间桥梁，实现业务之间的逻辑处理，主要是对经过表示层输入的数据进行验证、计算和业务规则等方面的处理。
手机APP小程序设计解决方案PPT模板
第一阶段
XX店风采 教练风采 学员风采 企业文化
开发时间：2019年1月－4月
第二阶段
业务范围 健身知识 健身视频
第二阶段进行余下三个模块开发，并偿 试商业化运营。 开发时间：2019年4月－5月
19
盈利模式
四种盈利 模式
1 学员报名收入 2 付费课程收入
3 教练培训提成
4 学员分销收入
可以让用户有自信地晒出自己穿上所购买的XX，分享给大众看， 也能分享至朋友圈。
用户间交流的购买心得，同时也在给卖家反馈用户信息。
促销推送 在XXAPP上post出折扣信息，以及店铺折扣信息要及时推送。
16
重点功能介绍
XX店风采 此处上传XX店的每个锻炼区域的图片，展示出XX 店的整体风貌。
教练风采 此处可上传XX店的教练信息，展示教练的执教能力， 荣誉等信息。
任何人在平台中都可 以成为XX店的兼职人 员，实现全民营销， 平台可以尽全民的力 量实现互联网营销。
21
推广计划
APP 推广
二维码推广
通过线下门店、衣服上等地方贴上二维吗，方便 用下载使用APP；
分享推广
APP产品具备用户短信、微博、微信分享功能有 效提升APP的传播。
应用商店推广
把APP发达到苹果、安卓主流应用商店，并定期 维护，方便用户下载；
营销的需要
正值红利期
小程序的流量巨大，红利当头，使用方便，开 发成本相比APP低很多，正是一波红利来临之 时。
某健身APP
信息发布 在线课堂 险情上报 训练地图 在线医疗 优抚申请 评价反馈 专属理财 我的信息
13
3
功能规划
APP整体架构 重点功能介绍
APP必备重点功能 扩展功能介绍
微信小程序中的wxs作用
微信⼩程序中的wxs作⽤1、⼩程序的架构微信⼩程序的架构分为 app-service 和 page-frame，分别运⾏于不同的线程。
你在开发时写的所有 JS 都是运⾏在 app-service 线程⾥的，⽽每个页⾯各⾃的 WXML/WXSS 则运⾏在 page-frame 中。
app-service 与 page-frame 之间通过桥协议通信（包括 setData 调⽤、canvas指令和各种DOM事件），涉及消息序列化、跨线程通信与evaluateJavascript()。
这个架构的好处是：分开了业务主线程和显⽰界⾯，即便业务主线程⾮常繁忙，也不会阻塞⽤户在 page-frame 上的交互。
⼀个⼩程序可以有多个 page-frame （webview），页⾯间切换动画⽐SPA更流畅。
坏处是：在 page-frame 上⽆法调⽤业务 JS。
跨线程通信的成本很⾼，不适合需要频繁通信的场景。
业务 JS ⽆法直接控制 DOM。
2、wxs的作⽤针对微信⼩程序架构的缺点，微信团队推出了 WXS。
WXS 就是在 page-frame 中运⾏的 JS，可以对 view 数据做⼀些变换。
WXS 对性能的贡献就只有⼀点：与 WXML 是在同⼀个线程运⾏的，避免了跨线程通信的开销简单来说就是可以在wxml⾥使⽤js3、wxs的使⽤新建的wxs⽂件// /pages/tools.wxsvar foo = "'hello world' from tools.wxs";var bar = function (d) {return d;}module.exports = {FOO: foo,bar: bar,};module.exports.msg = "some msg";wxml⾥引⽤<!-- page/index/index.wxml --> wxs标签引⼊<wxs src="./../tools.wxs" module="tools" /><view>{{tools.msg}}</view><view>{{tools.bar(tools.FOO)}}</view>wxs⾥引⽤其他wxs⽂件// /pages/logic.wxs wxs⽂件引⼊var tools = require("./tools.wxs");。
微信小程序开发小程序框架及文件目录介绍
微信⼩程序开发⼩程序框架及⽂件⽬录介绍2019-12-1810:35:27逻辑层初步介绍除了视图层（即我们所看到的页⾯），⼩程序逻辑层各部分的功能如下：index.js 逻辑代码index.json 页⾯配置⽂件index.wxml 页⾯结构index.wxss 表⽰index.wxml结构的样式app.js app.json app wxss的作⽤与index是类似的，但它们作⽤于全局在后续的课程中我们将对逻辑层进⾏更深⼊的讲解。
⼩程序框架及⽂件⽬录介绍⼩程序框架介绍⼩程序框架的核⼼是⼀个响应的数据绑定系统。
整个系统分为两块，视图层和逻辑层。
视图层（view）内容展⽰⽂本样式视图层由WXML与WXSS编写。
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language)⽤于描述页⾯的结构。
WXSS(WeiXin Style Sheet)⽤于描述页⾯的样式。
组件(Component)是视图的基本组成单元。
逻辑层（app service）业务逻辑数据处理⼩程序开发框架的逻辑层是由JavaScript编写。
逻辑层将数据进⾏处理后发送给视图层，同时接受视图层的事件反馈。
每个页⾯有独⽴的作⽤域，并提供模块化能⼒。
⼩程序⽂件介绍⼩程序⽂件包含⼀个描述整体程序的app和多个描述各⾃页⾯的page.页⾯⼀个页⾯由四个⽂件组成，如下所⽰：index(默认)⼩程序注册及配置⼊⼝⽂件配置⽂件全局样式app.js⽂件，⽤来定义⼩程序的全局数据和函数，控制、监听⼩程序的全⽣命周期。
在这⾥可以见到的全局函数有onlaunch(监听⼩程序初始化)，onshow(监听⼩程序显⽰),onhide(监听⼩程序隐藏)等。
app.js中还可以定义⼀些全局变量，其他页⾯引⽤app.js⽂件后就可以直接使⽤这个⽂件中的函数和变量。
app.json是配置⽂件，可以配置以下信息：页⾯路径，窗⼝信息，标签导航，⽹络超时等。
微信小程序基本目录结构学习
微信⼩程序基本⽬录结构学习今天我们就以firstdemo为例，介绍⼀下⼩程序的基本⽬录结构。
当我们打开⼀个项⽬后，点击进⼊“编辑”菜单，我们可以看到有以下5个⽂件/⽂件夹）：pages⽂件夹，utils⽂件夹，全局⽂件app.js⽂件，全局⽂件app.json⽂件，图⽚编辑⽂件⼯具app.wxss⽂件。
<ignore_js_op>⼩程序⽬录结构的整体结构如下：<ignore_js_op><ignore_js_op>我们详细介绍下⼩程序⽬录中每个⽂件和⽂件夹的功能，以及注意事项。
1.pages⽬录介绍pages:主要存放⼩程序的页⾯⽂件，其中每个⽂件夹为⼀个页⾯，每个页⾯包含四个⽂件：index.js.js是⼩程序的逻辑⽂件，也称事件交互⽂件和脚本⽂件，⽤于处理界⾯的点击事件等功能，像设置初始数据，定义事件，数据的交互，逻辑的运算，变量的声明，数组，对象，函数，注释的⽅式等，其语法与javascript相同。
我们可以打开仔细查看index.js⾥⾯的代码。
⾸先，我们可以在data⾥⾯，motto是显⽰hello word,改变成hello微信⼩程序。
如下图所⽰：其次，我们看⼀下bindViewTap: function()的功能，是点击跳转到⽇志页⾯。
我们可以点击头像看⼀下演⽰效果，如下图所⽰：<ignore_js_op>最后，我们看⼀下onLoad函数，是设置页⾯启动时的动作。
我们可以修改页⾯启动时显⽰页⾯，也可以新增函数，如下图所⽰：<ignore_js_op>常⽤的⽤.js函数如下所⽰：1. Page({2. data:{3. // text:"这是⼀个页⾯"4. },5. onLoad:function(options){6. // 页⾯初始化 options为页⾯跳转所带来的参数7. console.log('App onLoad')8. },9. onReady:function(){10. // 页⾯渲染完成11. console.log('App onReady')12. },13. onShow:function(){14. // 页⾯显⽰15. console.log('App onShow')16. },17. onHide:function(){18. // 页⾯隐藏19. console.log('App onHide')20. },21. onUnload:function(){22. // 页⾯关闭23. console.log('App onUnload')24. }25. })复制代码index.json.json后缀的⽂件是配置⽂件，主要是json数据格式存放，⽤于设置程序的配置效果。
微信小程序的实现原理
微信小程序的实现原理微信小程序的实现原理主要包括以下几个方面：1. 前端框架和语言：微信小程序采用了类似于Web前端开发的技术栈，使用HTML、CSS和JavaScript来构建页面和实现交互。
但与Web开发不同的是，微信小程序使用了一种叫做WXML（WeiXin Markup Language）的标记语言来描述页面结构，使用了一种叫做WXSS（WeiXin Style Sheet）的样式语言来描述页面样式，并且使用了特定的JavaScript框架来处理页面逻辑。
2. 界面渲染和显示：微信小程序内置了一个渲染层，用于将开发者编写的WXML文件渲染成可视化的页面。
渲染层利用类似浏览器的渲染引擎，将WXML转换成页面的DOM树，再根据WXSS进行样式的处理，最终将渲染结果显示在用户的手机屏幕上。
3. 逻辑处理和数据交互：微信小程序利用JavaScript框架实现了逻辑处理和数据交互的功能。
开发者可以在JavaScript文件中定义小程序的逻辑，包括事件的处理、页面跳转、数据的获取和更新等。
在逻辑层与渲染层之间，微信小程序还提供了一个叫做WXS（WeiXin Script）的模板引擎，用于进行数据绑定和动态更新。
4. 运行环境和基础能力：微信小程序在运行时需要依赖微信客户端提供的运行环境和基础能力。
微信客户端会向小程序提供一些系统级的API，例如获取用户信息、调用设备功能（如摄像头、地理位置等）、访问网络数据等。
这些基础能力的支持，让小程序能够更好地与用户进行交互，并且具备更多的功能和体验。
总的来说，微信小程序的实现原理是基于前端技术栈和微信客户端的运行环境，通过渲染层、逻辑层和基础能力之间的协作，实现了小程序页面的展示、交互和功能实现。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• • • •
&
vim
为什么用小程序？
• • •
jiangyiwoo
三大痛点
• • • •
小程序不足
• • •
API
架构设计特点
• • • •
hybird VirtualDom JavaScript
关于 hybird
• • •
url scheme prompt
API
(
)
vim 插件 - wxapp.vim
• • • • • • • •
https:///chemzqm/wxapp.vim
实时运行环境 - WEPT
https://chemzqm.github.io/wept/
• • • • • •
CORS API Chrome appData storage Chrome
@chemzqm
Notify devtools
send_app_data appDataChange
service
page.onHideTap()
wx.setData(obj)
设计分析
• ‣ ‣ ‣ ‣ • ‣ ‣ ‣ ‣
DOM BOM eval new Function
开发者建议
• ‣ ‣ ‣ ‣ • •
API < 1M
background service -
WeixinJSBridge ContentScript Chrome devtools
view 层
• • ‣ ‣ ‣ ‣ ‣
webview
wxml wcss
js css )
exparser (VirtualDom + wx
控制层
• • • •
service
小程序的 VirtualDom
• • • •
JavaScript
Dom
/Matt-Esch/virtual-dom/wiki
小程序的模块化
• • • • • •
JavaScript es2015 require CMD AMD
内部组件构成
• • • • •
view
- UI -
人生苦短，我用热更
•
‣ ‣ ‣ ‣
•
WEPT 的热更原理
• • • • • • •
-> websocket
->
wxml: VirtualDom wxss javascript json json diff css
diff
apply
React
Fallback to refresh
To be continued …
service view
service 层
• • • • •
config appServiceEngine wx App, Page
模块间通讯
典型流程
view
bridge.publish(‘PAGE_EVENT’, data)
wx.subscribe(‘appDataChange’, function(e) { var tree = generateFn(e.data) var diff = oldTree.diff(tree) diff.apply(vdom) })
window.postMessage({ to: ‘appservice’, msg: { eventName: ‘onHideTap’ … webViewID: 0 } command: ‘MSG_FROM_WEBVIEW’ })
window.postMessage({ to: ‘webframe’, msg: { eventName: ‘appDataChange’ data: {…}, … webViewIds: [0] } command:‘MSG_FROM_APPSERVICE’ })