前端知识体系6.小程序

本文目录 1.说下小程序框架的主要文件和目录的作用 2.微信小程序组件的生命周期 3.简单描述下微信小程序页面文件的相关文件类型？ 4.app.json 是对当前小程序的全局配置，讲述三个配置各个项的含义？ 5.小程序的双向绑定和vue的异同？ 6.小程序的wxss和css有哪些不一样的地方 7.如何提高微信小程序的应用速度？ 8.程序wxml与标准的html的异同 9.说一说小程序的原理 10.分析下微信小程序的优劣势 11.小程序中的路由管理 1.说下小程序框架的主要文件和目录的作用 project.config.json 项目配置文件，用得最多的就是配置是否开启https校验； App.js 设置一些全局的基础数据等； App.json 底部tab, 标题栏和路由等设置； App.wxss 公共样式，引入iconfont等； pages 里面包含一个个具体的页面； components 组件所在的文件夹 utils 自己封装的工具库 2.微信小程序组件的生命周期 答：生命周期函数-onLoad: 页面加载 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。 onShow: 页面显示 每次打开页面都会调用一次。 onReady: 页面初次渲染完成 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。 onHide: 页面隐藏 当navigateTo或底部tab切换时调用。 onUnload: 页面卸载 3.简单描述下微信小程序页面文件的相关文件类型？ 微信小程序项目结构主要有四个文件类型： .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件 4.app.json 是对当前小程序的全局配置，讲述三个配置各个项的含义？ 答：pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。 window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的 tab字段—小程序全局顶部或底部tab 5.小程序的双向绑定和vue的异同？ 大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法 6.小程序的wxss和css有哪些不一样的地方 答：1.可以使用新像素单位rpx 2.样式可直接使用import导入 7.如何提高微信小程序的应用速度？ 一、提高页面加载速度 二、用户行为预测 三、减少默认data的大小 四、组件化方案 7.微信小程序与H5的区别？ 第一条是运行环境的不同 传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。 第二条是开发成本的不同 只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG 第三条是获取系统级权限的不同 在微信环境下小程序能够和充分调用微信提供的接口去无缝获取系统权限 8.程序wxml与标准的html的异同 相同点 都是用来描述页面的结构；都由标签、属性等构成； 不同点 标签名字不一样，且小程序标签更少，单一标签更多； 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览； 组件封装不同， WXML对组件进行了重新封装， 小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。 9.说一说小程序的原理 答：微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同。 JavaScript：首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好。 WXML：WXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的。 WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持。 微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。 小程序分为两个部分webview和appService。其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理 10.分析下微信小程序的优劣势 优势： 1、无需下载，通过搜索和扫一扫就可以打开。 2、良好的用户体验：打开速度快。 3、开发成本要比App要低。 4、安卓上可以添加到桌面，与原生App差不多。 5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程， 不能通过审查的小程序是无法发布到线上的。 劣势： 1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。 2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。 3、推广面窄，只能依托微信提供的途径，如分享给朋友，附近的小程序推广等 4、依托于微信，一些功能很受限制。 11.小程序中的路由管理 在小程序中所有的页面路径必须在app.json的pages中定义出来，在小程序中不像普通的H5网页那样使用a链接跳转，在小程序中必须使用小程序提供的api和组件做路由的跳转，组件使用navigator组件做跳转，也可使用api中提供wx.navigateTo() ，wx.redirectTo()，wx.reLaunch()，wx.switchTab()，wx.navigateBack(), 还有另一个点需要注意的就是小程序中的跳转只有后腿，不能前进

本文章由javascript技术分享原创和收集