微信开发小程序面试题_面试 微信生态和相关开发规范

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

1.wxml模板文件，是框架设计的一套标签语言，结合基本组件、事件系统、可以构建出页面的结构。
2.wxss样式文件。是一套样式语言，用于WXML的组件样式
3.js脚本逻辑文件，逻辑处理网络请求
4.json配置文件，小程序设置，如页面注册，页面标题及tabBar.
5.app.json整个小程序的 全局配置，包括：

• Pages:[所有页面路径]
• 网络设置（网络超时时间）
• 界面表现（页面注册）
• window:(背景色、导航样式、默认标题）
• 底部tab等

6.app.js监听并处理小程序的生命周期函数、声明全局变量
7.app.wxss全局裴矩的样式文件

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

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

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

• 都是描述页面的样子；
• wxss具有css大部分的特性，也做了一些扩大和修改；
• 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}}   //赋值
1
2

Vue：

this.item //调用
this.item = 1 //赋值
1
2

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

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

6、请谈谈小程序的生命周期函数？

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

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

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

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

7.小程序内的页面跳转

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

8.参数传递

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

9.如何自定义组件（弹窗）

• 先创建一个components文件夹，用来存放所有自定义组件的，目录结构依然是js,wxml,json,wxss
  基本配置：
• .json——进行自定义组件声明

{
  "component": true
}
1
2
3
4

使用组件：

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

{  
  "usingComponents": {  
      "toastdemo": "/components/toastdemo/toastdemo"  
  }  
}
1
2
3
4
5

• 接着在index.wxml中引用
• 然后在index.js进行配置
• 使用时直接执this.toastdemo.showToast(‘弹框组件调用成功’,2000)就可以了

10.小程序和vue写法的区别

• 循环遍历：小程序是wx:for=“list”，vue是v-for=“inforin list”
• 调用data模型：小程序是this.data.unifo，vue是this.unifo
• 给模型赋值：小程this.setData({unifo:1})，vue是直接this.unifo=1

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

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

12.小程序的优点和缺点

小程序的优点

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

小程序的缺点

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

13.简述小程序原理

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

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

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

15.简述小程序原理

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

16.setData的回调函数

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

this.setData({
  a: this.data.a++
  },()=>{
})
1
2
3
4

17.如何实现下拉刷新

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

18.bindtap和catchtap的区别是什么

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

19.微信小程序与H5的区别？

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

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

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

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

20.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'  
})
1
2
3
4
5
6
7
8
9

21.小程序和小程序之间的跳转

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

22.数据请求怎么封装

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