微信小程序面试题

红太狼 2023-06-24 15:28 13阅读 0赞

### 小程序的开发流程 ###

注册微信小程序账号
    
    获取微信小程序的 AppID
    
    下载微信小程序开发者工具
    
    创建demo项目
    
    去微信公众平台配置域名
    
    手机预览
    
    代码上传
    
    提交审核
    
    小程序发布

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

(1)WXML （WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。与html差不多。  
(2)WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，与css差不多  
(3) js 逻辑处理，网络请求  
(4) json 小程序设置，如页面注册，页面标题及tabBar。

(5)project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；  
(6)App.js 设置一些全局的基础数据等；  
(7)App.json 底部tab, 标题栏和路由等设置；  
(8)App.wxss 公共样式，引入iconfont等；

### 2.有哪些参数传值的方法? ###

(1)给HTML元素添加data-\*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象  
(2)设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值  
(3)在navigator中添加参数传值（？传的值的名称=所传的值在onLoad(option)用option来接收并获取）

### 3.使用过哪些方法来提高微信小程序的应用速度？ ###

(1)提高页面加载速度

(2)用户行为预测

(3)减少默认data的大小

(4)组件化方案

### 4.你是怎么封装微信小程序的数据请求的？ ###

(1)在根目录下创建utils目录及api.js文件和apiConfig.js文件；  
(2)在apiConfig.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等;

(3)在api中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出；

(4)在具体的页面中导入;

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

onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。  
onShow() 页面显示/切入前台时触发，一般用来发送数据请求；  
onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。  
onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。

onUnload()页面卸载时触发，如redirectTo或navigateBack到其他页面时。

### 6.请谈谈小程序的双向绑定和vue的异同？ ###

大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法

### 7.怎么解决小程序的异步请求问题？ ###

在回调函数中调用下一个组件的函数：

app.js

success: function (info) {
         that.apirtnCallback(info)
    }

index.js

onLoad: function () {
        app.apirtnCallback = res => {
         console.log(res) 
        }
    ｝

### 8.如何实现下拉刷新？ ###

用view代替scroll-view,设置onPullDownRefresh函数实现

### 9.使用webview直接加载要注意哪些事项？ ###

(1)必须要在小程序后台使用管理员添加业务域名;

(2)h5页面跳转至小程序的脚本必须是1.3.1以上;

(3)微信分享只可以都是小程序的主名称了，如果要自定义分享的内容，需小程序版本在1.7.1以上;

(4)h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序

### 10.小程序简单介绍下三种事件对象的属性列表？ ###

(1)基础事件（BaseEvent）

type: 事件类型
    timeStamp：事件生成时的时间戳
    target：触发事件的组件的属性值集合
    currentTarget：当前组件的一些属性集合

(2)自定义事件（CustomEvent）  
detail  
(3)触摸事件（TouchEvent）  
touches  
changedTouches

### 11.小程序授权登录流程 ###

（授权，微信登录获取code，微信登录，获取 iv , encryptedData 传到服务器后台，如果没有注册，需要注册。）

### 12.小程序支付如何实现？ ###

我们做要简单，其实我更认为是小程序只有1M，更多的东西给后台吧  
1、小程序注册，要以公司的以身份去注册一个小程序，才有微信支付权限；  
2、绑定商户号。  
3、在小程序填写合法域  
4.调用wx.login()获取appid  
5.调用

wx.requestPayment(  
\{  
‘timeStamp’: ‘’,//时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间  
‘nonceStr’: ‘’,//随机字符串，长度为32个字符以下。  
‘package’: ‘’,//统一下单接口返回的 prepay\_id 参数值，提交格式如：prepay\_id=\*  
‘signType’: ‘MD5’,//签名类型，默认为MD5，支持HMAC-SHA256和MD5。注意此处需与统一下单的签名类型一致  
‘paySign’: ‘’,//签名,具体签名方案参见微信公众号支付帮助文档;  
‘success’:function(res)\{\},//成功回调  
‘fail’:function(res)\{\},//失败  
‘complete’:function(res)\{\}//接口调用结束的回调函数（调用成功、失败都会执行）  
\})

### 13.小程序还有哪些功能？ ###

客服功能，录音，视频，音频，地图，定位，拍照，动画，canvas

### 14.小程序对wx:if 和 hidden使用的理解？ ###

wx:if 有更高的切换消耗。  
hidden 有更高的初始渲染消耗。  
因此,如果需要频繁切换的情景下用hidden更好，如果在运行时条件不大可能改变则 wx:if 较好。

### 15.请谈谈原生开发小程序、wepy、mpvue 的对比？ ###

如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。