5、小程序面试题

1, 小程序页面有哪些生命周期函数

onLoad: 页面加载

onReady: 页面初次渲染完成

onShow: 页面显示

onHide: 页面隐藏

onUnload: 页面卸载

2, 一页小程序页面有哪些文件组成,分别有什么作用

.wxml: 使用微信框架设计的一套组件构建页面结构

.wxss: 用于设置页面样式, 和css基本一致

.js : 设置页面数据与逻辑

.json: 页面的配置信息

3, 小程序中rpx和px有什么不同

px是固定单位, 指的是物理像素, 小程序样式不建议使用px,而建议用rpx

rpx是相对单位, 小程序把页面宽度统一设置为750rpx, 它可以根据不同屏幕宽度进行自适应,更有利于屏幕适配

4, 列举几个小程序常用组件及用法

view : 视图组件,块级元素, 用于显示块级视图及包裹子视图

text: 文本组件, 用于文字的渲染, 支持换行

Image: 图片组件, 用于渲染本地或在线图片

Button: 按钮组件

Input: 输入框组件

Picker: 选择器组件

Swiper: 轮播图组件

........

5, 简述小程序开发流程

首先在微信公众平台注册小程序账号, 获取appID

填写小程序基本信息,并下载微信开发者工具

使用小程序appID创建小程序项目,并编写完善项目

上传小程序项目为测试版, 由测试人员测试并修改BUG

测试完成后,在微信公众平台提交发布, 人工审核通过即可

6, 小程序中有哪些事件

tap, touchstart, touchmove, touchend, touchcancel,

Input, change, blue, focus, confirm

7, 简述微信小程序原理

微信小程序采用JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现

8,小程序的双向绑定和vue哪里不一样

Vue双向绑定使用v-model指令即可实现

小程序双向绑定需要自己绑定value属性和input事件

而且vue中this.data即可修改数据并更新视图,

小程序中只能用this.setData()修改数据才可更新视图

9,. 微信小程序的优劣势

优势

容易上手，基础组件库比较全，基本上不需要考虑兼容问题；

即用即走，不用安装，省流量，省安装时间，不占用桌面

依托微信流量，天生推广传播优势

开发成本比App 低

缺点

样式单一，部分组件已经是成型了的，样式不可修改，例如：幻灯片、导航入口

相对传统App 要深很多

限制较多,页面大小不能超过2M。不能打开超过5个层级的页面

10,bindtap和catchtap的区别？

相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分

不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的

11,请谈谈WXSS和CSS的异同？

都是用来设置页面样式

WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；

WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；

WXSS 仅支持部分 CSS 选择器；

WXSS 提供全局样式与局部样式

12,小程序和H5的不同

运行环境不同（小程序在微信运行，h5在浏览器运行）；

开发成本不同（h5需要兼容不同的浏览器）；

获取系统权限不同（系统级权限可以和小程序无缝衔接）；

应用在生产环境的运行流畅度（h5需不断对项目优化来提高用户体验）；

13, 小程序如何实现分享

只需要实现onShareAppMessage这个函数,即可点击右上角菜单分享

调用API wx.showShareMenu() 开启分享功能, 点击右上角菜单分享

给button组件添加 open-type="share" 属性, 即可点击按钮执行分享

14, 小程序组件中有哪些生命周期函数

created: 组件实例刚刚被创建时执行

attached: 组件实例进入页面节点树时执行

ready: 组件在视图层布局完成时执行

moved: 组件实例被移动到节点树另一个位置时执行

detached: 组件实例被从页面节点树移除时执行

error: 组件方法抛出错误时执行

15, 小程序中的传值方式有哪些:

(1, 页面(父组件)向子组件传值: 通过调用子组件的props中自定义的属性传值, 或者 通过slot插槽传值

(2, 子组件向父组件(页面)传值: 子组件发射自定义事件, 把数据放入事件函数的参数传递

(3, 页面(父组件)主动读取子组件数据, 通过this.selectComponent()函数可得到子组件实例

(4, 页面到页面之间传值: 通过路由传值, 把数据拼接到url路径上传递, 在目标页面用onLoad参数接收

(5, 使用全局状态管理传值: 在app.js中globalData字段定义全局数据, 可以在每一个页面getApp()引入并读写

(6, 使用数据缓存传值, 在一个页面中wx.setStorage存值, 另一个页面wx.getStogage取值

16,如何实现下拉刷新和触底刷新

(1, 页面的下拉刷新功能默认时关闭状态, 可以在json文件中添加字段允许下拉刷新

"enablePullDownRefresh": true

然后,下拉页面会自动调用 onPullDownRefresh()函数, 在这里请求新数据

最后,数据请求完成的success函数中,调用wx.stopPullDownRefresh停止下拉刷新的状态

(2, 触底功能默认开启, 当页面滚动到底部,会调用onReachBottom()函数

17,你是怎么封装微信小程序的数据请求的？

(1、将所有的接口放在统一的js文件中并导出

(2、在app.js中创建封装请求数据的方法

(3、在子页面中调用封装的方法请求数据

18,小程序中如何解决跨域问题?

开发时, 可在开发工具的设置选项中勾选”不校验合法域名”, 以忽略跨域限制

发布时, 需在小程序后台开发设置添加小程序中使用的域名地址,使之合法即可

19, 说一些小程序中的常用API及用法

wx.request 发起网络请求

wx.navigateTo 执行路由跳转

wx.showModal 展示模态框

wx.downloadFile 下载文件

wx.setStorage 本地存储

wx.chooseImage 从相册选择图片

wx.getUserInfo 获取用户信息

.......

20, 小程序如何获取用户信息?

(1, 使用wx.getUserInfo() 这个API,单目前已废除,建议使用以下方式

(2, 给按钮添加open-type=”getUserInfo”属性, 用bindgetuserinfo事件绑定函数获取

(3, 使用open-data组件标签,添加type属性获取某一个用户信息

21,微信API有哪些限制让你觉得不爽？

个人开发者不能使用支付API

个人开发者不能用webview组件

某些微信API有调用频次限制,例如分享API