微信小程序面试题大全（持续更新）

news2025/2/28 6:29:01

1.请谈谈微信小程序主要目录和文件的作用？

  • project.config.json：项目配置文件，用的最多的就是配置是否开启https校验
  • App.js：设置一些全局的基础数据等
  • App.json：底部tab，标题栏和路由等设置
  • App.wxss：公共样式，引入iconfont等
  • pages：里面包含一个个具体的页面
  • index.json：配置当前页面标题和引入组件
  • index.wxml：页面结构
  • index.wxss：页面样式表
  • index.js：页面的逻辑，请求和数据处理

2.请谈谈wxml与标准的html的异同？

  • 都是用来描述页面的结构
  • 都由标签，属性等构成
  • 标签名字不一样，且小程序标签更少，单一标签更多
  • 多了一些 wx:if 这样的属性以及{{}} 这样的表达式
  • WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
  • 组件封装不同，WXML对组件进行了重新封装
  • 小程序运行在JS Core内，没有DOM树和windiw对象，小程序中无法使用window对象和document对象。

3.请谈谈WXSS和CSS的异同？

  • 都是用来描述页面的样子
  • WXSS具有CSS大部分的特性，也做了一些扩充和修改
  • WXSS新增了尺寸单位，WXSS在底层支持新的尺寸单位rpx
  • WXSS仅支持部分CSS选择器
  • WXSS提供全局样式与局部样式

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

  • 在根目录下创建util目录及api.js文件和apiConfig.js文件
  • 在apiConfig.js封装基础的get，post和put，upload等请求方法，设置请求体，带上token和异常处理等
  • 在api中引入apiConfig.js封装好的请求方法.根据页面数据请求的urls，设置对应的方法并导出
  • 在具体的页面中导入
  • 或
  • 将所有的接口放在统一的js文件中并导出
  • 在app.js中创建封装请求数据的方法
  • 在子页面中调用封装的请求数据

5.小程序页面之间有哪些（传值）传递数据的方法？

  • 使用全局遍历实现数据传递
  • 页面跳转或重定向时，使用url带参数传递数据
  • 使用组件模板 template传递参数
  • 使用缓存传递参数
  • 使用数据库传递参数
  • 或
  • 给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取（data- 名称不能有大写字母，不可以存放对象）
  • 设置id 的方法标识来传值，通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数据
  • 在navigator中添加参数数值

6.请谈谈小程序的双向绑定和vue的异同？

大体相同，但小程序之间this.data的属性是不可以同步到视图的，必须调用this.setData()方法

7.请谈谈小程序的生命周期函数

  • onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数
  • onShow()页面显示/切入前台时候触发，一般用来发送数据请求
  • onReady()页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互
  • onHide()页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等
  • onUnload()页面卸载时触发，如redirectTO或navigateBack到其他页面时

8.简述微信小程序原理

  • 小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
  • 它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
  • 它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
  • 功能可分为webview和APPService两个部分，webview主要用来展示UI，appservice用来处理业务逻辑，数据及接口调用，它们在两个进程中进行，通过系统层JSBridge实现通信，实现UI的渲染，事件处理；
  • webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
  • 两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。
  • javaScript的代码是运行在微信App中的，因此一些h5技术的应用需要微信APP提供对应的API支持
  • wxml 微信自己基于xml语法开发的，因此在开发时只能使用微信提供的现有标签，html的标签是无法使用的
  • wxss具有css的大部分特性，但并不是所有都支持，没有详细文档（wxss的图片引入需要使用外链地址，没有body，样式可以使用import导入）

9.请谈谈原生开发小程序，wepy，mpvue的对比？

  • 个人认为，如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。
  • 而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。
  • 而如果如果团队前端强大，自己做一套框架也没问题。

10.简单描述下微信小程序的 相关文件类型

1.

  • wxml 模板文件，是框架设计的一套标签预言，结合基础组件，事件系统，可以构建出页面的结构
  • wxss 样式文件，是一套样式语言，用于描述WXML的组件样式
  • js脚本逻辑文件。逻辑处理网络请求
  • json配置文件，小程序设置，如页面注册，页面标题及tabBar

2.

app.json 整个小程序的全局配置，包括：

pages:[所有页面路径]

网络设置（网络超时事件）

页面表现（页面注册）

window：（背景色，导航样式，默认标题）

底部tab等

3.

app.js 监听并处理小程序的生命周期函数，声明全局变量

4.

app.wxss 全局配置的样式文件

11.那些方法来提高微信小程序的应用速度？

  • 提高页面的加载速度
  • 用户行为预测
  • 减少默认的data的大小
  • 组件化方案

12.分析微信小程序的优劣势？

优势：

  • 容易上手，基础组件库比较全，基本不需要考虑兼容问题
  • 开发文档比较完善，开发社区比较活跃，支持插件式开发
  • 良好的用户体验，无需下载，通过搜索和扫一扫就可以打开，打开速度快，安卓上可以添加到桌面，与原生APP差不多
  • 开发成本比APP要低
  • 为用户提供良好的保障（小程序发布，严格是审查流程）

劣势：

  • 限制较多，页面大小不能超过1M，不能打开超过5个层级的页面
  • 样式单一，部分组件已经是成型的，样式不可修改，例如：幻灯片，导航
  • 推广面窄，不能分享朋友圈，只能通过分享给朋友，附加小程序推广
  • 依托与微信，无法开发后台管理功能
  • 后台调试麻烦，因为api接口必须https请求且公网地址
  • 真机测试，个别安卓和苹果表现迥异，例如安卓的定位功能加载很慢

13.微信小程序和H5的区别？

  • 运行环境不同（小程序在微信运行，h5在浏览器运行）
  • 开发成本不同（h5需要兼容不同的浏览器）
  • 获取系统权限不同（系统级权限可以和小程序无缝衔接）
  • 应用在生成环境的运行速度流程（h5需不断对项目优化来提高用户体验）

14.怎么解决微信小程序的异步请求问题？

在回调函数中调用下一个组件的函数

app.js

success:function(info){

        that.apirtnCallback(info)

}
index.js

onLoad:function(){

        app.apirtnCallback = res =>{

                console.log(res)

        }

}

15.小程序关联微信公众号如何确定用户的唯一性？

使用wx.getUserlnfo方法 withCredentials为true时，可获取encryptedData，里面有union_id，后端需要进行对称解密

16.使用webview直接加载要注意那些事项？

  • 必须要在小程序后台使用管理员添加业务域名
  • h5页面跳转至小程序的脚步必须是1.3.1以上
  • 微信分享只可以是小程序的主名称，如要自定义分享内容，需小程序版本在1.7.1以上
  • h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的

17.小程序调用后台接口遇到那些问题？

  • 数据的大小限制，超过范围会直接导致整个小程序崩溃，除非重启小程序
  • 小程序不可以直接渲染文章内容这类型的html文本，显示需要借助插件

注：插件渲染会导致页面加载变慢，建议在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其他的标签让插件来做

18.微信小程序如何实现下拉刷新？

用view代替scroll-view，设置onPullDownRefresh函数实现

19.webview中的页面怎么跳转回小程序?

wx.miniProgram.navigateTo({
    url:'pages/login/login'+'$params'
})
//跳转到小程序导航页面
wx.miniProgram.switchTab({
    url:'/pages/index/index'
})

20.bindtap和catchtap的区别？

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

21.简述wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别？

  • 在wxml页面中：跳转新页面，在当前页打开，切换到首页Tab
  • 在js页面中：分为应用内的页面，和tabBar页面
  • 如果上述跳转遇到跳转失败或者无效的问题，请访问：wx.navigateTo/wx.redirectTo无效

22.小程序和Vue写法的区别？

  • 遍历的时候：小程序wx:for="list",而Vue是v-for="item in list"

调用data模型（赋值）的时候：

小程序：this.data.item // 调用，this.setDate({item:1})//赋值

Vue：this.item //调用，this.item=1 //赋值

23.小程序与原生App那个好？

各有各自的优点，都又有缺点

小程序的优点：

  1. 基于微信平台开发，享受微信自带的流量，这个优点最大
  2. 无需安装，只要打开微信就能用，不占手机内存，体验好
  3. 开发周期段，一般最多一个月就可以上线完成
  4. 开发所需的资金少，所需资金是开发原生APP的一半不到
  5. 小程序名称是唯一的，在微信的搜索里权重很高
  6. 容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本没有大问题
  7. 基本不需要考虑兼容性问题，只要微信可以正常运行的机器，就可以运行小程序
  8. 发布，审核高效，基本上午发布审核，下午就审核通过，升级简单，支持灰度发布
  9. 开发文档完善，社区活跃
  10. 支持插件式开发，一些基本功能可以开发成插件，供多个小程序使用

缺点：

  1. 局限性很强（比如页面大小不能超过1M，不能打开超过5个层级的页面，样式单一，小程序的部分组件已经是成型的了，样式不能修改，比如幻灯片，导航）只能依赖于微信依托与微信，无法开发后台管理功能
  2. 不利于推广，推广面窄，不能分享朋友圈，只能分享给朋友，附近小程序推广，其中附加小程序也收到微信限制
  3. 后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；当然我们可以修改host进行dns映射把远程服务器转到本地，或者开启tomcat远程调试；不管怎么说终归调试比较麻烦
  4. 前台测试有诸多坑，最头疼莫过于模拟器与真机显示不一致
  5. js引用只能使用绝对路径，不能操作DOM

原生App优点：

  1. 原生的相应速度快
  2. 对于有无网络操作时，譬如离线操作基本选用原生开发
  3. 需要调用系统硬件的功能（摄像头，拨号，短信蓝牙..）
  4. 在无网络或者弱网情况下体验好

原生App缺点：

开发周期长，开发成本高，需要下载

24.小程序的发布流程（开发流程）

参考：https://www.cnblogs.com/ssrstm/p/6855572.html

  1. 注册微信小程序账号
  2. 获取微信小程序的AppID
  3. 下载微信小程序开发者工具
  4. 创建demo项目
  5. 去微信公众号配置域名
  6. 手机浏览
  7. 代码上传
  8. 提交审核
  9. 小程序发布

25.webview中的页面怎么跳回小程序中？

首先，需要在你的html页面中引用一个js文件

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
//然后为你的按钮标签注册一个点击事件
$(".kaiqi").click(function(){
        wx.miniProgram.redirectTo({url: '/pages/indexTwo/indexTwo'})
});
// 这里的redirectTo跟小程序的wx.redirectTo()跳转页面是一样的，会关闭当前跳转到页面，换成navigateTo，跳转页面就不会关闭当前页面

26.小程序授权登录流程

（授权，微信登录获取code，微信登录，获取 iv , encryptedData 传到服务器后台，如果没有注册，需要注册。）

27.小程序支付如何实现？

  1. 小程序注册，要以公司的身份去注册一个小程序，才有微信支付权限
  2. 绑定商户号
  3. 在小程序填写合法域
  4. 调用wx.login()获取appid
  5. 调用 
    wx.requestPayment(
{
    'timeStamp': '',//时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间
    'nonceStr': '',//随机字符串，长度为32个字符以下。
    'package': '',//统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*
    'signType': 'MD5',//签名类型，默认为MD5，支持HMAC-SHA256和MD5。注意此处需与统一下单的签名类型一致
    'paySign': '',//签名,具体签名方案参见微信公众号支付帮助文档;
    'success':function(res){},//成功回调
    'fail':function(res){},//失败
    'complete':function(res){}//接口调用结束的回调函数（调用成功、失败都会执行）
})

28.小程序还有那些功能？

客服功能，录音，视频，音频，地图，定位，拍照，动画，canvas

常见问题：

  1. rpx：小程序的尺寸单位，规定屏幕为750rpx，可适配不同分辨率屏幕
  2. 本地资源无法通过wxss获取：background-image：可以使用网络图片，或者base64，或者使用标签
  3. wx.navigateTo无法打开页面：一个应用同时只能打开5个页面，请避免多层级的交互方式，或使用wx.redirectTo
  4. tabBar设置不显示：1.tabBar的数量少于2项或超过5项都不会显示。2.tabBar写法错误导致不会显示。3.tabBar没有写pagePath字段（程序启动后显示的第一个页面）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/405065.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

呕心沥血 JavaScript知识点梳理大全，超详细 建议收藏！！！

呕心沥血 JavaScript知识点梳理大全，超详细 建议收藏！！！

呕心沥血 JavaScript知识点梳理大全&#xff0c;超详细 建议收藏&#xff01;&#xff01;&#xff01; ✴️大家好,我是王同学&#xff0c;爆肝三天三夜王同学把JavaScript 知识点梳理了一遍&#xff0c;文章没有一点套路&#xff0c;只有满满的干货 ✴️如果对你有帮助就给我…
阅读更多...
vite.config.js配置-解决跨域问题，以及@vitejs/plugin-vue等报错

vite.config.js配置-解决跨域问题，以及@vitejs/plugin-vue等报错

开发环境 在配置的过程中踩了很多坑&#xff0c;还是太菜&#xff0c;有些东西弄不明白什么意思。 运行项目时的报错可直接到最下面看vite.config.js文件的注释 目前项目用到的模块并不多&#xff0c;package.json文件如下 {"name": "PsWebV3Abb",&quo…
阅读更多...
Vue vue.config.js 的详解与配置

Vue vue.config.js 的详解与配置

Vue vue.config.js 的详解与配置 1. 为什么要配置 vue.config.js 由于 vue-cli 3 也学习了 rollup 的零配置思路&#xff0c;所以项目初始化后&#xff0c;没有了以前熟悉的 build 目录&#xff0c;也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod…
阅读更多...
HTML中的表格和表单（含有示例代码）

HTML中的表格和表单（含有示例代码）

表格表格的基本构成标签 table标签&#xff1a;表格标签 caption标签&#xff1a;表格标题tr标签&#xff1a;表格中的行 th标签:表格的表头 td标签&#xff1a;表格单元格表格的基本结构 <table>定义表格 <caption>表格标题</caption><tr>定义表行 &l…
阅读更多...
vue3 + vite 性能优化 ( 从5s -＞ 0.5s )

vue3 + vite 性能优化 ( 从5s -＞ 0.5s )

Ⅰ、Vue Vite 构建项目性能优化 vite 相比于 webpack 优势显著&#xff1b;然而 社区&#xff0c;却 不够成熟 &#xff0c;参考资料较少&#xff1b;如何让vue vite 构建项目变的 访问秒开 &#xff08;要想足够快&#xff0c;就是让首次加载足够小&#xff09;&#xff0c…
阅读更多...
安装nvm，并使用nvm安装nodejs及配置环境变量

安装nvm，并使用nvm安装nodejs及配置环境变量

一、安装nvm 1.下载nvm 解压后点击exe文件进行安装&#xff1a; 2、点击下一步安装到 D:\NVM 下 3、先在D:\NVM 下创建nodejs文件夹&#xff0c;然后将路径设置如下&#xff1a; 4、点击next 一直点击 完成安装&#xff1b; 5、找到指定nvm打开后&#xff1a; 给该文件添加这…
阅读更多...
关于 Token 过期问题的两种解决方案

关于 Token 过期问题的两种解决方案

对于token过期&#xff0c;我们有两种方案&#xff1a; 方案一&#xff1a;当我们操作某个需要token作为请求头的接口时&#xff0c;返回的数据错误error.response.status 401&#xff0c;说明我们的token已经过期了。 我们希望当响应返回的数据是401身份过期时&#xff0c;让…
阅读更多...
【学Vue就跟玩一样】如何使用vue中的消息订阅与发布，如何使用vue实现动画效果

【学Vue就跟玩一样】如何使用vue中的消息订阅与发布，如何使用vue实现动画效果

一&#xff0c;消息订阅与发布1.什么是消息订阅与发布消息订阅与发布是一种组件间通信的方式&#xff0c;适用于任意组件间通信。能更好的实现组件间通信&#xff08;消息订阅与发布就像是送报员一样。好比小a向报社订阅了一份报纸&#xff0c;然后在报社留下了自己的信息&…
阅读更多...
Web 开发与搜索引擎优化，你应该选择哪一个？

Web 开发与搜索引擎优化，你应该选择哪一个？

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】** 目录什么是搜索引…
阅读更多...
什么是BFC，他有什么用？

什么是BFC，他有什么用？

1、什么是BFC BFC - Block Formatting Context 块级格式化上下文 BFC的定义&#xff0c;在官方文档到中是这么介绍的&#xff1a;一个BFC区域包含创建该上下文元素的所有子元素&#xff0c;但是不包括创建了新的BFC的子元素的内部元素&#xff0c;BFC是一块块独立的渲染区域&a…
阅读更多...
【Three.js基础】创建场景、渲染场景、创建轨道控制器（一）

【Three.js基础】创建场景、渲染场景、创建轨道控制器（一）

&#x1f431; 个人主页&#xff1a;不叫猫先生 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域新星创作者、阿里云专家博主&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; &#x1f4ab;系列专栏&#xff1a;vue3从入门…
阅读更多...
Web服务器配置管理

Web服务器配置管理

作者&#xff1a;敲代码の流川枫 博客主页&#xff1a;流川枫的博客 专栏&#xff1a;和我一起学java 语录&#xff1a;Stay hungry stay foolish 工欲善其事必先利其器&#xff0c;给大家介绍一款超牛的斩获大厂offer利器——牛客网 点击免费注册和我一起刷题吧 文章目录…
阅读更多...
CSS，HTML，JS 以及Vue前端面试题八股文总结【看完你就变高手】

CSS，HTML，JS 以及Vue前端面试题八股文总结【看完你就变高手】

■ 符号说明&#x1f498; 主题&#x1f31f; 常见重要&#x1f31b; 需要有印象的&#x1f195; v3新特性■ 杂谈&#x1f31b; SEO优化合理的title、description、keywords&#xff1a;搜索对着三项的权重逐个减小&#xff0c;title值强调重点即可&#xff1b;description把页…
阅读更多...
vue3面试题：2022 最新前端 Vue 3.0 面试题及答案（持续更新中……）

vue3面试题：2022 最新前端 Vue 3.0 面试题及答案（持续更新中……）

1、 Vue2.0 和 Vue3.0 有什么区别&#xff1f; 响应式系统的重新配置&#xff0c;使用代理替换对象.define属性&#xff0c;使用代理优势&#xff1a; 可直接监控阵列类型的数据变化监听的目标是对象本身&#xff0c;不需要像Object.defineProperty那样遍历每个属性&#xff0…
阅读更多...
20分钟上手ES6，不会ES6好意思说自己会JS ？

20分钟上手ES6，不会ES6好意思说自己会JS ？

✍&#x1f3fc;作者&#xff1a;周棋洛&#xff0c;大二计算机学生 ♉星座&#xff1a;金牛座 &#x1f3e0;主页&#xff1a;点击查看更多 &#x1f310;关键&#xff1a;ES6 javascript 前端 文章目录理解ES6ES6 块级作用域 letES6 解构数组ES6 解构对象ES6 模板字符串ES6 判…
阅读更多...
【Spring】IOC，你真的懂了吗？

【Spring】IOC，你真的懂了吗？

作者：狮子也疯狂 专栏：《spring开发》 坚持做好每一步，幸运之神自然会驾凌在你的身上 目录 一. 🦁 前言二. 🦁 控制反转（IOC）Ⅰ. 🐇主要思想Ⅱ. 🐇原生技术创建实例弊端Ⅲ. 🐇自定义对象容器3.1 准备数据3.2 创建配置文件3.3 创建容器管理类3.4 创建StudentSer…
阅读更多...
JS 数组中的 filter 方法

JS 数组中的 filter 方法

1、定义 filter()创建一个新的数组&#xff0c;新数组中的元素是通过检查指定数组中符合条件的所有元素。 2、语法 array.filter(function(currentValue,index,arr), thisValue); 3、参数说明 返回 4、用法 filter() 方法用于把Array中的某些元素过滤掉&#xff0c;然后返回…
阅读更多...
echarts实现3d柱状图的两种方式

echarts实现3d柱状图的两种方式

echarts实现3d柱状图的两种方式 看了不少关于3d柱状图的案例,发现做3d柱状图 常用的两种方式就是 自定义图形和象型柱图, 两种实现方式效果如下: 方法1: echarts.graphic.extendShape 自定义图形 echarts自定义图形的详细用法点这里, 官网点这里, 图中第一个3d柱状图我参考…
阅读更多...
unplugin-auto-import 和 unplugin-vue-components

unplugin-auto-import 和 unplugin-vue-components

背景 unplugin-auto-import&#xff1a;为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。支持 TypeScript。 unplugin-vue-components&#xff1a;Vue 的按需组件自动导入。 这两个插件都是涉及到按需自动导入&#xff0c;所以我们在使用 Vue 和其对应的 组件之类时…
阅读更多...
最全的—— ES6有哪些新特性？

最全的—— ES6有哪些新特性？

目录ES6新特性1、let和const2、symbol3、模板字符串3.1 字符串新方法&#xff08;补充&#xff09;4、解构表达式4.1 数组解构4.2 对象解构5、对象方面5.1 Map和Set5.1.1 Map5.1.2 Set5.3 数组的新方法5.3.1 Array.from()方法5.3.2 includes()方法5.3.3 map()、filter() 方法5.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023