2023小程序面试题集

小程序和普通网页区别

运行环境不同：网页在浏览器运行，小程序在微信环境运行
​
开发模式不同： 网页开发用浏览器+代码编辑器 小程序有自己的一套标准开发模式，使
用小程序开发工具
​
api不同 运行环境不同所以小程序没有办法调用bom和dom的api 小程序可以调用微信环境
提供的各种api 比如扫码，支付，地理定位，摇一摇，附近的人等等...
复制代码

小程序的项目构成

pages 用来存放所有小程序页面
utils 用来存放工具性质模块，比如格式化时间.wxs文件，封装请求数据组件.js文件
​
app.js 小程序项目的入口文件  类似vue的 app.vue 
app.json 小程序项目的全局配置文件
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序是否允许被微信搜索引擎搜索到，比如：在微信小程序搜
京东，会弹出京东小程序，
如果关闭，搭建的项目，微信是无法搜索到的。
复制代码

小程序页面的组成部分**

每个页面由四个基本文件组成，在app.json文件中配置好pages后小程序会自动生成文件
1. .js文件 存放页面脚本文件，存放页面的数据，事件处理函数等 （写逻辑代码）
2. .json文件 当前页面配置文件，配置窗口的外观，表现等
3. .wxml文件 存放页面布局，类似html但不同，div=view span=text img=image 
4. .wxss文件 存放样式类似css但是和css不同，.wxss新增了rpx像素单位，只能引入外
链文件和样式背景图等都必须外链文件。
复制代码

app.json文件介绍

pages ：用来记录当前小程序所有页面的路径
window：全局定义小程序所有页面的背景颜色，文字颜色等等...
style:全局定义小程序的组件所使用的样式版本
sitemapLocation：用来指明sitemap.json的位置
​
复制代码

如何自定义tabBar

首先在app.json中 配置“tabBar”，对象然后创建list数组，写实际的路径，最少两个，最多五个。
或者说：首先配置信息，添加tabBar代码，然后编写tabBar代码 创建list 最少两个最多五个
复制代码

小程序的组件

<view></view>
<text></text>
<swiper>
   <swiper-item></swiper-item>
</swiper>
<icon></icon>
<image  src=""></image>
<rich-text  nodes="<p></p>"></rich-text>
复制代码

小程序如何实现循环

<view  wx:for="{{arr}}"  wx:key="index"  >
<view  wx:for="{{arr}}"  wx:key="*this"  >
默认下标=index 默认内容=item   *this代表每个内容可以当（作为）下标使用
如果要修改默认值可以 wx:for-index="i" 将默认下标修改为i wx：key="i"即可
    
复制代码

事件

<view data-i="{{实际的值}}" bindtap="事件">
​
在.js页面
​
​
事件名（接受的值）{}
​
复制代码

如何实现文本框双向数据绑定

input value="msg" bindinput="事件名"
在.js页面
data中：msg："" 声明一下变量
事件名（e）{
    this.setData({
        msg:e.detail.value
    })
}
复制代码

页面导航

navigateTo 非tabBar页面
switchTab  tabBar页面
navigateBack 后退
exot 退出
声明式导航：<navigator url="路径" open-type="">
编程式导航：
wx.switchTab({
    url: `/pages/cart/cart?id=66`
})


复制代码

如何实现下拉刷新，上拉加载 （偏官方一点）

1.开启全局下拉刷新，在app.json节点中enablePullDownRefresh:true
  开启局部下拉刷新，在组件.json文件中 enablePullDownRefresh:true
2.配置下拉刷新的窗口样式
  backgroundTextStyle:dark loading效果
  backgroundColor窗口背景色
3.监听下拉刷新事件
  通过onPullDownRefresh()
  数据重置成功后调用关闭下拉刷新效果也可以在json文件中写入
  stopPullDownRefresh：true 或者在.js页面中wx.stopPullDownRefresh()
  
上拉加载：
1.onReachBottomDistance：60配置上拉触底距离为60 全局局部一样写法，
监听页面上拉触底事件 onReachBottom() { ‘触发了上拉触底事件’ }
复制代码

如何实现下拉刷新，上拉加载 （修改理解后更简单）

首先在在json文件中开启下拉刷新值为true，在app.json开启为全局，在组件.json开启
为局部
配置下拉刷新的窗口样式，如：配置loading效果，窗口背景色。配置下拉刷新后关闭下
拉刷新效果。
配置上拉加载的，上拉触底距离为60，然后监听事件。
onPulllDownRefresh下拉刷新事件
onReachBottom上拉加载事件
复制代码

网络请求限制，如何配置合法域名？

 1.出于安全考虑，小程序对数据接口的请求有限制要求，小程序只能请求https类型接口，
必须将接口的域名添加到信任列表中否则控制台会提示（警告）
 2.登录小程序公众平台--->开发管理---->开发设置--->服务器域名--->修改合法域名

复制代码

如何封装https网络请求

 1.在项目跟目录utils文件中，创建request.js 声明变量request复值function函数中写
request请求代码
var request = function (options){
     wx.request({
        url: options.url, //仅为示例，并非真实的接口地址
        data:options.data,
        method:options.method,
        header: {
          'content-type': 'application/json' // 默认值
        },
        success:(res)=>{
          options.success(res)
        },
}
使用es5语法导出request实例 module export =request
使用时 const {request} = require('路径')
复制代码

如何创建组件

在项目根目录下新建components文件，右击新建复用组件输入组件
名称回车会自动生成四个文件，分别是：.json.js.wxss.wxml和页
面文件功能一致。
然后注册组件在app.json中注册为全局，在组件内的json中注册为
局部，"usingComponents":{
    "组件名必须驼峰或者my——text":"/路径"
}
使用组件时直接组件名的标签即可<my——text></my——text>
复制代码

组件和页面的区别

组件：
    1. 都是由四个文件组成，.json.js.wxml.wxss
    2. 组件的.json文件需要声明component（）函数
    3. 组件的.js文件中需要调用component（）函数
    4. 组件的方法直接定义在methods中即可
页面：
    页面中.js调用page方法即可
复制代码

properties和data的区别

小程序的组件中，properties属性和data属性用法相同，都是可读
可写，但是data适合储存组件的私有数据，properties适合储存外
界传递给组件的私有数据
复制代码

数据监听器

在Component中使用observers来监听，语法是
"字段A,字段B,字段C":function(A的值，...){
    //执行的逻辑操作代码
}

复制代码

纯数据字段

开启纯数据字段方式，在component函数中的options中写入
pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
然后将数据的属性名写为
_value:'',
_rgb:{
    r:0,
    g:0,
    b:0
}
复制代码

组件的主要生命周期

在小程序中，最重要的生命周期函数有三个分别是，
created，attached，detached
1.组件实例刚刚被创建好触发created，不能调用setData
用来给组件的this添加一些自定义属性
2.组件完全初始化完毕，进入页面节点树后，触发
attached。this.data已经被初始化完毕，初始化工作比如发送请求。
3.组件离开页面节点树，触发detached生命周期函数，清理性质工作
复制代码

插槽

options: {
    multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
},
在组件中：
 <slot name="A"></slot>
 在页面中：
 <my-text>
     <blick slot="A"> // block标签不会被渲染
         <text>123</text>
     </blick>
 <my-text>
复制代码

父子组件通信 （父传子）

1.父组件在标签中直接写传递的数据名+值，语法：val="123"
2.properties可以接受外界传递给组件的数据,语法：
properties:{
    属性名：{
        type:"数据类型",
        value:"默认值"//当父组件没有传递这个数据时才会显示默认值
    },
    //简写：
    val:String,//使用时注意字符串和数字类型否则会拼接
}
子组件直接使用data.属性名也可以获取到数据

复制代码

父子组件通信（子传父）

1.在子组件中定义方法，通过this.triggerEvent('countEve',123)传递数据
2.父组件在子组件的标签上通过bind:countEve="触发的方法" 触发一个方法
然后在方法中通过e.detail来获取子组件传递的实际数据
复制代码

如何获取组件实例（*重点）

在wxml页面组件中加入id，然后再js页面获取组件实例对象，并调用组件内的方法
下面代码可不背 自己懂就好！
{
    getPhoneNumber 方法名 
    this.selectComponent('#custom-component').getPhoneNumber();
}
复制代码

npm 和 node

npm 是脚本语言，不能单独运行，嵌套在html使用，通过浏览器去运行，浏览器拥有js引
擎可以解析js代码，逐行解析有一行报错下面的代码都不会执行。
ECMAScript,DOM,BOM

node是让js在服务端开发环境，node使用js语法ECMAScript，有自己的api，例：fs，
http,path,url等等...
复制代码

模块化开发

一个js文件是一个模块，每个模块之间相互独立不会影响对方。
使用模块，必须引入module.exports={} require该导入导出遵循COmmonJS规范，只能应
用于服务端

export default import 该导入导出是遵循ES6规范，可以用在前端也可以用在服务端

复制代码

全局数据共享

全局数据共享又称为：状态管理模式，是为了解决组件直接数据共享问题，开发中常用的
全局数据共享方案牛vuex，redux，mobx等...而微信小程序常用的就是MobX
复制代码

什么是分包？

分包就是把一个完整的小程序项目，按照需求划分为不同的子包，最终打包成不同的分
包，用户再使用时按需进行加载，唯一好处就是提升性能，优化小程序首次启动的下载时
间。
复制代码

如何使用分包以及分包体积限制？

使用分包： 在根目录创建分包文件夹，在文件中创建pages文件在pages文件中创建
Component组件文件，创建完成后在app.json配置下面路径
//声明分包的结构
"subPackages": [
    {
       "root":"packageA",   //第一个分包的根目录
       "pages": [   //分包下所有页面的存放路径
         "pages/detail/detail"
       ]
    },
    {
      "root":"packageB",
      "pages": [
        "pages/goods/goods"
      ]
   }
  ],
  
分包限制：
   整个小程序所有包大小不能超过16m （主包+分包）
   单个分包或主包大小不能超过2m
  
  
复制代码

节流

连续触发一个事件，但是只会在n秒中只执行一次函数

使用场景：轮播图点击效果，鼠标移动，滚动条滚动,上拉加载

案例：轮播图完成切换需要1s，不加节流，快速点击，嗖嗖的切换 ；加了节流，不管快速点击多少次，1s内只执行一次

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

1. project.config.json：项目配置文件，用的最多的就是配置是否开启https校验

2. App.js：设置一些全局的基础数据等

3. App.json：底部tab，标题栏和路由等设置

4. App.wxss：公共样式，引入iconfont等

5. pages：里面包含一个个具体的页面

6. index.json：配置当前页面标题和引入组件

7. index.wxml：页面结构

8. index.wxss：页面样式表

9. index.js：页面的逻辑，请求和数据处理

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

1. 都是用来描述页面的结构

2. 都由标签，属性等构成

3. 标签名字不一样，且小程序标签更少，单一标签更多

4. 多了一些 wx:if 这样的属性以及{{}} 这样的表达式

5. WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览

6. 组件封装不同，WXML对组件进行了重新封装

7. 小程序运行在JS Core内，没有DOM树和windiw对象，小程序中无法使用window对象和document对象。

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

• 都是用来描述页面的样子

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

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

• WXSS仅支持部分CSS选择器

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

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

1. 在根目录下创建util目录及api.js文件和apiConfig.js文件

2. 在apiConfig.js封装基础的get，post和put，upload等请求方法，设置请求体，带上token和异常处理等

3. 在api中引入apiConfig.js封装好的请求方法.根据页面数据请求的urls，设置对应的方法并导出

4. 在具体的页面中导入

5. 或

6. 将所有的接口放在统一的js文件中并导出

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

8. 在子页面中调用封装的请求数据

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

1. 使用全局遍历实现数据传递

2. 页面跳转或重定向时，使用url带参数传递数据

3. 使用组件模板 template传递参数

4. 使用缓存传递参数

5. 使用数据库传递参数

6. 或

7. 给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取（data- 名称不能有大写字母，不可以存放对象）

8. 设置id 的方法标识来传值，通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数据

9. 在navigator中添加参数数值

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

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

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

1. onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数

2. onShow()页面显示/切入前台时候触发，一般用来发送数据请求

3. onReady()页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互

4. onHide()页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等

5. onUnload()页面卸载时触发，如redirectTO或navigateBack到其他页面时

8.简述微信小程序原理

1. 小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；

2. 它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；

3. 它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；

4. 功能可分为webview和APPService两个部分，webview主要用来展示UI，appservice用来处理业务逻辑，数据及接口调用，它们在两个进程中进行，通过系统层JSBridge实现通信，实现UI的渲染，事件处理；

5. webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；

6. 两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。

7. javaScript的代码是运行在微信App中的，因此一些h5技术的应用需要微信APP提供对应的API支持

8. wxml 微信自己基于xml语法开发的，因此在开发时只能使用微信提供的现有标签，html的标签是无法使用的

9. wxss具有css的大部分特性，但并不是所有都支持，没有详细文档（wxss的图片引入需要使用外链地址，没有body，样式可以使用import导入）

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

1. 个人认为，如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。

2. 而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。

3. 而如果如果团队前端强大，自己做一套框架也没问题。

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

1.

• wxml 模板文件，是框架设计的一套标签预言，结合基础组件，事件系统，可以构建出页面的结构

• wxss 样式文件，是一套样式语言，用于描述WXML的组件样式

• js脚本逻辑文件。逻辑处理网络请求

• json配置文件，小程序设置，如页面注册，页面标题及tabBar

2.

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

• pages:[所有页面路径]

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

• 页面表现（页面注册）

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

• 底部tab等

3.

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

4.

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

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

• 提高页面的加载速度

• 用户行为预测

• 减少默认的data的大小

• 组件化方案

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

优势：

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

2. 开发文档比较完善，开发社区比较活跃，支持插件式开发

3. 良好的用户体验，无需下载，通过搜索和扫一扫就可以打开，打开速度快，安卓上可以添加到桌面，与原生APP差不多

4. 开发成本比APP要低

5. 为用户提供良好的保障（小程序发布，严格是审查流程）

劣势：

1. 限制较多，页面大小不能超过1M，不能打开超过5个层级的页面

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

3. 推广面窄，不能分享朋友圈，只能通过分享给朋友，附加小程序推广

4. 依托与微信，无法开发后台管理功能

5. 后台调试麻烦，因为api接口必须https请求且公网地址

6. 真机测试，个别安卓和苹果表现迥异，例如安卓的定位功能加载很慢

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.小程序的发布流程（开发流程）

参考：www.cnblogs.com/ssrstm/p/68…

1. 注册微信小程序账号

2. 获取微信小程序的AppID

3. 下载微信小程序开发者工具# 25.webview中的页面怎么跳回小程序中？

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字段（程序启动后显示的第一个页面）文章来源地址https://www.toymoban.com/news/detail-667808.html

到了这里，关于2023小程序面试题集的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！