微信小程序 之 简答题

Posted 2022-01-14 寂静花开

前12道重点背。

目 录

• ※1 小程序的页面生命周期函数包含哪些？它们分别在什么时候触发？
• ※2 简单介绍微信小程序、原生APP和Web App之间的区别。
• ※3 简述小程序有哪些优点？
• ※4、简述什么是微信小程序
• ※5、微信小程序开发过程中页面渲染的方式有哪些？简单举例说明
• ※6、简单介绍在微信小程序中实现背景音乐播放有哪些方式?
• ※7、简述wx.navigateTo、wx.redirectTo和wx.switchTab跳转方式的不同
• ※8、简述小程序的wxss和css有哪些不同之处
• ※9、打开一个微信小程序可以通过哪些方式实现?
• ※10、简述微信小程序开发具体步骤及所需的文件结构
• ※11、简要介绍WeUi、mpvue和WePY
• ※12、简述微信小程序用户登录的流程。
• 13、请举例说明什么是事件，什么是事件处理函数。
• 14、简单介绍flex布局及兼容性
• 15、请分别简单地介绍swiper、scroll-ciew、image组件的典型应用。
• 16、简述如何使用scroll-view实现内容横向滚动
• 17、简述如何获取input输入框的值
• 18、请简述input组件中哪个属性可以设置输入文本的最大长度
• 19、简述微信小程序中如何禁止下拉
• 20、简述header头部请求的两种请求方式
• 21、请简述使用flex如何实现容器内元素的垂直居中对齐
• 22、简述POST请求方式与GET请求方式的区别
• 23.简述什么是微信小程序框架。
• 24、简述如何封装微信小程序的数据请求

※1 小程序的页面生命周期函数包含哪些？它们分别在什么时候触发？

正确答案：

(1)onLoad页面加载时触发
(2)onReady页面初次渲染完成时触发
(3)onShow页面显示时触发
(4)onHide页面隐藏时触发
(5)onUnload页面卸载时触发

※2 简单介绍微信小程序、原生APP和Web App之间的区别。

正确答案：
微信小程序：是继原生APP、Web APP之后出现的一种新的APP形态。适合开发一些业务逻辑简单、低频次使用、对性能要求不高的应用。
原生APP：由于android和ios两个平台的不兼容，需要开发两个版本，开发成本高。
Web APP：基于html5开发，解决了跨平台的问题，但是性能和用户体验不佳。

※3 简述小程序有哪些优点？

正确答案：
(1)无需下载
(2)无需升级
(3)开发周期短
(4)开发成本低
(5)体积小
(6)跨平台

※4、简述什么是微信小程序

微信小程序 ，简称 小程序 ，英文名Mini Program，是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

※5、微信小程序开发过程中页面渲染的方式有哪些？简单举例说明

wx:for列表渲染; 举例:通过循环数组实现,语句:wx:for=”[…]”
wx:if条件渲染; 举例:通过给定布尔值实现,语句wx:if=”true/false”

※6、简单介绍在微信小程序中实现背景音乐播放有哪些方式?

可以用wx.getBackgroundAudioManager接口，其特点在于小程序切入后台时如果音乐处于播放状态，可以继续播放。
也可以用wx.createlnnerAudioContext接口，播放音频

※7、简述wx.navigateTo、wx.redirectTo和wx.switchTab跳转方式的不同

wx.navigateTo() 跳转到应用内的某个页面,且保留当前页面
wx.redirectTo() 跳转到应用内的某个页面,且关闭当前页面
wx.switchTab() 跳转页面,且只能跳转到tabBar页面,并关闭其他所有非tabBar页面

※8、简述小程序的wxss和css有哪些不同之处

wxss具有css大部分特性,wxss对css进行了扩充和修改,使之更适合开发微信小程序。
wxss扩展的特性有:

• 尺寸单位:rpx:
• 可以根据屏幕宽度进行自适应
• 样式导入:@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束

※9、打开一个微信小程序可以通过哪些方式实现?

1、微信对话分享进入
2、扫码进入
3、搜索关键词进入

※10、简述微信小程序开发具体步骤及所需的文件结构

打开安装好的微信开发者工具,选择小程序项目;
填写小程序项目信息,利用普通快速启动模板创建目录结构;
打开目录结构主要包括项目配置文件 project.config.json、应用程序配置文件app.json、公共样式文件app.wxss、页面结构目录pages、app.js应用程序的逻辑代码等。

※11、简要介绍WeUi、mpvue和WePY

(1)WeUi是微信官方设计团队为微信Web开发打造的一个基础样式库，可以使得小程序的各种组件的设计风格与微信极为相似，给用户更加一致的体验。
(2)mpvue是从整个Vue.js核 心代码上经过二次开发形成的一个框架，相当于在Vue.js的基础上增加了开发微信小程序的能力。
(3)WePY在开发过程中参考了Vue.js等现有框架的一些语法风格和功能特性，对原生小程序的开发模式的再次封装，更贴近与MVVM模式。

※12、简述微信小程序用户登录的流程。

• 调用wx.login获取code
• 调用wx.request发送code到我们自己的服务器（我们自己的服务器会返回一个登录状态的标识，比如token）
• 将登录状态的标识token进行存储，以便下次使用
• 请求需要登录状态的接口时，带上这个token。

13、请举例说明什么是事件，什么是事件处理函数。

bindtap :把点击事件绑定到组件,当触摸组件时触发事件处理函数。
事件处理函数:事件触发后执行的回调函数,其中事件对象是 e

14、简单介绍flex布局及兼容性

flex布局：弹性盒布局
设置父元素的display属性值为flex
设置子元素的相关属性调整布局,如flex、flex-direction等

15、请分别简单地介绍swiper、scroll-ciew、image组件的典型应用。

swiper 组件用来实现轮播图和多页面结构;
scroll-view 组件当内容超出当前组件的高度时,自动出现滚动条;
image 组件引入图片,通过属性控制图片的显示模式; 模式: 4 种缩放模式; 9 种裁剪模式;

16、简述如何使用scroll-view实现内容横向滚动

水平滚动时, scroll-x='true',
同时 属性一定要设置:

 .container  white-space : nowrap ;  
 .size  display : inline-block ; width : 300 rpx ; 

17、简述如何获取input输入框的值

只写一个e.detail.value应该就可以了吧。。

给input组件绑定一个函数，例bindInputValue()函数;
在.js文件中获取: e.detail.value
例：

bindInputValue:function(e) 
const value = 
console.log(value)

18、请简述input组件中哪个属性可以设置输入文本的最大长度

input组件中使用maxlength属性控制最大输入长度; 但是如果最大输入长度设置为了-1时,则不限制最大长度。

19、简述微信小程序中如何禁止下拉

设置enablePullDownRefresh属性为false

20、简述header头部请求的两种请求方式

"Content-Type": "application/x-www-form-urlencoded" 
'Content-Type': 'application/json'

21、请简述使用flex如何实现容器内元素的垂直居中对齐

display:flex;
justify-content:center; // 水平
align-items: center;     // 垂直

22、简述POST请求方式与GET请求方式的区别

Get请求是将数据放在请求的Url中，而Post请求是将数据放到请求报文中。

23.简述什么是微信小程序框架。

（1）微信小程序框架可以用来快速构建微信小程序项目；
（2）主要包括：mpvue、WeUI、WePY、小程序原生框架；

24、简述如何封装微信小程序的数据请求

1. 将所有的接口放在统一的js文件中并导出
2. 在app.js中创建封装请求数据的方法
3. 在子页面中调用封装的方法请求数据