微信小程序常见面试题13道

1、bindtap 和 catchtap 区别

bindtap 不会阻止冒泡，catchtap 可以阻止冒泡。

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

使用全局变量实现数据传递。在 app.js 文件中定义全局变量 globalData，将需要存储的信息存放在里面；

使用 navigateTo 与 redirectTo 的时候，可以将数据拼接在 url 后面，然后在目标页面的 onLoad 生命周期中获取传递过来的值；

使用本地缓存 storage。
3、简述下 navigateTo()，redirectTo()，switchTab()，navigateBack()，reLaunch() 的区别

wx.navigateTo()：保留当前页面，然后跳转到某个页面。但是不能跳转到 tabbar 页面；

wx.redirectTo() ：关闭当前页面，然后跳转到某个页面。但是不能跳转到 tabbar 页面；

wx.switchTab()：跳转到某个 tabbar 页面，并关闭其他所有非 tabbar 页面；

wx.navigateBack()：关闭当前页面，返回到上一页面或目标页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层；

wx.reLaunch()：关闭所有页面，打开某个页面。
4、小程序 wx:if 和 hidden 的区别

wx:if 有更高的切换消耗，hidden 有更高的初始渲染消耗。如果频繁切换，用 hidden，如果在运行时条件不轻易改变则使用 wx:if。

5、在小程序中如何获取用户信息

使用 button 并设置其属性：open-type="getUserInfo"，在 bindgetuserinfo 绑定的回调函数中通过 e.detail 获取。

<button open-type="getUserInfo" "bindgetuserinfo"="eventhandle">获取用户信息</button>
6、小程序中如何实现分享功能

转发给朋友：监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单"转发"按钮的行为，然后在页面的 onShareAppMessage() 函数中自定义转发内容。

分享到朋友圈：监听右上角菜单"分享到朋友圈"按钮的行为，然后在页面的 onShareTimeline() 函数中自定义分享内容。
7、小程序中如何用像Vant一样的第三方组件

在命令行中执行：npm init，初始化项目

安装组件

在小程序开发工具中，选择【工具】菜单 -> 选择【构建 npm】命令
8、小程序如何实现父子组件传参

父传子：在子组件中定义属性，父组件在引用子组件的时候通过设置属性的值给子组件传值；

子传父：在组件中绑定一个自定义事件，在子组件中通过 triggerEvent('myevent', myEventDetail) 触发这个事件，给父组件传值。
9、如何实现下拉刷新

通过在 app.json（全局）或者页面的 json 中配置 "enablePullDownRefresh": true，开启下拉刷新；

也可使用 scroll-view 组件，当滚动到顶部会触发 scrolltoupper 事件，在这个事件里自定义实现下拉刷新。
10、小程序 onPageScroll 方法的使用注意什么

由于此方法调用频繁，不需要时应该去掉，不要保留空方法，避免在此方法中频繁调用 setData() 或同步 API。

11、小程序视图渲染结束后回调

使用 setData(data, callback)，在 callback 回调方法中添加后续操作代码。

12、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'

})
13、webview 中的页面怎么跳回小程序中？

webview 网页中可使用 JSSDK1.3.2 提供的接口返回小程序页面

// javascript

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