微信小程序面试题总结

---

一、微信小程序的主要文件

• WXML——模板文件
• JSON——配置/设置文件，如标题,tabbar,页面注册
• WXSS——样式文件，样式可直接用import导入
• JS——脚本逻辑文件，逻辑处理，网络请求
• app.json——配置文件入口，整个小程序的全局配置，网络超时时间、底部tab、页面路径，window字段是小程序所有页面的顶部背景颜色、文字颜色
• app.js——可以没有内容，可以在里边监听生命周期函数、声明全局变量
• app.wxss——全局配置样式文件

二、小程序怎么跟随事件传值

在页面标签上通过绑定dataset-key=value，然后绑定点击事件，通过e.currentTarget.dataset.key来获取标签上绑定的值

<button bindtap="get"  data-name="测试"> 拿到传值</button>

get(e){
    console.log(e.currentTarget.dataset.name)
  },

三、小程序的wxss和css有什么区别

• wxss背景图片只能引入外链，不能使用本地图片
• wxss使用@import引入外联样式，地址为相对路径
• wxss的尺寸单位为rpx，1px = 2rpx，rpx是响应式像素，可以根据屏幕宽度自适应

四、小程序的双向绑定和vue有什么区别

小程序 直接使用this.data.key = value不能更改视图，必须使用this.setData({key:value})才能更新视图

五、小程序的声明周期

• onLoad：页面加载的时候触发，一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数
• onShow：页面显示、切入前台的时候触发调用
• onReady：页面初次渲染完成的时候触发，一个页面只会调用一次
• onHide：页面隐藏、切入后台的时候触发调用，如navigateTo或底部tab切换到其他页面，小程序切入后台等
• onUnload：页面卸载时触发，如redirectTo或navigateBack到其他页面时

六、小程序怎么实现下拉刷新

• 方案一
  • 在app.json中，将"enableDownPullRefresh":true，开启全局下拉刷新
  • 在对应组件的json文件中，将"enableDownPullRefresh":true，实现单个组件下拉刷新
• 方案二
  • scroll-view：使用滚动组件，自定义刷新，通过bindscrolltoupper属性，当滚动到顶部或者左边的时候，会触发scrolltoupper事件，可以利用这个属性，来达到下拉刷新的目的

七、bindtap和catchtap的区别

• 相同点：都是点击事件
• 不同点：bindtap不会阻止冒泡，catchtap会阻止冒泡

八、小程序有哪些传递数据的方法

• 使用全局变量
  • 在app.json中的this.globalData={}中放入要传递的数据
  • 在对应组件的js文件中，头部引入const app = getApp()，来获取全局变量
  • 直接使用app.globalData.key来进行赋值和取值
• 使用路由
  • 使用wx.navigateTo和wx.redirectTo时，可以在url地址后拼接要传递参数，然后再目标页面的onLoad周期中，去获取url地址上的参数
• 使用本地缓存

九、简述navigateTo、redirectTo、switchTab、navigateBack、reLaunch的区别

• navigateTo：保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
• redirectTo：关闭当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
• switchTab：跳转到tabbar页面，并关闭其他非tabbar页面
• navigateBack：关闭当前页面，返回上一页面或多级页面，可通过getCurrentPage获取当前页面栈，决定返回几层
• reLaunch：关闭所有页面，打开到应用的某一个页面

十、小程序wx:if和hidden的区别

• wx:if：有更高的切换消耗
• hidden：有更高的初始化渲染消耗

使用场景：频繁切换使用hidden，运行条件变化使用wx:if

十一、app.json全局文件配置描述

• pages：用于存放当前小程序的所有页面路径
• window：小程序所有页面的顶部背景颜色，文字颜色配置等
• tabbar：小程序底部Tab，对多五个，最少两个

十二、微信授权流程

十三、小程序和vue的写法区别

• 遍历循环：一个是wx:for，一个是v-for
• 调用data模型：小程序是this.data.key，vue是this.key
• 给模型赋值：小程序是this.setData({key:value})，vue是this.key = value

十四、小程序的优缺点

• 优点
  • 无需下载
  • 打开速度快
  • 开发成本低
  • 为用户提供良好的安全保障，发布有一套严格的审查流程，不能通过审查的程序无法发布到线上
  • 服务请求快
• 缺点
  • 依托微信，不能开发后台管理
  • 大小限制不能超过2M，不能打开超过五个层级的页面

十五、简述小程序的原理

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

十六、提高小程序应用的方法

• 减少默认data的大小
• 组件优化方案，共用的如弹窗组件等写个自定义组件，然后调用

十七、setData的回调函数

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

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

十八、微信小程序和H5有什么区别

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

十九、小程序关联微信公众号如何确定用户的唯一性

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

二十、webview中的页面怎么跳回小程序中

• 先在管理后台配置域名白名单
• 然后引入jweixin-1.3.2.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'})

二十一、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'  
})