微信小程序前端面试题

微信小程序

一、 小程序接入微信支付

  • 小程序端:支付要调两次接口

  • 第一次:预支付交易单付交易单,后端提供,这个接口会返回下一个接口所需要的参数。

  • 第二次:调用微信的支付api wx.requestPayment

// 主要参数
wx.requestPayment({
    timeStamp: '', // 时间戳
    nonceStr: '', // 随机字符串,长度为32个字符以下
    package: '', // 统一下单接口返回的 prepay_id 参数值
    signType: 'MD5', // 签名算法
    paySign: '', // 签名
    success (res) { },
    fail (res) { }
})
  • ps:如果支付失败,比如那个支付输入密码的窗口,用户点了关闭,这个时候如果重新支付的话,必须走上面两个步骤。

二、微信小程序应用生命周期

  • onLaunch: 初始化小程序时触发,全局只触发一次。

  • onShow: 小程序初始化完成或用户从后台切换到前台显示时触发。

  • onHide: 用户从前台切换到后台隐藏时触发。

  • onError: 小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息。


三、微信小程序页面生命周期

  • onLoad:首次进入页面加载时触发,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
  • onShow:加载完成后、后台切到前台或重新进入页面时触发。
  • onReady:页面首次渲染完成时触发。
  • onHide:从前台切到后台或进入其他页面触发。
  • onUnload:页面卸载时触发。

四、微信小程序组件生命周期(lifetimes)

  • created:组件实例化,但节点树还未导入,因此这时不能用setData。(重要)

  • attached:节点树完成,可以用setData渲染节点,但无法操作节点。(重要)

  • detached:组件实例从节点树中移除。(重要)

  • ready:(不是onReady) 组件布局完成,这时可以获取节点信息,也可以操作节点

  • moved:组件实例被移动到树的另一个位置


五、微信小程序路由

  • wx.switchTap:只能用于跳转到 tabbar 页面,并关闭其他非 tabbar 页面。(重要)

  • wx.navigateTo:保留当前页面,跳转到应用内的某个页面。(重要)

  • wx.navigateBack:返回到原页面。(重要)

  • wx.redirectTo:关闭当前页面,跳转到应用内的某个页面。(重要)

  • wx.reLaunch:关闭所有页面,打开到应用内的某个页面。(重要)

  • eventChannel:微信小程序新增events 用于页面间通信接口,用于监听被打开页面发送到当前页面的数据仅wx.navigateTo路由有。


六、微信小程序场景值应用

  • 微信小程序可以根据不同的场景值跳转不同的页面。

七、微信小程序和vue不同点

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

八、bindtap和catchtap的区别?

  • bind事件绑定不会阻止冒泡事件向上冒泡。
  • catch事件绑定可以阻止冒泡事件向上冒泡。

九、微信小程序的优劣势?

1、优势

  • 无需下载,通过搜索和扫一扫就可以打开。
  • 良好的用户体验:打开速度快。
  • 开发成本要比App要低。
  • 安卓上可以添加到桌面,与原生App差不多。
  • 为用户提供良好的安全保障。小程序的发布,微信拥有一套严格的审查流程,不能通过审查的小程序是无法发布到线上的。

2、劣势

  • 限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。
  • 样式单一。小程序的部分组件已经是成型的了,样式不可以修改。例如:幻灯片、导航。
  • 推广面窄,不能分享朋友圈,只能通过分享给朋友,附近小程序推广。其中附近小程序也受到微信的限制。
  • 依托于微信,无法开发后台管理功能。

十、微信小程序参数传值的方法

  • 给HTML元素添加 data-* 属性来传递我们需要的值,然后通过 e.currentTarget.dataset 或 onload 的param 参数获取。但 data- 名称不能有大写字母、不可以存放对象。

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

  • 在 navigator中添加参数传值。


十一、如何提高微信小程序的应用速度

  • 提高页面加载速度。
  • 用户行为预测。
  • 减少默认data的大小。
  • 组件化方案。

十二、开发遇到的坑和问题汇总

1、自定义navbar适配不同的屏幕

导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2

Android导航栏高度 = 32px + 8px * 2 = 48px

iOS导航栏高度 = 32px + 6px * 2 = 44px

  • 使用getSystemInfoSync来判断是安卓还是苹果。
setNavSize: function () {
    var that = this,
        sysinfo = wx.getSystemInfoSync(),
        statusHeight = sysinfo.statusBarHeight,
        isiOS = sysinfo.system.indexOf('iOS') > -1,
        navHeight;
    if (!isiOS) {
        navHeight = 48;
    } else {
        navHeight = 44;
    }
    that.setData({
        status: statusHeight,
        navHeight: navHeight
    })
},

2、自定义navbar之后开启下拉刷新问题

  • 自定义navbar之后开启下拉刷新在头部下拉了,所以使用scroll-view开启下拉刷新(refresher-enabled)或者自定义下拉刷新组件。

3、自定义tabbar跳转如何不刷新页面

  • 使用组件形式写页面。

4、wxss文件中不支持本地图片

  • 微信小程序的background-image只支持网络图片。

5、wxml文件中可以使用三目运算符、

  • 如果我们要在wxml文件中做逻辑判断,那么我们可以使用三目运算符,列如:

type==1?’style_one’:’style_two’

6、this.setData和直接赋值的区别

  • 这两者都可以造成data里数据的改变,但是this.setData赋值才会造成界面数据的改变,也就是同步更新渲染界面,而直接赋值只会让data里数据发生变化,但是界面并不会改变。

7、cover-view组件

  • 如果想要在原生组件上覆盖组件的话,添加view,text,button都是行不通的,必须使用cover-view和cover-image组件。

8、https部署以及设置合法域名

  • 小程序向后台请求接口必须使用https,包括web-view里的网页,如果项目中有用到web socket,那么也必须使用wss协议。https证书一般会用第三方的。
  • 在微信小程序管理后台,还需要配置合法域名。当然,在后台还没有部署https之前,我们也可以进行开发调试,只需要设置不校验合法域名,https证书等即可。

9、post请求,json数据格式转换

  • 当我们向后台进行post请求的时候,当我们的传输数据的格式为json的时候,需要设置

‘content-type’: ‘application/x-www-form-urlencoded’

10、微信小程序开发单位问题

  • 一般:使用rpx。
  • 特殊:使用到canvas的时候,那么就只能使用px为单位,使用wx.getSystemInfoSync适配

11、地图导航等功能需要注意的地方

  • 使用的腾讯地图,就是gcj02坐标系,如果后台使用的是其他坐标系,那么我们需要转换。

12、微信小程序中userInfoReadyCallback使用

  • 解决小程序执行onload时,异步加载网络请求的数据。

userInfoReadyCallback这个方法是在page.onload中定义的。

如果userInfoReadyCallback方法被定义了,则说明page.onload比当前方法运行的早(page已经完成初始化),app的globalData还没有数据,通过此回调可以及时的刷新数据

如果userInfoReadyCallback方法没有被定义,则说明page.onload比当前方法运行的晚(page还没有初始化),app的globalData是有值的,可以在page.onload中取globalData里面的值

13、微信小程序空白重定向(onload二次扫码进入不加载)

  • 在刚开始的时候将小程序的入口文件直接指向tabbar 的首页,此时出现问题:二维码扫描,第一次不关闭首页,第二次进入时;不会经过onLoad过程解析scene参数。

  • 解决方法:https://www.cnblogs.com/forest-king/p/7065984.html

14、微信小程序setData修改的类型是对象或者数组的某个项的值

修改对象:

this.setData({
    ['info.isLike']:  true
});

修改数组里面某个项的值:

let targetIndex = 0;
this.setData({
    ['messages['+ targetIndex +'].isLoad']:false
})

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:微信小程序前端面试题

文章字数:2.4k

本文作者:Spicy boy

发布时间:2019-05-20, 15:04:37

最后更新:2021-03-17, 15:15:18

原始链接:http://www.spicyboy.cn/2019/05/20/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏