百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

小程序面试题 小程序面试题前端

bigegpt 2024-10-12 06:29 3 浏览

现在面试,都会问,你会不会小程序呀,你做没做过小程序呀,其实小程序很简单,只要严格按照小程序的官网来开发就行,一些常用api呀,组件呀,小程序都帮你做好了,你只需要负责用就行了。今天我们来说一下小程序面试中可能遇到的问题。

一、简述一下小程序的文件类型

我们可以看到在项目的根目录有一个 app.json、app.js 和 project.config.json 我们依次来说明一下它们的用途。

首先我们看一下小程序的目录结构,下面是小程序目录结构的截图;

1、小程序配置 app.json

必须要有这个文件,如果没有这个文件,项目无法运行,因为微信小程序把这个作为配置文件入口,是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、跳转到其他小程序配置、开启定位权限、是否开启调试模式、指定sitemap文件、分包的配置、网络超时时间、底部 tab 等。

2、全局app.js

必须要有这个文件,没有也会报错!这个文件创建一下就行,可以什么都不写,以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

3、工具配置 project.config.json

小程序工具的个性化配置,例如界面颜色、编译配置等等。

4、pages里面的文件,分为四种类型,下面来简单介绍一下这四程类型

WXML模板:和HTML非常像,WXML由标签属性等构成,但是和HTML也有很多不一样的地方,例如:

  • 标签名字不一样,写 HTML 的时候,经常会用到的标签是 div, p, span,而小程序的 WXML 用的标签是 view, button, text 等等
  • 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

WXSS 样式:WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

  • 新增了尺寸单位rpx。1rpx=0.5px=1物理像素
  • 提供了全局的样式和局部样式。你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
  • 此外 WXSS 仅支持部分 CSS 选择器

JS 交互逻辑:一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS脚本文件来处理用户的操作。

页面配置page.json:独立定义每个页面的一些属性,例如顶部颜色、是否允许下拉刷新等等。

二、小程序的事件

1、事件分类

  1. 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
  2. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

2、事件的绑定

事件绑定的写法同组件的属性,以 key、value 的形式。

  • key 以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。
  • value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

3、如何实现下拉刷新

监听用户下拉刷新事件。

  • 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
  • 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
  • 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

三、小程序更新页面的值

函数用于将数据从逻辑层发送到视图层(异步)

this.setData(Object data, Function callback)
复制代码

参数说明:

data:传一个object,是这次要改变的数据

callback:传一个function,是setData引起的界面更新渲染完毕后的回调函数

四、小程序的路由方式

打开新页面:调用 API wx.navigateTo 或使用组件 < navigator open-type="navigateTo"/>

页面重定向:调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>

页面返回:调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮

Tab 切换:调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab

重启动:调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>

五、常用的小程序请求接口的方式

HTTPS 请求(wx.request)、上传文件(wx.uploadFile)、下载文件(wx.downloadFile) 和 WebSocket 通信(wx.connectSocket)

相关推荐

恢复软件6款汇总推荐,帮你减轻数据恢复压力!

在当今数字化生活中,数据丢失的风险如影随形。无论是误删文件、硬盘故障,还是遭遇病毒攻击,丢失的数据都可能给我们带来不小的麻烦。此时,一款优秀的数据恢复软件就成为了挽救数据的关键。今天,为大家汇总推荐...

中兴星星一号刷回官方原版recovery的教程

【搞科技教程】中兴星星一号的官方recovery也来说一下了,因为之前给大家分享过了第三方的recovery了,之前给大家分享的第三方recovery也是采用一键刷入的方式,如果细心的朋友会发现,之前...

新玩机工具箱,Uotan柚坛工具箱软件体验

以前的手机系统功能比较单调,各厂商的重视程度不一样,所以喜欢玩机的朋友会解锁手机系统的读写权限,来进行刷机或者ROOT之类的操作,让使用体验更好。随着现在的手机系统越来越保守,以及自身功能的增强,...

三星g906k刷recovery教程_三星g906k中文recovery下载

【搞科技教程】看到有一些机友在找三星g906k的第三方recovery,下面就来说一下详细的recovery的刷入方法了,因为手机只有有了第三方的recovery之后才可以刷第三方的root包和系统包...

中兴星星2号刷recovery教程_星星二号中文recovery下载

【搞科技教程】咱们的中兴星星2手机也就是中兴星星二号手机的第三方recovery已经出来了,并且是中文版的,有了这个recovery之后,咱们的手机就可以轻松的刷第三方的系统包了,如果没有第三方的re...

数据恢复软件有哪些值得推荐?这 6 款亲测好用的工具汇总请收好!

在数字生活中,数据丢失的阴霾常常突如其来。无论是误删工作文档、格式化重要磁盘,还是遭遇系统崩溃,都可能让我们陷入焦虑。关键时刻,一款得力的数据恢复软件便是那根“救命稻草”。今天,为大家精心汇总6...

中兴u956刷入recovery的教程(中兴e5900刷机)

【搞科技教程】这次主要来给大家说说中兴u956手机如何刷入第三方的recovery,因为第三方的recovery工具是咱们刷第三方rom包的基础,可是很我欠却不会刷,所以太这里来给大家整理了一下详细的...

联想A850+刷recovery教程 联想A850+第三方recovery下载

【搞科技教程】联想A850+的第三方recovery出来了,这个第三方的recovery是非常的重要的,比如咱们的手机要刷第三方的系统包的时候,都是需要用到这个第三方的recovery的,在网上也是有...

工具侠重大更新 智能机上刷机一条龙完成

工具侠是针对玩机的机油开发的一款工具,不管是发烧级别的粉丝,还是普通小白用户,都可以在工具侠上找到你喜欢的工具应用。这不,最新的工具侠2.0.16版本,更新了专门为小白准备的刷机助手工具,以及MTK超...

shift+delete删除的文件找回6种硬盘数据恢复工具

硬盘作为电脑的重要存储设备,如同一个巨大的数字仓库,承载着我们日常工作、学习和生活中的各种文件,从珍贵的照片、重要的工作文档到喜爱的视频、音乐等,都依赖硬盘来安全存放。但有时,我们可能会不小心用sh...

使用vscode+Deepseek 实现AI编程 基于Cline和continue

尊敬的诸位!我是一名专注于嵌入式开发的物联网工程师。关注我,持续分享最新物联网与AI资讯和开发实战。期望与您携手探寻物联网与AI的无尽可能。这两天deepseek3.0上线,据说编程能力比肩Cl...

详解如何使用VSCode搭建TypeScript环境(适合小白)

搭建Javascript环境因为TypeScript不能直接在浏览器上运行。它需要编译器来编译并生成JavaScript文件。所以需要首先安装好javascript环境,可以参考文章:https://...

使用VSCode来书写你的Jupyter Notebooks

现在你可以在VScode里面来书写你的notebook了,使用起来十分的方便。下面来给大家演示一下环境的搭建。首先需要安装一个jupyter的包,使用下面的命令安装:pip3install-ih...

使用VSCode模板提高Vue开发效率(vscode开发vue插件)

安装VSCode安装Vetur和VueHelper插件,安装完成后需要重启VScode。在扩展插件搜索框中找到如下Vetur和VueHelper两个插件,注意看图标。添加Vue模板打...

干货!VsCode接入DeepSeek实现AI编程的5种主流插件详解

AI大模型对编程的影响非常之大,可以说首当其冲,Cursor等对话式编程工具渐渐渗透到开发者的工作中,作为AI编程的明星产品,Cursor虽然好用,但是贵啊,所以咱们得找平替,最好免费那种。俗话说,不...