• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

面试题(2020)微信小程序常见面试题

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

面试题(2020)微信小程序常见面试题

博客说明

文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

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

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

2、数据请求怎么封装

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

3、参数传递

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

4、生命周期函数

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

5、小程序的双向绑定和vue哪里不一样

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

6、1px = 2rpx

7、如何自定义组件(弹窗)

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

基本配置:

  • .json——进行自定义组件声明
{
  "component": true
}

使用组件:

  • 假如在index.wxml中使用这个自定义的组件,首先在index.json中进行声明
{  
  "usingComponents": {  
      "toastdemo": "/components/toastdemo/toastdemo"  
  }  
}
  • 接着在index.wxml中引用
  • 然后在index.js进行配置
  • 使用时直接执行this.toastdemo.showToast(\'弹框组件调用成功\',2000)就可以了

8、小程序内的页面跳转

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

9、小程序和Vue写法的区别

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

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

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

11、小程序的优点和缺点

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

12、简述小程序原理

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

13、提高小程序的应用速度的方法

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

14、简述小程序原理

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

15、setData的回调函数

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

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

16、如何实现下拉刷新

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

17、bindtap和catchtap的区别是什么

  • bindtap不会阻止冒泡事件,catchtap阻止冒泡

18、微信小程序与H5的区别?

①运行环境不同(小程序在微信运行,h5在浏览器运行);

②开发成本不同(h5需要兼容不同的浏览器);

③获取系统权限不同(系统级权限可以和小程序无缝衔接);

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

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

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

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

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

21、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\'  
})

22、小程序和小程序之间的跳转

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

感谢

万能的网络

以及勤劳的自己,个人博客GitHub


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap