2021面试题——微信小程序面试题

迈不过友情╰ 2023-01-15 12:29 156阅读 0赞

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

*  wxml模板文件：是框架设计的一套标签语言，结合基础组件，事件系统、可以构建出页面的结构；
 *  wxss样式文件：是一套样式语言，用于描述wxml的组合样式；
 *  js脚本逻辑文件：逻辑处理网络请求；
 *  json配置文件：小程序设置，如页面注册，页面标题及tabBar；
 *  app.json：整个小程序的全局配置，包括：
    
    a.pages：所有路径文件
    
    b.网络设置（网络超时时间）
    
    c.界面表现（网页注册）
    
    d.window：背景色，导航样式，默认标题
    
    e.底部tab等
 *  app.js可以没有内容，监听并处理小程序的生命周期函数，声明全局变量
 *  app. wxss全局配置的样式文件

### 2.请谈谈wxml和标准的html的异同 ###

*  都是用来描述页面的结构；
 *  都由标签，属性等构成；
 *  标签名字不一样，且小程序标签更少，单一标签更多；
 *  多了一些wx:if这样的属性以及\{ \{\}\}这样的表达式
 *  wxml仅能在微信小程序开发者工具中预览，而HTML可以在浏览器预览；

### 3.请谈谈wxss和css的异同 ###

*  都是用来描述页面的样子；
 *  wxss具有css的大部分的特性，也做了一些扩充和修改；
 *  wxss新增了尺寸单位，wxss在底层支持新的尺寸单位rpx；
 *  wxss仅支持部分css选择器；
 *  wxss提供全局样式与局部样式；
 *  wxss不支持window和dom文档流；

### 4.小程序和vue写法的区别 ###

*  遍历时：

小程序  wx:for="lists"
    vue    v-for="item in lists"

*  调用data模型时：

小程序：
    this.data.item //调用
    this.setData({item:1}) //赋值
    vue：
    this.item //调用
    this.item=1 //赋值

### 5.小程序页面有哪些传递数据的方法？ ###

*  使用全局变量实现数据传递；
 *  页面跳转时或重定向时，使用url带参数传递数据；
 *  使用组件模板template传递参数；
 *  使用缓存传递参数；
 *  使用数据库传递参数；

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

onLoad（）：页面加载时触发，只会调用一次，可获得当前页面路径中的参数；

onShow（）：页面显示/切入前台时触发，一般用来发送数据请求；

onReady（）：页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互；

onHide（）：页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等

### 7.数据请求怎么封装 ###

*  将所有的接口放在统一的js文件中并导出（或者将请求地址、头、方法在一个js文件里统一定义为一个常量并导出）
 *  在app.js创建封装请求数据的方法
 *  在子页面中调用封装的方法请求数据

### 8.参数传递 ###

*  给HTML元素中添加data-\*属性来传递需要的值，之后通过e.currentTarget.dataset或onload的param参数获取。注意不能有大写字母，不可以存放对象
 *  跳转页面时通过navigator传递需要的参数值
 *  设置id的方法标识，通过e.currentTarget.id获取设置的id值，然后通过设置全局变量的方法来传递数值

### 9.生命周期函数 ###

*  onLoad——页面加载，调一次
 *  onShow——页面显示，每次打开页面都调用
 *  onReady——初次渲染完成，调一次
 *  onHide——页面隐藏，当navigateTo或底部tab切换时调用
 *  onUnload——页面卸载，当redirectTo或navigateBack时调用

### 10.**小程序的双向绑定和vue哪里不一样** ###

小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData(\{\})

### 11.px和rpx的转换：1px=2rpx ###

### 12.**如何自定义组件**（弹窗） ###

（1）先创建一个components文件夹，用来存放所有自定义组件的，目录结构依然是js,wxml,json,wxss

（2）基本配置

json——进行自定义组件声明

{
      "component": true
    }

（3）使用组件

假如在index.wxml中使用这个自定义的组件，首先在index.json中进行声明。

{  
      "usingComponents": {  
          "toastdemo": "/components/toastdemo/toastdemo"  
      }  
    }

（4）接着在index.wxml中引用

（5）然后在index.js进行配置

（6）使用时直接执行this.toastdemo.showToast(‘弹框组件调用成功’,2000)就可以了

### 13.小程序内的页面跳转 ###

*  wx.navigateTo——保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面（参数必须为字符串）
 *  wx.redirectTo——关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
 *  wx.switchTab——跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数
 *  wx.navigateBack——关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
 *  wx.reLaunch——关闭所有页面，打开到应用内的某个页面

### 14.小程序的优点和缺点 ###

**优点**

*  无需下载
 *  打开速度快
 *  开发成本低
 *  为用户提供良好的安全保障。发布有一套严格的审查流程，不能通过审查的程序无法发布上线
 *  服务请求快

**缺点**

*  依托微信，不能开发后台管理功能
 *  大小限制不能超过2M，不能打开超过5个层级的页面

### 15.简述小程序的原理 ###

小程序分为两个部分webview和appService，webview用来展现UI，appService用来处理业务逻辑、数据及接口调用，它们在两个进程中运行，通过系统层JSBridge实现通信，完成UI渲染、事件处理。

### 16.提高小程序的应用速度的方法 ###

*  减少默认data的大小
 *  组件化方案，公用的如弹框等写个自定义的组件，然后调用

### 17.**setData的回调函数** ###

微信小程序的setData实现是和react的setData实现类似的，所以它也是一个异步函数，并且有回调函数的参数，当然平时小量数据我们可能并没有感觉到它的异步，但是为了确保逻辑的正确执行，在需要用到setData后 data里的数据的步骤，请写入setData的回调函数中，如下示例：

this.setData({
      a: this.data.a++
      },()=>{
    })

### 18.如何实现下拉刷新 ###

*  先在app.json或page.json中配置enablePullDownRefresh:true
 *  page里用onPullDownRefresh函数，在下拉刷新时执行
 *  在下拉函数执行时发起数据请求，请求返回后，调用wx.stopPullDownRefresh停止下拉刷新的状态

### 19.**bindtap和catchtap的区别是什么** ###

bindtap不会阻止冒泡事件，catchtap阻止冒泡

### 20.微信小程序和h5的区别 ###

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

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

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

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

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

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

### 22.**webview中的页面怎么跳回小程序中** ###

*  先在管理后台配置域名白名单，
 *  然后引入jweixin-1.3.2.js（[https://res.wx.qq.com/open/js/jweixin-1.3.0.js）][https_res.wx.qq.com_open_js_jweixin-1.3.0.js]

wx.miniProgram.navigateTo({url: '/pages/login/login'+'$params'})
    wx.miniProgram.navigateTo({url: '/path/to/page'})

### 23.**webview的页面怎么跳转到小程序导航的页面？** ###

小程序导航的页面可以通过switchTab，但默认情况是不会重新加载数据的。若需加载新数据，则在success属性中加入以下代码即可：

success: function (e) {
      var page = getCurrentPages().pop();
      if (page == undefined || page == null) return;
      page.onLoad();
    }
    //webview的页面，则通过
    wx.miniProgram.switchTab({
      url: '/pages/index/index'  
    })

### 24.**小程序和小程序之间的跳转** ###

*  在同一主体公众号上关联2个小程序appid，
 *  用**navigator**，对应设置一些属性即可
 *  **target：miniProgram——其他小程序**
 *  target：self——当前小程序

[https_res.wx.qq.com_open_js_jweixin-1.3.0.js]: https://link.zhihu.com/?target=https%3A//res.wx.qq.com/open/js/jweixin-1.3.0.js%EF%BC%89